diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 47159ec62d079d..0daf321eb4e17b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- `AnglePickerControl`: Deprecate bottom margin style. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43867](https://github.com/WordPress/gutenberg/pull/43867)). + ### Bug Fix - `Popover`: enable auto-updating every animation frame ([#43617](https://github.com/WordPress/gutenberg/pull/43617)). diff --git a/packages/components/src/angle-picker-control/README.md b/packages/components/src/angle-picker-control/README.md index d929eb7de7054e..c4b63e56ed044a 100644 --- a/packages/components/src/angle-picker-control/README.md +++ b/packages/components/src/angle-picker-control/README.md @@ -11,7 +11,7 @@ import { AnglePickerControl } from '@wordpress/components'; const MyAnglePicker = () => { const [ angle, setAngle ] = useState(); - return ; + return ; }; ``` @@ -39,3 +39,11 @@ A function that receives the new value of the input. - Type: `function` - Required: Yes + +### __nextHasNoMarginBottom + +Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.) + +- Type: `boolean` +- Required: No +- Default: `false` \ No newline at end of file diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js index 1cc3085cd7af56..151ad0edeab020 100644 --- a/packages/components/src/angle-picker-control/index.js +++ b/packages/components/src/angle-picker-control/index.js @@ -6,6 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import deprecated from '@wordpress/deprecated'; import { __ } from '@wordpress/i18n'; /** @@ -27,6 +28,17 @@ export default function AnglePickerControl( { onChange, value, } ) { + if ( ! __nextHasNoMarginBottom ) { + deprecated( + 'Bottom margin styles for wp.components.AnglePickerControl', + { + since: '6.1', + version: '6.4', + hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.', + } + ); + } + const handleOnNumberChange = ( unprocessedValue ) => { const inputValue = unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0; diff --git a/packages/components/src/angle-picker-control/stories/index.js b/packages/components/src/angle-picker-control/stories/index.js index f2de7c4d77bc23..74694459abaac8 100644 --- a/packages/components/src/angle-picker-control/stories/index.js +++ b/packages/components/src/angle-picker-control/stories/index.js @@ -11,9 +11,6 @@ import AnglePickerControl from '../'; export default { title: 'Components/AnglePickerControl', component: AnglePickerControl, - argTypes: { - __nextHasNoMarginBottom: { control: { type: 'boolean' } }, - }, }; const AnglePickerWithState = ( args ) => { @@ -24,3 +21,6 @@ const AnglePickerWithState = ( args ) => { }; export const Default = AnglePickerWithState.bind( {} ); +Default.args = { + __nextHasNoMarginBottom: true, +};