CustomSelectControl V2: allow wrapping item hint to new line

packages/components/CHANGELOG.md

@@ -15,6 +15,7 @@
 -   `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)).
+-   `CustomSelectControlV2`: allow wrapping item hint to new line ([#62848](https://github.com/WordPress/gutenberg/pull/62848)).
 -   `CustomSelectControlV2`: fix select popover content overflow. ([#62844](https://github.com/WordPress/gutenberg/pull/62844))
 -   Extract `TimeInput` component from `TimePicker` ([#60613](https://github.com/WordPress/gutenberg/pull/60613)).
 

packages/components/src/custom-select-control-v2/legacy-component/index.tsx

@@ -64,12 +64,15 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	const children = options.map(
 		( { name, key, __experimentalHint, style, className } ) => {
 			const withHint = (
-				<Styled.WithHintWrapper>
+				<Styled.WithHintItemWrapper>
 					<span>{ name }</span>
-					<Styled.ExperimentalHintItem className="components-custom-select-control__item-hint">
+					<Styled.WithHintItemHint
+					// TODO: Legacy classname. Add V1 styles are removed from the codebase
+					// className="components-custom-select-control__item-hint"
+					>
 						{ __experimentalHint }
-					</Styled.ExperimentalHintItem>
-				</Styled.WithHintWrapper>
+					</Styled.WithHintItemHint>
+				</Styled.WithHintItemWrapper>
 			);
 
 			return (
@@ -78,7 +81,15 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 					value={ name }
 					children={ __experimentalHint ? withHint : name }
 					style={ style }
-					className={ className }
+					className={ clsx(
+						// TODO: Legacy classname. Add V1 styles are removed from the codebase
+						// 'components-custom-select-control__item',
+						className
+						// TODO: Legacy classname. Add V1 styles are removed from the codebase
+						// {
+						// 	'has-hint': __experimentalHint,
+						// }
+					) }
 				/>
 			);
 		}
@@ -94,7 +105,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		return (
 			<Styled.SelectedExperimentalHintWrapper>
 				{ currentValue }
-				<Styled.SelectedExperimentalHintItem className="components-custom-select-control__hint">
+				<Styled.SelectedExperimentalHintItem
+				// TODO: Legacy classname. Add V1 styles are removed from the codebase
+				// className="components-custom-select-control__hint"
+				>
 					{ currentHint?.__experimentalHint }
 				</Styled.SelectedExperimentalHintItem>
 			</Styled.SelectedExperimentalHintWrapper>
@@ -125,7 +139,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 			size={ translatedSize }
 			store={ store }
 			className={ clsx(
-				'components-custom-select-control',
+				// TODO: Legacy classname. Add V1 styles are removed from the codebase
+				// 'components-custom-select-control',
 				classNameProp
 			) }
 			isLegacy

packages/components/src/custom-select-control-v2/styles.ts

@@ -15,37 +15,10 @@ import type { CustomSelectButtonSize } from './types';
 
 const ITEM_PADDING = space( 2 );
 
-const truncateStyles = css`
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-`;
-
-export const WithHintWrapper = styled.div`
-	display: flex;
-	justify-content: space-between;
-	flex: 1;
-`;
-
-export const SelectedExperimentalHintWrapper = styled.div`
-	${ truncateStyles }
-`;
-
-export const SelectedExperimentalHintItem = styled.span`
-	color: ${ COLORS.theme.gray[ 600 ] };
-	margin-inline-start: ${ space( 2 ) };
-`;
-
-export const ExperimentalHintItem = styled.span`
-	color: ${ COLORS.theme.gray[ 600 ] };
-	text-align: right;
-	margin-inline-end: ${ space( 1 ) };
-`;
-
 export const SelectLabel = styled( Ariakit.SelectLabel )`
 	font-size: 11px;
 	font-weight: 500;
-	line-height: 1.4;
+	line-height: ${ CONFIG.fontLineHeightBase };
 	text-transform: uppercase;
 	margin-bottom: ${ space( 2 ) };
 `;
@@ -129,6 +102,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 `;
 
 export const SelectItem = styled( Ariakit.SelectItem )`
+	cursor: default;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -154,3 +128,35 @@ export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
 	margin-inline-start: ${ ITEM_PADDING };
 	font-size: 24px; // Size of checkmark icon
 `;
+
+const truncateStyles = css`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
+
+export const SelectedExperimentalHintWrapper = styled.div`
+	${ truncateStyles }
+`;
+
+export const SelectedExperimentalHintItem = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	margin-inline-start: ${ space( 2 ) };
+`;
+
+export const WithHintItemWrapper = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	flex: 1;
+	column-gap: ${ space( 4 ) };
+`;
+
+export const WithHintItemHint = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	text-align: initial;
+	line-height: ${ CONFIG.fontLineHeightBase };
+	padding-inline-end: ${ space( 1 ) };
+	margin-block: ${ space( 1 ) };
+`;