diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c9f63514c8a60..4676047d58454 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Deprecations + +- `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)). + ## 29.0.0 (2024-12-11) ### Breaking Changes diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index 2cc39379ebde0..ffdfaeb84ee51 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 ) { { /> {} } options={ [ diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts index 13f078cd89cc1..99c5b1aea92c3 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -40,6 +40,13 @@ interface BaseProps { * @default false */ __next40pxDefaultSize?: boolean; + /** + * Do not throw a warning for the deprecated 36px default size. + * For internal components of other components that already throw the warning. + * + * @ignore + */ + __shouldNotWarnDeprecated36pxSize?: boolean; __unstableInputWidth?: CSSProperties[ 'width' ]; /** * If true, the label will only be visible to screen readers. diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md index c240243408fab..d8742fce74f54 100644 --- a/packages/components/src/select-control/README.md +++ b/packages/components/src/select-control/README.md @@ -92,6 +92,7 @@ const MySelectControl = () => { { label: 'Small', value: '25%' }, ] } onChange={ ( newSize ) => setSize( newSize ) } + __next40pxDefaultSize __nextHasNoMarginBottom /> ); @@ -114,6 +115,7 @@ Render a user interface to select multiple users from a list. { value: 'b', label: 'User B' }, { value: 'c', label: 'User c' }, ] } + __next40pxDefaultSize __nextHasNoMarginBottom /> ``` @@ -129,6 +131,7 @@ const [ item, setItem ] = useState( '' ); label={ __( 'My dinosaur' ) } value={ item } // e.g: value = 'a' onChange={ ( selection ) => { setItem( selection ) } } + __next40pxDefaultSize __nextHasNoMarginBottom > diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx index 3686661b8a58d..e93e9385a9c23 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 ); @@ -65,6 +66,7 @@ function UnforwardedSelectControl< V extends string >( 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 47b684cd20e28..37935d60384b1 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 4e7211ab9abfb..3d9f06385c753 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 bd92807bff4cc..075ae1268e3c7 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 (