diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ff4a8b714c9a52..6ecc9f0e83698b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,7 @@ - `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)). - `TextControl`: Deprecate 36px default size ([#66745](https://github.com/WordPress/gutenberg/pull/66745). - `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)). +- `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)). - `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)). - `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)). diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index 2cc39379ebde0c..ffdfaeb84ee51d 100644 --- a/packages/components/src/dimension-control/index.tsx +++ b/packages/components/src/dimension-control/index.tsx @@ -113,6 +113,7 @@ export function DimensionControl( props: DimensionControlProps ) { { return ( ( variant = 'default', __next40pxDefaultSize = false, __nextHasNoMarginBottom = false, + __shouldNotWarnDeprecated36pxSize, ...restProps } = useDeprecated36pxDefaultSizeProp( props ); const id = useUniqueId( idProp ); @@ -94,6 +96,13 @@ function UnforwardedSelectControl< V extends string >( const classes = clsx( 'components-select-control', className ); + maybeWarnDeprecated36pxSize( { + componentName: 'SelectControl', + __next40pxDefaultSize, + size, + __shouldNotWarnDeprecated36pxSize, + } ); + return ( ( * * return ( * = ( props ) => { export const Default = SelectControlWithState.bind( {} ); Default.args = { + __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: 'Label', options: [ @@ -87,6 +88,7 @@ WithLabelAndHelpText.args = { */ export const WithCustomChildren = SelectControlWithState.bind( {} ); WithCustomChildren.args = { + __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: 'Label', children: ( diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx index 47b684cd20e280..37935d60384b15 100644 --- a/packages/components/src/select-control/test/select-control.tsx +++ b/packages/components/src/select-control/test/select-control.tsx @@ -12,7 +12,13 @@ import _SelectControl from '..'; const SelectControl = ( props: React.ComponentProps< typeof _SelectControl > ) => { - return <_SelectControl { ...props } __nextHasNoMarginBottom />; + return ( + <_SelectControl + { ...props } + __nextHasNoMarginBottom + __next40pxDefaultSize + /> + ); }; describe( 'SelectControl', () => { diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts index 4e7211ab9abfb2..3d9f06385c7532 100644 --- a/packages/components/src/select-control/types.ts +++ b/packages/components/src/select-control/types.ts @@ -13,6 +13,7 @@ type SelectControlBaseProps< V extends string > = Pick< InputBaseProps, | '__next36pxDefaultSize' | '__next40pxDefaultSize' + | '__shouldNotWarnDeprecated36pxSize' | 'disabled' | 'hideLabelFromVision' | 'label' diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx index bd92807bff4cc9..075ae1268e3c72 100644 --- a/packages/components/src/tree-select/index.tsx +++ b/packages/components/src/tree-select/index.tsx @@ -102,6 +102,7 @@ export function TreeSelect( props: TreeSelectProps ) { return (