Merge pull request #6390 from nextcloud-libraries/fix/next/6384/box-s…

…izing [next] fix!: make 'box-sizing: border-box' a default behaviour for all containers
nextcloud-libraries · Jan 17, 2025 · 7ae3143 · 7ae3143
2 parents 2220800 + 00a1be5
commit 7ae3143
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,11 +15,11 @@ All notable changes to this project will be documented in this file.
 * The package is now a native ESM package and the CommonJS entry points were dropped!
 * The `limitWidth` prop of `NcSettingsSection` was removed (the content is now always limitted width) [\#5605](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5605)
 * The `closing` and `opening` events of `NcAppSidebar` were removed as they are directly emitted when the sidebar was opened when using `v-if` and also just duplicated the state of the `open` prop [\#5606](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5606)
-* The `checked` prop was renamed to `modelValue`, the `update:checked` event was renamed to `update:modelValue`. This affects the following components.
+* The `checked` prop was renamed to `modelValue`, the `update:checked` event was renamed to `update:modelValue`. This affects the following components:
   - `NcActionCheckbox`
   - `NcActionRadio`
   - `NcCheckboxRadioSwitch`
-* The `value` prop was renamed to `modelValue`, the `update:value` or `input` events were renamed to `update:modelValue`. This affects the following components.
+* The `value` prop was renamed to `modelValue`, the `update:value` or `input` events were renamed to `update:modelValue`. This affects the following components:
   - `NcActionInput`
   - `NcActionTextEditable`
   - `NcColorPicker`
@@ -41,6 +41,9 @@ All notable changes to this project will be documented in this file.
   - `NcBreadcrumb`
   - `NcListItem`
 * The `isFullscreen` and `isMobile` mixins were removed. Use the according composables instead.
+* The `box-sizing: border-box` is now default for following components and its content. This is done to match behaviour of `NcContent` (as they can be mounted directly to `body`):
+  - `NcModal`
+  - `NcPopover`
 
 ### 🚀 Enhancements
 * Allow writing components using Typescript and provide type definitions for `NcButton` [\#4525](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4525) \([susnux](https://github.com/susnux)\)

diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -2,13 +2,12 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
- 
+
  .app-navigation-entry {
 	position: relative;
 	display: flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
-	box-sizing: border-box;
 	width: 100%;
 	min-height: var(--default-clickable-area);
 	transition: background-color var(--animation-quick) ease-in-out;
@@ -20,7 +19,6 @@
 		display: flex;
 		flex-shrink: 0;
 		flex-wrap: wrap;
-		box-sizing: border-box;
 		width: 100%;
 
 		&.app-navigation-entry--collapsible:not(.app-navigation-entry--opened) > ul {
@@ -85,7 +83,6 @@
 		display: flex;
 		overflow: hidden;
 		flex: 1 1 0;
-		box-sizing: border-box;
 		min-height: var(--default-clickable-area);
 		padding: 0;
 		white-space: nowrap;

diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -329,7 +329,6 @@ export default {
 	// Above NcAppContent
 	z-index: 1800;
 	height: 100%;
-	box-sizing: border-box;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -351,7 +350,6 @@ export default {
 		width: 100%;
 		overflow-x: hidden;
 		overflow-y: auto;
-		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
 		gap: var(--default-grid-baseline, 4px);

diff --git a/src/components/NcAppNavigationList/NcAppNavigationList.vue b/src/components/NcAppNavigationList/NcAppNavigationList.vue
@@ -47,7 +47,6 @@ export default {
 	width: 100%;
 	overflow-x: hidden;
 	overflow-y: auto;
-	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);

diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -79,7 +79,6 @@ export default {
 	padding: $app-navigation-settings-margin;
 
 	&__header {
-		box-sizing: border-box;
 		margin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;
 
 		.settings-button {
@@ -129,7 +128,6 @@ export default {
 		/* restrict height of settings and make scrollable */
 		max-height: 300px;
 		overflow-y: auto;
-		box-sizing: border-box;
 	}
 }
 

diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -393,14 +393,12 @@ export default {
 		position: relative;
 	}
 	:deep &__content {
-		box-sizing: border-box;
 		padding-inline: calc(4 * var(--default-grid-baseline));
 	}
 }
 
 .navigation-list {
 	height: 100%;
-	box-sizing: border-box;
 	overflow-y: auto;
 	padding: calc(3 * var(--default-grid-baseline));
 

diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
@@ -406,7 +406,6 @@ export default defineComponent({
 	align-content: flex-end;
 	flex-direction: column;
 	justify-content: space-between;
-	box-sizing: content-box !important;
 	width: 176px;
 	padding: 8px;
 	border-radius: 3px;

diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
@@ -221,7 +221,6 @@ export default {
 }
 
 .content {
-	box-sizing: border-box;
 	display: flex;
 	width: calc(100% - var(--body-container-margin) * 2);
 	border-radius: var(--body-container-radius);
@@ -233,7 +232,8 @@ export default {
 		position: fixed;
 	}
 
-	:deep(*) {
+	&,
+	& * {
 		box-sizing: border-box;
 	}
 }

diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue
@@ -622,8 +622,6 @@ export default defineComponent({
 	}
 
 	&__actions {
-		box-sizing: border-box;
-
 		display: flex;
 		gap: 6px;
 		align-content: center;

diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
@@ -850,6 +850,12 @@ export default {
 	height: 100%;
 	--backdrop-color: 0, 0, 0;
 	background-color: rgba(var(--backdrop-color), .5);
+
+	&,
+	& * {
+		box-sizing: border-box;
+	}
+
 	&--opaque {
 		background-color: rgba(var(--backdrop-color), .92);
 	}
@@ -876,7 +882,6 @@ export default {
 
 	&__name {
 		overflow-x: hidden;
-		box-sizing: border-box;
 		width: 100%;
 		padding: 0 calc(var(--default-clickable-area) * 3) 0 12px; // maximum actions is 3
 		transition: padding ease 100ms;
@@ -905,7 +910,6 @@ export default {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			box-sizing: border-box;
 			margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
 			padding: 0;
 		}
@@ -930,7 +934,6 @@ export default {
 			}
 			&__play,
 			&__pause {
-				box-sizing: border-box;
 				width: var(--default-clickable-area);
 				height: var(--default-clickable-area);
 				margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
@@ -943,7 +946,6 @@ export default {
 			margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
 
 			&--single {
-				box-sizing: border-box;
 				width: var(--default-clickable-area);
 				height: var(--default-clickable-area);
 				cursor: pointer;
@@ -974,14 +976,9 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 
-	:deep(*) {
-		box-sizing: border-box;
-	}
-
 	/* Navigation buttons */
 	.prev,
 	.next {

diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue
@@ -425,6 +425,11 @@ export default {
 $arrow-width: 10px;
 
 .v-popper--theme-dropdown {
+	&,
+	& * {
+		box-sizing: border-box;
+	}
+
 	&.v-popper__popper {
 		z-index: 100000;
 		top: 0;