From 65e3a00ebe6e54ce85cb1db649686da55b1b0a8e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 1 Jun 2024 04:00:35 +0900 Subject: [PATCH 1/3] CustomSelectControlV2: Handle long strings in selected value --- .../custom-select.tsx | 2 +- .../src/custom-select-control-v2/styles.ts | 30 ++++++++++++------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx index 9ae402d37f40d9..414a805eccfb1a 100644 --- 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 } > -
{ computedRenderSelectedValue( currentValue ) }
+ { computedRenderSelectedValue( currentValue ) } ); }; diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts index 676a9c1a1ec590..f603b45da5cbd8 100644 --- a/packages/components/src/custom-select-control-v2/styles.ts +++ b/packages/components/src/custom-select-control-v2/styles.ts @@ -10,6 +10,7 @@ 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 ); @@ -55,33 +56,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; }; + const truncateStyles = + ! hasCustomRenderProp && + css` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + `; + 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] { @@ -89,6 +98,7 @@ export const Select = styled( Ariakit.Select, { } ${ getSize() } + ${ truncateStyles } `; } ); From a68fce4a030ba8ad09b3e3fdf91df4f39cca2674 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 1 Jun 2024 05:00:07 +0900 Subject: [PATCH 2/3] Add truncate styles to custom render with hint --- .../legacy-component/index.tsx | 4 ++-- .../src/custom-select-control-v2/styles.ts | 20 ++++++++++--------- 2 files changed, 13 insertions(+), 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 index 43f102e6ee0493..83ee956248b071 100644 --- 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 ( - <> + { currentValue } { currentHint?.__experimentalHint } - + ); }; diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts index f603b45da5cbd8..c75a9a79c71c5f 100644 --- 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 } `; } ); From 4747d78f1a4033c94f0c391f3ef976b64bc6903c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 1 Jun 2024 05:13:53 +0900 Subject: [PATCH 3/3] Add changelog --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4ad4dd4ec63125..cfc9f92c0a1606 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Experimental + +- `CustomSelectControlV2`: Handle long strings in selected value ([#62198](https://github.com/WordPress/gutenberg/pull/62198)). + ## 28.0.0 (2024-05-31) ### Breaking Changes