CustomSelectControlV2: Handle long strings in selected value (#62198)

* CustomSelectControlV2: Handle long strings in selected value * Add truncate styles to custom render with hint * Add changelog Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: fullofcaffeine <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Jun 25, 2024 · 7bca2fa · 7bca2fa
1 parent 39777ea
commit 7bca2fa
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
 -   `CustomSelectControl`: align unit tests for v1 and legacy v2 versions. ([#62706](https://github.com/WordPress/gutenberg/pull/62706))
 -   `CustomSelectControlV2`: fix handling of extra option attributes in the `onChange` callbacks and when forwarding them to the option DOM elements. ([#62255](https://github.com/WordPress/gutenberg/pull/62255))
 -   `CustomSelectControlV2`: fix setting initial value and reacting to external controlled updates. ([#62733](https://github.com/WordPress/gutenberg/pull/62733))
+-   `CustomSelectControlV2`: Handle long strings in selected value ([#62198](https://github.com/WordPress/gutenberg/pull/62198)).
 
 ## 28.1.0 (2024-06-15)
 

diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -74,7 +74,7 @@ const CustomSelectButton = ( {
 			// move selection rather than open the popover
 			showOnKeyDown={ false }
 		>
-			<div>{ computedRenderSelectedValue( currentValue ) }</div>
+			{ computedRenderSelectedValue( currentValue ) }
 		</Styled.Select>
 	);
 };

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
@@ -90,12 +90,12 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		);
 
 		return (
-			<>
+			<Styled.SelectedExperimentalHintWrapper>
 				{ currentValue }
 				<Styled.SelectedExperimentalHintItem className="components-custom-select-control__hint">
 					{ currentHint?.__experimentalHint }
 				</Styled.SelectedExperimentalHintItem>
-			</>
+			</Styled.SelectedExperimentalHintWrapper>
 		);
 	};
 

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -10,16 +10,27 @@ import styled from '@emotion/styled';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
+import { chevronIconSize } from '../select-control/styles/select-control-styles';
 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 ) };
@@ -55,40 +66,41 @@ export const Select = styled( Ariakit.Select, {
 		const sizes = {
 			compact: {
 				[ heightProperty ]: 32,
-				paddingInlineStart: space( 2 ),
-				paddingInlineEnd: space( 1 ),
+				paddingInlineStart: 8,
+				paddingInlineEnd: 8 + chevronIconSize,
 			},
 			default: {
 				[ heightProperty ]: 40,
-				paddingInlineStart: space( 4 ),
-				paddingInlineEnd: space( 3 ),
+				paddingInlineStart: 16,
+				paddingInlineEnd: 16 + chevronIconSize,
 			},
 			small: {
 				[ heightProperty ]: 24,
-				paddingInlineStart: space( 2 ),
-				paddingInlineEnd: space( 1 ),
-				fontSize: 11,
+				paddingInlineStart: 8,
+				paddingInlineEnd: 8 + chevronIconSize,
 			},
 		};
 
 		return sizes[ size ] || sizes.default;
 	};
 
 	return css`
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
+		display: block;
 		background-color: ${ COLORS.theme.background };
 		border: none;
+		color: ${ COLORS.theme.foreground };
 		cursor: pointer;
+		font-family: inherit;
 		font-size: ${ CONFIG.fontSize };
+		text-align: left;
 		width: 100%;
 
 		&[data-focus-visible] {
 			outline: none; // handled by InputBase component
 		}
 
 		${ getSize() }
+		${ ! hasCustomRenderProp && truncateStyles }
 	`;
 } );