Add truncate styles to custom render with hint

WordPress · May 31, 2024 · a68fce4 · a68fce4
1 parent 65e3a00
commit a68fce4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
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
@@ -82,12 +82,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
@@ -15,12 +15,22 @@ 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 ) };
@@ -74,14 +84,6 @@ export const Select = styled( Ariakit.Select, {
 		return sizes[ size ] || sizes.default;
 	};
 
-	const truncateStyles =
-		! hasCustomRenderProp &&
-		css`
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		`;
-
 	return css`
 		display: block;
 		background-color: ${ COLORS.theme.background };
@@ -98,7 +100,7 @@ export const Select = styled( Ariakit.Select, {
 		}
 
 		${ getSize() }
-		${ truncateStyles }
+		${ ! hasCustomRenderProp && truncateStyles }
 	`;
 } );