CustomSelectControlV2: fix item styles (WordPress#62825)

* Fix line height * Add disabled styles * CHANGELOG * Prevent user selection for items text * Apply more tweaks * Remove extra changelog entry * Simplify line-height styles * Less opinionated item disabled styles --- Co-authored-by: ciampo <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
petitphp · Jul 1, 2024 · 12518a0 · 12518a0
1 parent 0097372
commit 12518a0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,7 @@
 ### Internal
 
 -   `CustomSelectControlV2`: prevent keyboard event propagation in legacy wrapper. ([#62907](https://github.com/WordPress/gutenberg/pull/62907))
+-   `CustomSelectControlV2`: fix item styles ([#62825](https://github.com/WordPress/gutenberg/pull/62825))
 -   `CustomSelectControlV2`: add root element wrapper. ([#62803](https://github.com/WordPress/gutenberg/pull/62803))
 -   `CustomSelectControlV2`: fix popover styles. ([#62821](https://github.com/WordPress/gutenberg/pull/62821))
 -   `CustomSelectControlV2`: fix trigger text alignment in RTL languages ([#62869](https://github.com/WordPress/gutenberg/pull/62869)).

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -93,6 +93,7 @@ export const Select = styled( Ariakit.Select, {
 		font-family: inherit;
 		font-size: ${ CONFIG.fontSize };
 		text-align: start;
+		user-select: none;
 		width: 100%;
 
 		&[data-focus-visible] {
@@ -133,7 +134,15 @@ export const SelectItem = styled( Ariakit.SelectItem )`
 	justify-content: space-between;
 	padding: ${ ITEM_PADDING };
 	font-size: ${ CONFIG.fontSize };
-	line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy
+	// TODO: reassess line-height for non-legacy v2
+	line-height: 28px;
+	scroll-margin: ${ space( 1 ) };
+	user-select: none;
+
+	&[aria-disabled='true'] {
+		cursor: not-allowed;
+	}
+
 	&[data-active-item] {
 		background-color: ${ COLORS.theme.gray[ 300 ] };
 	}