SelectControl: Migrate Emotion styles to SCSS Modules

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Breaking Changes
 
 -   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
+    -   `SelectControl` ([#84732](https://github.com/WordPress/gutenberg/pull/84732))
     -   `DatePicker` ([#84724](https://github.com/WordPress/gutenberg/pull/84724))
     -   `FocalPointPicker` ([#84736](https://github.com/WordPress/gutenberg/pull/84736))
     -   `Menu` ([#84706](https://github.com/WordPress/gutenberg/pull/84706))
@@ -35,6 +36,7 @@
 
 -   `StyleProvider`: Register module styles before children measure layout in iframe documents ([#84736](https://github.com/WordPress/gutenberg/pull/84736)).
 -   `BorderBoxControl`: Unpack multi-value CSS box shorthand strings (such as `"0 0 0 2px"`) into individual side widths when splitting borders ([#84826](https://github.com/WordPress/gutenberg/pull/84826)).
+-   `SelectControl`: Preserve the minimal variant's inline layout in iframe documents ([#84732](https://github.com/WordPress/gutenberg/pull/84732)).
 -   `DatePicker`: Keep month navigation in a grid in iframe documents ([#84724](https://github.com/WordPress/gutenberg/pull/84724)).
 -   `PaletteEdit`: Name picker dialogs and add screen-reader-only dismissal controls while preserving live edits ([#84333](https://github.com/WordPress/gutenberg/pull/84333)).
 -   `Grid`: Fix the `bottomLeft` alignment, which resolved to the top right corner instead of the bottom left one ([#82641](https://github.com/WordPress/gutenberg/pull/82641)).

packages/components/src/select-control/chevron-down.tsx

@@ -1,17 +1,20 @@
+import clsx from 'clsx';
+import { isRTL } from '@wordpress/i18n';
 import { chevronDown, Icon } from '@wordpress/icons';
-import {
-	chevronIconSize,
-	DownArrowWrapper,
-	InputControlSuffixWrapperWithClickThrough,
-} from './styles/select-control-styles';
+import InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';
+import styles from './style.module.scss';
 
 const SelectControlChevronDown = () => {
 	return (
-		<InputControlSuffixWrapperWithClickThrough>
-			<DownArrowWrapper>
-				<Icon icon={ chevronDown } size={ chevronIconSize } />
-			</DownArrowWrapper>
-		</InputControlSuffixWrapperWithClickThrough>
+		<InputControlSuffixWrapper
+			className={ clsx( styles.suffix, {
+				[ styles[ 'is-rtl' ] ]: isRTL(),
+			} ) }
+		>
+			<div className={ styles[ 'down-arrow' ] }>
+				<Icon icon={ chevronDown } size={ 18 } />
+			</div>
+		</InputControlSuffixWrapper>
 	);
 };
 

packages/components/src/select-control/index.tsx

@@ -1,8 +1,11 @@
 import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 import BaseControl from '../base-control';
-import { Select, StyledInputBase } from './styles/select-control-styles';
+import InputBase from '../input-control/input-base';
+import { PolymorphicElement } from '../utils/polymorphic-element';
+import styles from './style.module.scss';
 import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
@@ -85,7 +88,7 @@ function UnforwardedSelectControl< V extends string >(
 
 	return (
 		<BaseControl help={ help } id={ id } className={ classes }>
-			<StyledInputBase
+			<InputBase
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
@@ -100,24 +103,36 @@ function UnforwardedSelectControl< V extends string >(
 				__unstableInputWidth={
 					variant === 'minimal' ? 'auto' : undefined
 				}
-				variant={ variant }
+				className={ clsx( styles.root, {
+					[ styles[ 'is-disabled' ] ]: disabled,
+					[ styles[ 'is-minimal' ] ]: variant === 'minimal',
+				} ) }
 			>
-				<Select
+				<PolymorphicElement
+					as="select"
 					{ ...restProps }
 					aria-describedby={ helpId }
-					className="components-select-control__input"
+					className={ clsx(
+						'components-select-control__input',
+						styles.input,
+						{
+							[ styles[ 'is-small' ] ]: size === 'small',
+							[ styles[ 'is-compact' ] ]: size === 'compact',
+							[ styles[ 'is-multiple' ] ]: multiple,
+							[ styles[ 'is-minimal' ] ]: variant === 'minimal',
+							[ styles[ 'is-rtl' ] ]: isRTL(),
+						}
+					) }
 					disabled={ disabled }
 					id={ id }
 					multiple={ multiple }
 					onChange={ handleOnChange }
 					ref={ ref }
-					selectSize={ size }
 					value={ valueProp }
-					variant={ variant }
 				>
 					{ children || <SelectOptions options={ options } /> }
-				</Select>
-			</StyledInputBase>
+				</PolymorphicElement>
+			</InputBase>
 		</BaseControl>
 	);
 }

packages/components/src/select-control/style.module.scss

@@ -0,0 +1,100 @@
+@use "../utils/theme-variables" as *;
+
+.root {
+	color: $components-color-foreground;
+	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Preserve the existing pointer cursor during the migration. */
+	cursor: pointer;
+
+	&:where(.is-disabled) {
+		color: var(--wpds-color-foreground-interactive-neutral-disabled);
+		cursor: default;
+	}
+}
+
+.root.root:where(.is-minimal) {
+	// Keep the minimal layout over Flex in either stylesheet order.
+	display: inline-flex;
+}
+
+.input.input.input {
+	// Match the existing specificity over wp-admin's form styles.
+	--_wp-components-select-control-padding: 12px;
+	appearance: none;
+	background: transparent;
+	box-sizing: border-box;
+	border: none;
+	box-shadow: none !important;
+	color: currentColor;
+	cursor: inherit;
+	display: block;
+	font-family: inherit;
+	font-size: 16px;
+	line-height: 1.3;
+	margin: 0;
+	width: 100%;
+	max-width: none;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+
+	@media (min-width: 600px) {
+		font-size: 13px;
+	}
+
+	&:where(.is-small, .is-compact) {
+		--_wp-components-select-control-padding: 8px;
+	}
+
+	&:where(:not(.is-multiple)) {
+		height: 40px;
+		min-height: 40px;
+		padding-block: 0;
+
+		&:where(.is-small) {
+			height: 24px;
+			min-height: 24px;
+		}
+
+		&:where(.is-compact) {
+			height: 32px;
+			min-height: 32px;
+		}
+	}
+
+	&:where(.is-multiple) {
+		// Preserve native height for multiple selection.
+		overflow: auto;
+		padding-block: var(--_wp-components-select-control-padding);
+	}
+
+	/* stylelint-disable logical-css/require-logical-properties -- The native select can override its direction independently of the sibling chevron; reserve space on the same physical side. */
+	padding-left: var(--_wp-components-select-control-padding);
+	padding-right: calc(var(--_wp-components-select-control-padding) + 18px);
+	&:where(.is-rtl) {
+		padding-left: calc(var(--_wp-components-select-control-padding) + 18px);
+		padding-right: var(--_wp-components-select-control-padding);
+	}
+
+	&:where(.is-minimal) {
+		field-sizing: content;
+	}
+}
+/* stylelint-enable logical-css/require-logical-properties */
+
+.down-arrow {
+	margin-inline-end: -4px;
+	line-height: 0;
+}
+
+.suffix {
+	position: absolute;
+	pointer-events: none;
+
+	/* stylelint-disable logical-css/require-logical-properties -- Match the locale-based chevron position. */
+	right: 0;
+	&:where(.is-rtl) {
+		right: auto;
+		left: 0;
+	}
+}
+/* stylelint-enable logical-css/require-logical-properties */

tools/eslint/suppressions.json

@@ -4588,11 +4588,6 @@
 			"count": 4
 		}
 	},
-	"packages/components/src/select-control/styles/select-control-styles.ts": {
-		"no-restricted-imports": {
-			"count": 2
-		}
-	},
 	"packages/components/src/slot-fill/slot.tsx": {
 		"react-hooks/refs": {
 			"count": 1