Merge pull request #5890 from nextcloud-libraries/backport/5883/next

[next] fix(NcSelect): Ensure component height is same as input element
nextcloud-libraries · Sep 5, 2024 · 35e8b2c · 35e8b2c
2 parents d14eb5a + 0e48529
commit 35e8b2c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 12 deletions.
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -105,6 +105,7 @@ It might be used for list rendering or within the multiselect for example
 <template>
 	<span :id="id"
 		class="option"
+		:class="{ 'option--compact': avatarSize < defaultSize }"
 		:style="cssVars">
 		<NcAvatar v-bind="$attrs"
 			:disable-menu="true"
@@ -259,9 +260,10 @@ export default {
 		},
 	},
 
-	data() {
+	setup() {
 		return {
 			margin,
+			defaultSize,
 		}
 	},
 
@@ -279,7 +281,7 @@ export default {
 		},
 
 		isSizeBigEnough() {
-			return this.avatarSize >= defaultSize
+			return this.avatarSize >= 26 // the font sizes
 		},
 
 		cssVars() {
@@ -293,7 +295,7 @@ export default {
 		},
 
 		/**
-		 * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.
+		 * Separates the search property into two parts, the first one is the search part on the name, the second on the subname.
 		 * @return {[string, string]}
 		 */
 		searchParts() {
@@ -350,12 +352,25 @@ export default {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		line-height: 1.1em;
+		line-height: 1.2;
 		strong {
 			font-weight: bold;
 		}
 	}
 
+	&--compact {
+		.option {
+			&__lineone {
+				font-size: 14px;
+			}
+			&__linetwo {
+				font-size: 11px;
+				line-height: 1.5;
+				margin-top: -4px;
+			}
+		}
+	}
+
 	&__icon {
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
@@ -536,8 +536,9 @@ export default {
 		<template #selected-option="selectedOption">
 			<NcListItemIcon v-if="userSelect"
 				v-bind="selectedOption"
-				:avatar-size="24"
+				:avatar-size="avatarSize"
 				:name="selectedOption[localLabel]"
+				no-margin
 				:search="search" />
 			<NcEllipsisedOption v-else
 				:name="String(selectedOption[localLabel])"
@@ -571,6 +572,7 @@ import {
 	offset,
 	shift,
 } from '@floating-ui/dom'
+import { h, warn } from 'vue'
 import { t } from '../../l10n.js'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
@@ -582,8 +584,6 @@ import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 import GenRandomId from '../../utils/GenRandomId.js'
 
-import { h, warn } from 'vue'
-
 export default {
 	name: 'NcSelect',
 
@@ -968,6 +968,16 @@ export default {
 		'update:modelValue',
 	],
 
+	setup() {
+		const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))
+		const gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))
+		const avatarSize = clickableArea - 2 * gridBaseLine
+
+		return {
+			avatarSize,
+		}
+	},
+
 	data() {
 		return {
 			search: '',
@@ -1183,23 +1193,34 @@ body {
 	min-width: 260px;
 	margin: 0 0 var(--default-grid-baseline);
 
+	&.vs--open {
+		--vs-border-width: var(--border-width-input-focused, 2px);
+	}
+
 	.select__label {
 		display: block;
 		margin-bottom: 2px;
 	}
 
 	.vs__selected {
-		height: calc(var(--default-clickable-area) - var(--default-grid-baseline));
+		height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));
 		margin: calc(var(--default-grid-baseline) / 2);
-		padding: 0 8px 0 12px;
-		border-radius: 18px !important;
+		padding-block: 0;
+		padding-inline: 12px 8px;
+		border-radius: 16px !important;
 		background: var(--color-primary-element-light);
 		border: none;
 	}
 
+	&.vs--open .vs__selected:first-of-type {
+		margin-inline-start: calc(var(--default-grid-baseline) / 2 - (var(--border-width-input-focused, 2px) - var(--border-width-input, 2px))) !important; // prevent jumping
+	}
+
 	.vs__search {
 		text-overflow: ellipsis;
 		color: var(--color-main-text);
+		min-height: unset !important;
+		height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width)) !important;
 
 		&::placeholder {
 			color: var(--color-text-maxcontrast);
@@ -1273,7 +1294,7 @@ body {
 
 	.vs__selected-options {
 		// If search is hidden, ensure that the height of the search is the same
-		min-height: var(--default-clickable-area);
+		min-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width));
 
 		// Hide search from dom if unused to prevent unneeded flex wrap
 		.vs__selected ~ .vs__search[readonly] {
@@ -1343,6 +1364,6 @@ body {
 
 // Selected users require slightly different padding
 .user-select .vs__selected {
-	padding: 0 5px !important;
+	padding-inline: 0 5px !important;
 }
 </style>