Update styling for experimental hint

WordPress · Jan 24, 2024 · 63f5d28 · 63f5d28
1 parent 09bf28b
commit 63f5d28
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 12 deletions.
diff --git a/packages/components/src/custom-select-control-v2/custom-select-item.tsx b/packages/components/src/custom-select-control-v2/custom-select-item.tsx
@@ -26,7 +26,15 @@ export function CustomSelectItem( {
 			{ ...props }
 		>
 			{ children ?? props.value }
-			<Ariakit.SelectItemCheck />
+			<Ariakit.SelectItemCheck
+				// set initial size of check to prevent inline overrides
+				style={ {
+					fontSize: 'initial',
+					height: 'initial',
+					width: 'initial',
+					justifySelf: 'center',
+				} }
+			/>
 		</Styled.CustomSelectItem>
 	);
 }

diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -13,6 +13,7 @@ import deprecated from '@wordpress/deprecated';
 import _CustomSelect from '../custom-select';
 import type { LegacyCustomSelectProps } from '../types';
 import { CustomSelectItem } from '..';
+import { ExperimentalHint, ExperimentalHintItem } from '../styles';
 
 function _LegacyCustomSelect( props: LegacyCustomSelectProps ) {
 	const {
@@ -56,24 +57,31 @@ function _LegacyCustomSelect( props: LegacyCustomSelectProps ) {
 	} );
 
 	const children = options.map(
-		( { name, key, __experimentalHint, ...rest } ) => {
+		( { name, key, style, __experimentalHint, ...rest } ) => {
 			const withHint = (
 				<>
 					<span>{ name }</span>
-					<span className="components-custom-select-control__item-hint">
+					<ExperimentalHintItem className="components-custom-select-control__item-hint">
 						{ __experimentalHint }
-					</span>
+					</ExperimentalHintItem>
 				</>
 			);
 
+			const hintStyles = {
+				gridTemplateColumns: __experimentalShowSelectedHint
+					? '1fr auto 30px'
+					: undefined,
+			};
+
 			return (
 				<CustomSelectItem
-					{ ...rest }
 					key={ key }
 					value={ name }
 					children={
 						__experimentalShowSelectedHint ? withHint : name
 					}
+					style={ { ...hintStyles, ...style } }
+					{ ...rest }
 				/>
 			);
 		}
@@ -89,17 +97,47 @@ function _LegacyCustomSelect( props: LegacyCustomSelectProps ) {
 		);
 	}
 
+	const renderSelectedValueHint = () => {
+		const { value: currentValue } = store.getState();
+
+		const currentHint = options?.find(
+			( { name } ) => currentValue === name
+		);
+
+		return (
+			<>
+				{ currentValue }
+				<ExperimentalHint className="components-custom-select-control__hint">
+					{ currentHint?.__experimentalHint }
+				</ExperimentalHint>
+			</>
+		);
+	};
+
 	const translatedProps = {
 		'aria-describedby': props.describedBy,
 		children,
+		renderSelectedValue: __experimentalShowSelectedHint
+			? renderSelectedValueHint
+			: undefined,
 		size:
 			__next40pxDefaultSize || size === '__unstable-large'
 				? 'default'
 				: size,
 		...restProps,
 	};
 
-	return <_CustomSelect { ...translatedProps } store={ store } />;
+	return (
+		<_CustomSelect
+			{ ...translatedProps }
+			store={ store }
+			style={ {
+				gridTemplateColumns: __experimentalShowSelectedHint
+					? 'auto 1fr 30px'
+					: undefined,
+			} }
+		/>
+	);
 }
 
 export default _LegacyCustomSelect;
diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
@@ -54,26 +54,32 @@ const Template: StoryFn< typeof LegacyCustomSelect > = ( props ) => {
 export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Font Size',
+	__experimentalShowSelectedHint: true,
 	options: [
 		{
 			key: 'small',
 			name: 'Small',
 			style: { fontSize: '50%' },
+			__experimentalHint: '50%',
 		},
 		{
 			key: 'normal',
 			name: 'Normal',
 			style: { fontSize: '100%' },
+			className: 'can-apply-custom-class-to-option',
+			__experimentalHint: '100%',
 		},
 		{
 			key: 'large',
 			name: 'Large',
 			style: { fontSize: '200%' },
+			__experimentalHint: '200%',
 		},
 		{
 			key: 'huge',
 			name: 'Huge',
 			style: { fontSize: '300%' },
+			__experimentalHint: '300%',
 		},
 	],
 };

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -1,17 +1,27 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-
+import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
 import { COLORS } from '../utils';
 import { space } from '../utils/space';
 import type { CustomSelectProps } from './types';
 
+export const ExperimentalHint = styled.span`
+	color: ${ COLORS.gray[ 600 ] };
+	margin-left: ${ space( 2 ) };
+`;
+
+export const ExperimentalHintItem = styled.span`
+	color: ${ COLORS.gray[ 600 ] };
+	text-align: right;
+	padding-right: ${ space( 1 ) };
+`;
+
 export const CustomSelectLabel = styled( Ariakit.SelectLabel )`
 	font-size: 11px;
 	font-weight: 500;
@@ -40,7 +50,9 @@ export const CustomSelectButton = styled( Ariakit.Select, {
 	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
 
 	return {
-		display: 'flex',
+		textAlign: 'left',
+		display: 'grid',
+		gridTemplateColumns: 'auto auto',
 		justifyContent: 'space-between',
 		alignItems: 'center',
 		backgroundColor: COLORS.white,
@@ -49,7 +61,8 @@ export const CustomSelectButton = styled( Ariakit.Select, {
 		cursor: 'pointer',
 		width: '100%',
 		[ heightProperty ]: `${ inputHeights[ size ] }px`,
-		padding: isSmallSize ? space( 2 ) : space( 4 ),
+		// fix with sizing
+		// padding: isSmallSize ? space( 2 ) : space( 4 ),
 		fontSize: isSmallSize ? '11px' : '13px',
 		'&[data-focus-visible]': {
 			outlineStyle: 'solid',
@@ -67,9 +80,11 @@ export const CustomSelectPopover = styled( Ariakit.SelectPopover )`
 `;
 
 export const CustomSelectItem = styled( Ariakit.SelectItem )`
-	display: flex;
-	align-items: center;
+	text-align: left;
+	display: grid;
+	grid-template-columns: auto auto;
 	justify-content: space-between;
+	align-items: center;
 	padding: ${ space( 2 ) };
 	&[data-active-item] {
 		background-color: ${ COLORS.gray[ 300 ] };