FontSizePicker: Migrate Emotion styles to SCSS Modules

packages/components/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 -   Upgrade React to v19 ([#83941](https://github.com/WordPress/gutenberg/pull/83941)).
 -   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:
+    -   `FontSizePicker` ([#84126](https://github.com/WordPress/gutenberg/pull/84126))
     -   `CustomGradientPicker` ([#82576](https://github.com/WordPress/gutenberg/pull/82576))
     -   `Text` ([#82573](https://github.com/WordPress/gutenberg/pull/82573))
     -   `Card`, `CardBody`, `CardHeader`, `CardFooter`, `CardMedia`, `CardDivider` ([#82577](https://github.com/WordPress/gutenberg/pull/82577))

packages/components/src/font-size-picker/font-size-picker-select.tsx

@@ -1,11 +1,13 @@
+import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
 import { generateFontSizeHint } from './utils';
-import { StyledCustomSelectControl } from './styles';
+import CustomSelectControl from '../custom-select-control';
+import styles from './style.module.scss';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -52,8 +54,11 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	}, [ value, valueMode, options ] );
 
 	return (
-		<StyledCustomSelectControl
-			className="components-font-size-picker__select"
+		<CustomSelectControl
+			className={ clsx(
+				'components-font-size-picker__select',
+				styles.select
+			) }
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			describedBy={ sprintf(

packages/components/src/font-size-picker/index.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
@@ -12,7 +13,9 @@ import {
 	useCustomUnits,
 } from '../unit-control';
 import type { FontSizePickerProps } from './types';
-import { Container, Header, HeaderLabel, HeaderToggle } from './styles';
+import BaseControl from '../base-control';
+import { HStack } from '../h-stack';
+import styles from './style.module.scss';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
@@ -104,19 +107,31 @@ const UnforwardedFontSizePicker = (
 	const isDisabled = value === undefined;
 
 	return (
-		<Container
+		<fieldset
 			ref={ ref }
-			className="components-font-size-picker"
-			// This Container component renders a fieldset element that needs to be labeled.
+			className={ clsx(
+				'components-font-size-picker',
+				styles.container
+			) }
+			// The fieldset needs to be labeled.
 			aria-labelledby={ labelId }
 		>
 			<Spacer>
-				<Header className="components-font-size-picker__header">
-					<HeaderLabel id={ labelId }>
+				<HStack
+					className={ clsx(
+						'components-font-size-picker__header',
+						styles.header
+					) }
+				>
+					<BaseControl.VisualLabel
+						id={ labelId }
+						className={ styles[ 'header-label' ] }
+					>
 						{ __( 'Font size' ) }
-					</HeaderLabel>
+					</BaseControl.VisualLabel>
 					{ ! disableCustomFontSizes && (
-						<HeaderToggle
+						<Button
+							className={ styles[ 'header-toggle' ] }
 							label={
 								currentPickerType === 'custom'
 									? __( 'Use size preset' )
@@ -130,7 +145,7 @@ const UnforwardedFontSizePicker = (
 							size="small"
 						/>
 					) }
-				</Header>
+				</HStack>
 			</Spacer>
 			<div>
 				{ currentPickerType === 'select' && (
@@ -254,7 +269,7 @@ const UnforwardedFontSizePicker = (
 					</Flex>
 				) }
 			</div>
-		</Container>
+		</fieldset>
 	);
 };
 

packages/components/src/font-size-picker/style.module.scss

@@ -0,0 +1,30 @@
+.container {
+	border: 0;
+	margin: 0;
+	padding: 0;
+	display: contents;
+}
+
+.header {
+	height: 16px;
+}
+
+.header-toggle {
+	margin-top: -4px;
+}
+
+.header-label {
+	display: flex;
+	gap: 4px;
+	justify-content: flex-start;
+	margin-bottom: 0;
+}
+
+// Force a line break between name and hint while keeping the checkmark on the right.
+.select {
+	:global(.components-custom-select-control__item) {
+		:global(.components-custom-select-control__item-hint) {
+			width: 100%;
+		}
+	}
+}

tools/eslint/suppressions.json

@@ -4775,11 +4775,6 @@
 			"count": 1
 		}
 	},
-	"packages/components/src/font-size-picker/styles.ts": {
-		"no-restricted-imports": {
-			"count": 1
-		}
-	},
 	"packages/components/src/form-file-upload/index.tsx": {
 		"react-hooks/refs": {
 			"count": 1