From 0398dc8b46fec8fc30ae67e6f020913f2f6c1905 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:28:53 +0200 Subject: [PATCH 1/8] Minor docs tweaks. --- packages/components/src/box-control/README.md | 19 ++++++++----------- packages/components/src/box-control/index.tsx | 6 +++--- packages/components/src/box-control/types.ts | 6 +++--- 3 files changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md index b03b03a85466a..aaf761dd75a90 100644 --- a/packages/components/src/box-control/README.md +++ b/packages/components/src/box-control/README.md @@ -1,10 +1,6 @@ # BoxControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- -BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like `padding` or `margin`. +A control that lets users set values for top, right, bottom, and left. Can be used as an input control for values like `padding` or `margin`. ## Usage @@ -12,7 +8,7 @@ BoxControl components let users set values for Top, Right, Bottom, and Left. Thi import { useState } from 'react'; import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; -const Example = () => { +function Example() { const [ values, setValues ] = useState( { top: '50px', left: '10%', @@ -26,23 +22,24 @@ const Example = () => { onChange={ ( nextValues ) => setValues( nextValues ) } /> ); -}; +} ``` ## Props + ### `allowReset`: `boolean` If this property is true, a button to reset the box control is rendered. -- Required: No -- Default: `true` +- Required: No +- Default: `true` ### `splitOnAxis`: `boolean` If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides. -- Required: No -- Default: `false` +- Required: No +- Default: `false` ### `inputProps`: `object` diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 9c3452d4ccb80..4ff309a3c238d 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -47,14 +47,14 @@ function useUniqueId( idProp?: string ) { } /** - * BoxControl components let users set values for Top, Right, Bottom, and Left. - * This can be used as an input control for values like `padding` or `margin`. + * A control that lets users set values for top, right, bottom, and left. Can be + * used as an input control for values like `padding` or `margin`. * * ```jsx * import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; * import { useState } from '@wordpress/element'; * - * const Example = () => { + * function Example() { * const [ values, setValues ] = useState( { * top: '50px', * left: '10%', diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts index eeb72df14bb9c..5f4071aeed88a 100644 --- a/packages/components/src/box-control/types.ts +++ b/packages/components/src/box-control/types.ts @@ -37,13 +37,13 @@ export type BoxControlProps = Pick< /** * Props for the internal `UnitControl` components. * - * @default `{ min: 0 }` + * @default { min: 0 } */ inputProps?: UnitControlPassthroughProps; /** * Heading label for the control. * - * @default `__( 'Box Control' )` + * @default __( 'Box Control' ) */ label?: string; /** @@ -53,7 +53,7 @@ export type BoxControlProps = Pick< /** * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset. * - * @default `{ top: undefined, right: undefined, bottom: undefined, left: undefined }` + * @default { top: undefined, right: undefined, bottom: undefined, left: undefined } */ resetValues?: BoxControlValue; /** From 2cf71700dbabdf47eac9c96b8fa2cd799aa9b656 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:32:15 +0200 Subject: [PATCH 2/8] Export without experimental prefix --- packages/components/src/box-control/README.md | 2 +- packages/components/src/box-control/index.tsx | 2 +- packages/components/src/index.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md index aaf761dd75a90..77176b49eeb6d 100644 --- a/packages/components/src/box-control/README.md +++ b/packages/components/src/box-control/README.md @@ -6,7 +6,7 @@ A control that lets users set values for top, right, bottom, and left. Can be us ```jsx import { useState } from 'react'; -import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; +import { BoxControl } from '@wordpress/components'; function Example() { const [ values, setValues ] = useState( { diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 4ff309a3c238d..41e95aa88bea3 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -51,7 +51,7 @@ function useUniqueId( idProp?: string ) { * used as an input control for values like `padding` or `margin`. * * ```jsx - * import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; + * import { BoxControl } from '@wordpress/components'; * import { useState } from '@wordpress/element'; * * function Example() { diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 32195ebc444ce..52ed3288309fe 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -40,6 +40,7 @@ export { } from './border-box-control'; export { BorderControl as __experimentalBorderControl } from './border-control'; export { + default as BoxControl, default as __experimentalBoxControl, applyValueToSides as __experimentalApplyValueToSides, } from './box-control'; From 83678d833bc1196538efc54345e384265f21dcb1 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:34:25 +0200 Subject: [PATCH 3/8] Replace references across gutenberg --- .../src/components/global-styles/dimensions-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index ce508a5ebc89e..4c52de6a3d7d1 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, - __experimentalBoxControl as BoxControl, + BoxControl, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, From d97bf4e44479111484786779b46eaf6e02673ed9 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:34:39 +0200 Subject: [PATCH 4/8] Replace import example in a README --- packages/components/src/tools-panel/tools-panel/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md index df41b623eefb6..feec34319c689 100644 --- a/packages/components/src/tools-panel/tools-panel/README.md +++ b/packages/components/src/tools-panel/tools-panel/README.md @@ -60,7 +60,7 @@ import styled from '@emotion/styled'; * WordPress dependencies */ import { - __experimentalBoxControl as BoxControl, + BoxControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalUnitControl as UnitControl, From e6e66238ac0d1c7547b677ef2e704a9b26535a3c Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:34:51 +0200 Subject: [PATCH 5/8] Auto-format README with prettier --- .../src/tools-panel/tools-panel/README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md index feec34319c689..1daa7537335e1 100644 --- a/packages/components/src/tools-panel/tools-panel/README.md +++ b/packages/components/src/tools-panel/tools-panel/README.md @@ -91,8 +91,8 @@ export function DimensionPanel() { return ( - Select dimensions or spacing related settings from the - menu for additional controls. + Select dimensions or spacing related settings from the menu for + additional controls. !! height } @@ -154,8 +154,8 @@ export function DimensionPanel() { Flags that the items in this ToolsPanel will be contained within an inner wrapper element allowing the panel to lay them out accordingly. -- Required: No -- Default: `false` +- Required: No +- Default: `false` ### `dropdownMenuProps`: `{}` @@ -176,7 +176,7 @@ The heading level of the panel's header. Text to be displayed within the panel's header and as the `aria-label` for the panel's dropdown menu. -- Required: Yes +- Required: Yes ### `panelId`: `string | null` @@ -185,13 +185,13 @@ to restrict panel items. When a `panelId` is set, items can only register themselves if the `panelId` is explicitly `null` or the item's `panelId` matches exactly. -- Required: No +- Required: No ### `resetAll`: `( filters?: ResetAllFilter[] ) => void` A function to call when the `Reset all` menu option is selected. As an argument, it receives an array containing the `resetAllFilter` callbacks of all the valid registered `ToolsPanelItems`. -- Required: Yes +- Required: Yes ### `shouldRenderPlaceholderItems`: `boolean` @@ -201,5 +201,5 @@ placeholder content (instead of `null`) when they are toggled off and hidden. Note that placeholder items won't apply the `className` that would be normally applied to a visible `ToolsPanelItem` via the `className` prop. -- Required: No -- Default: `false` +- Required: No +- Default: `false` From db5e871ad65021e0d7a4c900faeee5df8bf158b5 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:41:53 +0200 Subject: [PATCH 6/8] Move Storybook stories and add redirect --- packages/components/src/box-control/stories/index.story.tsx | 2 +- storybook/manager-head.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index 1b6604048f6d5..783f9d047b1bb 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -14,7 +14,7 @@ import { useState } from '@wordpress/element'; import BoxControl from '../'; const meta: Meta< typeof BoxControl > = { - title: 'Components (Experimental)/BoxControl', + title: 'Components/BoxControl', component: BoxControl, argTypes: { values: { control: { type: null } }, diff --git a/storybook/manager-head.html b/storybook/manager-head.html index ebf2d6891ba0b..7293248ae3e47 100644 --- a/storybook/manager-head.html +++ b/storybook/manager-head.html @@ -2,6 +2,7 @@ ( function redirectIfStoryMoved() { const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'alignmentmatrixcontrol', + 'boxcontrol', 'customselectcontrol-v2', 'dimensioncontrol', 'navigation', From c34cc3c00f187df26f736b8e42cfd9425a8114bc Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:42:12 +0200 Subject: [PATCH 7/8] Add deprecated hint to experimental export --- packages/components/src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 52ed3288309fe..a59d258012807 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -40,8 +40,9 @@ export { } from './border-box-control'; export { BorderControl as __experimentalBorderControl } from './border-control'; export { - default as BoxControl, + /** @deprecated Import `BoxControl` instead. */ default as __experimentalBoxControl, + default as BoxControl, applyValueToSides as __experimentalApplyValueToSides, } from './box-control'; export { default as Button } from './button'; From 7cbd2e91a72b840d12b5abc718f1efb603dc1eed Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 18 Sep 2024 22:48:04 +0200 Subject: [PATCH 8/8] Add changelog entries --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4dd18914a7acb..c4b2b6917862c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,7 @@ ### Deprecations - Deprecate `__unstableComposite`, `__unstableCompositeGroup`, `__unstableCompositeItem` and `__unstableUseCompositeState`. Consumers of the package should use the stable `Composite` component instead ([#63572](https://github.com/WordPress/gutenberg/pull/63572)). +- `__experimentalBoxControl` can now be imported as a stable `BoxControl` ([#65469](https://github.com/WordPress/gutenberg/pull/65469)). ### New Features @@ -32,6 +33,7 @@ - `Tooltip`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)). - `Modal`: add exit animation for internally triggered events ([#65203](https://github.com/WordPress/gutenberg/pull/65203)). - `Card`: Adopt radius scale ([#65053](https://github.com/WordPress/gutenberg/pull/65053)). +- `BoxControl`: promote to stable ([#65469](https://github.com/WordPress/gutenberg/pull/65469)). ### Bug Fixes