diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 026a13a533787..a2781d773078a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fix + +- `SelectControl`: Fix styling when `multiple` prop is enabled ([#47893](https://github.com/WordPress/gutenberg/pull/43213)). + ### Enhancements - `ColorPalette`: ensure text label contrast checking works with CSS variables ([#47373](https://github.com/WordPress/gutenberg/pull/47373)). diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index 56e9a4ffffe6d..8edf2a4875e52 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -116,7 +116,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` width: 100%; max-width: none; cursor: pointer; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; @@ -126,6 +125,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` padding-bottom: 0; padding-left: 8px; padding-right: 26px; + overflow: hidden; } @media ( min-width: 600px ) { @@ -387,7 +387,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` width: 100%; max-width: none; cursor: pointer; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; @@ -397,6 +396,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` padding-bottom: 0; padding-left: 8px; padding-right: 26px; + overflow: hidden; } @media ( min-width: 600px ) { @@ -668,7 +668,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] width: 100%; max-width: none; cursor: pointer; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; @@ -678,6 +677,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] padding-bottom: 0; padding-left: 8px; padding-right: 26px; + overflow: hidden; } @media ( min-width: 600px ) { @@ -961,7 +961,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] width: 100%; max-width: none; cursor: pointer; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; @@ -971,6 +970,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] padding-bottom: 0; padding-left: 8px; padding-right: 26px; + overflow: hidden; } @media ( min-width: 600px ) { diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md index 1d96f2ba92b76..dc6e884a5e12b 100644 --- a/packages/components/src/select-control/README.md +++ b/packages/components/src/select-control/README.md @@ -187,7 +187,9 @@ If this property is added, a help text will be generated using help property as #### multiple -If this property is added, multiple values can be selected. The value passed should be an array. +If this property is added, multiple values can be selected. The `value` passed should be an array. + +In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead. - Type: `Boolean` - Required: No diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx index 2abd647388cf2..75569dac80a16 100644 --- a/packages/components/src/select-control/index.tsx +++ b/packages/components/src/select-control/index.tsx @@ -101,7 +101,9 @@ function UnforwardedSelectControl( isFocused={ isFocused } label={ label } size={ size } - suffix={ suffix || } + suffix={ + suffix || ( ! multiple && ) + } prefix={ prefix } labelPosition={ labelPosition } __next36pxDefaultSize={ __next36pxDefaultSize } diff --git a/packages/components/src/select-control/style.scss b/packages/components/src/select-control/style.scss index b59fa2160b952..1558314af554f 100644 --- a/packages/components/src/select-control/style.scss +++ b/packages/components/src/select-control/style.scss @@ -1,16 +1,6 @@ .components-select-control__input { - background: $white; - height: 36px; - line-height: 36px; - margin: 1px; outline: 0; - width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; - - @include break-medium() { - height: 28px; - line-height: 28px; - } } @media (max-width: #{ ($break-medium) }) { diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts index e0976c9f50769..2374015d747fa 100644 --- a/packages/components/src/select-control/styles/select-control-styles.ts +++ b/packages/components/src/select-control/styles/select-control-styles.ts @@ -13,7 +13,10 @@ import type { SelectControlProps } from '../types'; import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper'; interface SelectProps - extends Pick< SelectControlProps, '__next36pxDefaultSize' | 'disabled' > { + extends Pick< + SelectControlProps, + '__next36pxDefaultSize' | 'disabled' | 'multiple' + > { // Using `selectSize` instead of `size` to avoid a type conflict with the // `size` HTML attribute of the `select` element. selectSize?: SelectControlProps[ 'size' ]; @@ -50,8 +53,15 @@ const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => { const sizeStyles = ( { __next36pxDefaultSize, + multiple, selectSize = 'default', }: SelectProps ) => { + if ( multiple ) { + // When `multiple`, just use the native browser styles + // without setting explicit height. + return; + } + const sizes = { default: { height: 36, @@ -91,33 +101,37 @@ export const chevronIconSize = 18; const sizePaddings = ( { __next36pxDefaultSize, + multiple, selectSize = 'default', }: SelectProps ) => { - const iconWidth = chevronIconSize; - - const sizes = { - default: { - paddingLeft: 16, - paddingRight: 16 + iconWidth, - }, - small: { - paddingLeft: 8, - paddingRight: 8 + iconWidth, - }, - '__unstable-large': { - paddingLeft: 16, - paddingRight: 16 + iconWidth, - }, + const padding = { + default: 16, + small: 8, + '__unstable-large': 16, }; if ( ! __next36pxDefaultSize ) { - sizes.default = { - paddingLeft: 8, - paddingRight: 8 + iconWidth, - }; + padding.default = 8; } - return rtl( sizes[ selectSize ] || sizes.default ); + const selectedPadding = padding[ selectSize ] || padding.default; + + return rtl( { + paddingLeft: selectedPadding, + paddingRight: selectedPadding + chevronIconSize, + ...( multiple + ? { + paddingTop: selectedPadding, + paddingBottom: selectedPadding, + } + : {} ), + } ); +}; + +const overflowStyles = ( { multiple }: SelectProps ) => { + return { + overflow: multiple ? 'auto' : 'hidden', + }; }; // TODO: Resolve need to use &&& to increase specificity @@ -137,7 +151,6 @@ export const Select = styled.select< SelectProps >` width: 100%; max-width: none; cursor: pointer; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -145,6 +158,7 @@ export const Select = styled.select< SelectProps >` ${ fontSizeStyles }; ${ sizeStyles }; ${ sizePaddings }; + ${ overflowStyles } } `; diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts index 6126ba5043d6c..2b8d187d4031e 100644 --- a/packages/components/src/select-control/types.ts +++ b/packages/components/src/select-control/types.ts @@ -23,7 +23,9 @@ export interface SelectControlProps >, Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > { /** - * If this property is added, multiple values can be selected. The value passed should be an array. + * If this property is added, multiple values can be selected. The `value` passed should be an array. + * + * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead. * * @default false */