diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 93b191bff269d..8822616186a9d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)). +- `SelectControl`: Deprecate 36px default size ([#66732](https://github.com/WordPress/gutenberg/pull/66732)). ### Enhancements diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md index c240243408fab..7430ccbf810e9 100644 --- a/packages/components/src/select-control/README.md +++ b/packages/components/src/select-control/README.md @@ -84,6 +84,7 @@ const MySelectControl = () => { return ( ``` @@ -130,6 +132,7 @@ const [ item, setItem ] = useState( '' ); value={ item } // e.g: value = 'a' onChange={ ( selection ) => { setItem( selection ) } } __nextHasNoMarginBottom + __next40pxDefaultSize > diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx index 3686661b8a58d..dfc87fc1d3435 100644 --- a/packages/components/src/select-control/index.tsx +++ b/packages/components/src/select-control/index.tsx @@ -18,6 +18,7 @@ import type { WordPressComponentProps } from '../context'; import type { SelectControlProps } from './types'; import SelectControlChevronDown from './chevron-down'; import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'; +import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; function useUniqueId( idProp?: string ) { const instanceId = useInstanceId( SelectControl ); @@ -70,6 +71,12 @@ function UnforwardedSelectControl< V extends string >( const id = useUniqueId( idProp ); const helpId = help ? `${ id }__help` : undefined; + maybeWarnDeprecated36pxSize( { + componentName: 'SelectControl', + size, + __next40pxDefaultSize, + } ); + // Disable reason: A select with an onchange throws a warning. if ( ! options?.length && ! children ) { return null; diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx index 5e57a4eaecd5a..4e813521d8a7b 100644 --- a/packages/components/src/select-control/stories/index.story.tsx +++ b/packages/components/src/select-control/stories/index.story.tsx @@ -64,6 +64,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => { export const Default = SelectControlWithState.bind( {} ); Default.args = { + __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: 'Label', options: [