From 5b256cec8f7ac9cbd07f8a90475e36bd4efff3d4 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Thu, 19 Sep 2024 04:28:14 +0200 Subject: [PATCH 01/17] Export without experimental prefix --- .../border-control/border-control/README.md | 51 ++++++++++--------- .../border-control/component.tsx | 2 +- packages/components/src/index.ts | 6 ++- 3 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 74a212d00026bd..08fcfcb0df0a29 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -1,4 +1,4 @@ -# BorderControl +# BorderControl
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. @@ -21,7 +21,7 @@ a "shape" abstraction. ```jsx import { useState } from 'react'; -import { __experimentalBorderControl as BorderControl } from '@wordpress/components'; +import { BorderControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; const colors = [ @@ -58,41 +58,41 @@ colors are organized by multiple origins. Each color may be an object containing a `name` and `color` value. -- Required: No -- Default: `[]` +- Required: No +- Default: `[]` ### `disableCustomColors`: `boolean` This toggles the ability to choose custom colors. -- Required: No +- Required: No ### `disableUnits`: `boolean` This controls whether unit selection should be disabled. -- Required: No +- Required: No ### `enableAlpha`: `boolean` This controls whether the alpha channel will be offered when selecting custom colors. -- Required: No -- Default: `false` +- Required: No +- Default: `false` ### `enableStyle`: `boolean` This controls whether to support border style selection. -- Required: No -- Default: `true` +- Required: No +- Default: `true` ### `hideLabelFromVision`: `boolean` Provides control over whether the label will only be visible to screen readers. -- Required: No +- Required: No ### `isCompact`: `boolean` @@ -100,7 +100,7 @@ This flags the `BorderControl` to render with a more compact appearance. It restricts the width of the control and prevents it from expanding to take up additional space. -- Required: No +- Required: No ### `label`: `string` @@ -109,7 +109,7 @@ If provided, a label will be generated using this as the content. _Whether it is visible only to screen readers is controlled via `hideLabelFromVision`._ -- Required: No +- Required: No ### `onChange`: `( value?: Object ) => void` @@ -118,7 +118,7 @@ that selects or clears, border color, style, or width. _Note: the value may be `undefined` if a user clears all border properties._ -- Required: Yes +- Required: Yes ### `shouldSanitizeBorder`: `boolean` @@ -126,23 +126,23 @@ If opted into, sanitizing the border means that if no width or color have been selected, the border style is also cleared and `undefined` is returned as the new border value. -- Required: No -- Default: true +- Required: No +- Default: true ### `showDropdownHeader`: `boolean` Whether or not to render a header for the border color and style picker dropdown. The header includes a label for the color picker and a close button. -- Required: No +- Required: No ### `size`: `string` Size of the control. -- Required: No -- Default: `default` -- Allowed values: `default`, `__unstable-large` +- Required: No +- Default: `default` +- Allowed values: `default`, `__unstable-large` ### `value`: `Object` @@ -150,6 +150,7 @@ An object representing a border or `undefined`. Used to set the current border configuration for this component. Example: + ```js { color: '#72aee6', @@ -158,25 +159,25 @@ Example: } ``` -- Required: No +- Required: No ### `width`: `CSSProperties[ 'width' ]` Controls the visual width of the `BorderControl`. It has no effect if the `isCompact` prop is set to `true`. -- Required: No +- Required: No ### `withSlider`: `boolean` Flags whether this `BorderControl` should also render a `RangeControl` for additional control over a border's width. -- Required: No +- Required: No ### `__next40pxDefaultSize`: `boolean` Start opting into the larger default height that will become the default size in a future version. -- Required: No -- Default: `false` +- Required: No +- Default: `false` diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index e2c96eaa9ffc0d..4a68b135614a2d 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -141,7 +141,7 @@ const UnconnectedBorderControl = ( * a "shape" abstraction. * * ```jsx - * import { __experimentalBorderControl as BorderControl } from '@wordpress/components'; + * import { BorderControl } from '@wordpress/components'; * import { __ } from '@wordpress/i18n'; * * const colors = [ diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 32195ebc444ce6..429db1fbd23f2f 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -38,7 +38,11 @@ export { isDefinedBorder as __experimentalIsDefinedBorder, isEmptyBorder as __experimentalIsEmptyBorder, } from './border-box-control'; -export { BorderControl as __experimentalBorderControl } from './border-control'; +export { + /** @deprecated Import `BorderControl` instead. */ + BorderControl as __experimentalBorderControl, + BorderControl, +} from './border-control'; export { default as __experimentalBoxControl, applyValueToSides as __experimentalApplyValueToSides, From 4332ff03d6805c9af31b5d4575bf68a97d335db1 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Thu, 19 Sep 2024 04:50:20 +0200 Subject: [PATCH 02/17] Update README --- .../components/src/border-control/border-control/README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 08fcfcb0df0a29..1e76df38b33f02 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -1,10 +1,6 @@ # BorderControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
-
-This component provides control over a border's color, style, and width. +An input control for a border's color, style, and width. ## Development guidelines From bf96c1c50bd009a734eddd6c24f629b9a3820ed1 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Thu, 19 Sep 2024 04:50:41 +0200 Subject: [PATCH 03/17] Move Storybook stories and add redirect --- packages/components/src/border-control/stories/index.story.tsx | 2 +- storybook/manager-head.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 9a5349d302c276..19938db5d0e51e 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -16,7 +16,7 @@ import { BorderControl } from '..'; import type { Border } from '../types'; const meta: Meta< typeof BorderControl > = { - title: 'Components (Experimental)/BorderControl', + title: 'Components/BorderControl', component: BorderControl, argTypes: { onChange: { diff --git a/storybook/manager-head.html b/storybook/manager-head.html index ebf2d6891ba0bb..3719f82a40db6d 100644 --- a/storybook/manager-head.html +++ b/storybook/manager-head.html @@ -2,6 +2,7 @@ ( function redirectIfStoryMoved() { const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'alignmentmatrixcontrol', + 'bordercontrol', 'customselectcontrol-v2', 'dimensioncontrol', 'navigation', From bc7ba3afa3e7ead95dcbf55fb653c98e5ca50913 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Thu, 19 Sep 2024 04:55:47 +0200 Subject: [PATCH 04/17] 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 4dd18914a7acb5..a2ca56ad1885cc 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,11 +12,13 @@ ### 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)). +- `__experimentalBorderControl` can now be imported as a stable `BorderControl` ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). ### New Features - `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)). - `ComboboxControl`: add support for `placeholder` attribute ([#65254](https://github.com/WordPress/gutenberg/pull/65254)). +- `BoxControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). ### Enhancements From a88e7695def1a0ffdf979d6a27417d0891cc8b55 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Mon, 23 Sep 2024 22:04:33 +0200 Subject: [PATCH 05/17] Fix changelog. --- packages/components/CHANGELOG.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 31318156b3c335..5de64e4ae23e37 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,14 +2,11 @@ ## Unreleased -## 28.8.0 (2024-09-19) - ### Bug Fixes - `Tabs`: restore vertical indicator ([#65385](https://github.com/WordPress/gutenberg/pull/65385)). - `Tabs`: indicator positioning under RTL direction ([#64926](https://github.com/WordPress/gutenberg/pull/64926)). - `Popover`: Update `toolbar` variant radius to match block toolbar ([#65263](https://github.com/WordPress/gutenberg/pull/65263)). -- `MenuItemsChoice`: Allow menu items height to adapt to its content ([#65204](https://github.com/WordPress/gutenberg/pull/65204)). - `BoxControl`: Unify input filed width whether linked or not ([#65348](https://github.com/WordPress/gutenberg/pull/65348)). ### Deprecations From 256b9c488aaa78e0386214da9cbd3c67715e666f Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Mon, 23 Sep 2024 22:07:11 +0200 Subject: [PATCH 06/17] Fix changelog (for real?) --- packages/components/CHANGELOG.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5de64e4ae23e37..25efc8e5b84825 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,25 +2,33 @@ ## Unreleased +### Deprecations + +- `__experimentalBorderControl` can now be imported as a stable `BorderControl` ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). + +### Enhancements + +- `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). + +## 28.8.0 (2024-09-19) + ### Bug Fixes - `Tabs`: restore vertical indicator ([#65385](https://github.com/WordPress/gutenberg/pull/65385)). - `Tabs`: indicator positioning under RTL direction ([#64926](https://github.com/WordPress/gutenberg/pull/64926)). - `Popover`: Update `toolbar` variant radius to match block toolbar ([#65263](https://github.com/WordPress/gutenberg/pull/65263)). +- `MenuItemsChoice`: Allow menu items height to adapt to its content ([#65204](https://github.com/WordPress/gutenberg/pull/65204)). - `BoxControl`: Unify input filed width whether linked or not ([#65348](https://github.com/WordPress/gutenberg/pull/65348)). ### 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)). -- `__experimentalBorderControl` can now be imported as a stable `BorderControl` ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). - `__experimentalBoxControl` can now be imported as a stable `BoxControl` ([#65469](https://github.com/WordPress/gutenberg/pull/65469)). ### New Features - `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)). - `ComboboxControl`: add support for `placeholder` attribute ([#65254](https://github.com/WordPress/gutenberg/pull/65254)). -- `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). -- `BoxControl`: promote to stable ([#65469](https://github.com/WordPress/gutenberg/pull/65469)). ### Enhancements From 5672df5821ab1d0afc52a8d1bbe894f5af2f2cbf Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 24 Sep 2024 10:50:37 +0200 Subject: [PATCH 07/17] Fix changelog --- packages/components/CHANGELOG.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 363316fa498e3f..25efc8e5b84825 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,10 +10,6 @@ - `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). -### Bug Fixes - -- `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)). - ## 28.8.0 (2024-09-19) ### Bug Fixes From a2830ebfa1bb3daa3eed3a689e81b66e9339e1f1 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 24 Sep 2024 12:06:43 +0200 Subject: [PATCH 08/17] Apply feedback. --- .../src/border-control/stories/index.story.tsx | 11 +++++++---- packages/components/src/border-control/types.ts | 9 ++++++++- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 19938db5d0e51e..5609575f681aab 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -93,6 +93,9 @@ export const Default = Template.bind( {} ); Default.args = { colors, label: 'Border', + enableAlpha: true, + enableStyle: true, + shouldSanitizeBorder: true, }; /** @@ -135,10 +138,10 @@ WithMultipleOrigins.args = { }; /** - * Allow the alpha channel to be edited on each color. + * Prevent the alpha channel from being edited. */ -export const WithAlphaEnabled = Template.bind( {} ); -WithAlphaEnabled.args = { +export const WithAlphaDisabled = Template.bind( {} ); +WithAlphaDisabled.args = { ...Default.args, - enableAlpha: true, + enableAlpha: false, }; diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 5e028050d8e18e..22f6395f84c27e 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -18,12 +18,19 @@ export type Border = { export type ColorProps = Pick< ColorPaletteProps, - 'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar' + 'colors' | '__experimentalIsRenderedInSidebar' > & { /** * This toggles the ability to choose custom colors. */ disableCustomColors?: boolean; + /** + * This controls whether the alpha channel will be offered when selecting + * custom colors. + * + * @default true + */ + enableAlpha?: boolean; }; export type LabelProps = { From b5ec38f85b8d9f7334127df6ea77b5c8d2f3a1f9 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 24 Sep 2024 16:57:02 +0200 Subject: [PATCH 09/17] Fix changelog --- packages/components/CHANGELOG.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a66db428e483b1..1e9839baea327f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Bug Fixes + +- `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)). +- `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)). + ### Deprecations - `__experimentalBorderControl` can now be imported as a stable `BorderControl` ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). @@ -9,8 +14,6 @@ ### Enhancements - `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). -- `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)). -- `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)). - `MenuGroup`: Simplify the MenuGroup styles within dropdown menus. ([#65561](https://github.com/WordPress/gutenberg/pull/65561)). ## 28.8.0 (2024-09-19) From 32a932ee64fafbfadeaf9fdc8b48b27721a6f45b Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 24 Sep 2024 16:57:12 +0200 Subject: [PATCH 10/17] Remove alpha story. --- .../src/border-control/stories/index.story.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 5609575f681aab..0756a18ac5c0e5 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -136,12 +136,3 @@ WithMultipleOrigins.args = { ...Default.args, colors: multipleOriginColors, }; - -/** - * Prevent the alpha channel from being edited. - */ -export const WithAlphaDisabled = Template.bind( {} ); -WithAlphaDisabled.args = { - ...Default.args, - enableAlpha: false, -}; From 8eff905acf8c0cf9ea8f88accc19e2c42dbfd912 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 24 Sep 2024 16:58:32 +0200 Subject: [PATCH 11/17] README fix. --- packages/components/src/border-control/border-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 1e76df38b33f02..03a83f1ac063ee 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -123,7 +123,7 @@ selected, the border style is also cleared and `undefined` is returned as the new border value. - Required: No -- Default: true +- Default: `true` ### `showDropdownHeader`: `boolean` From b043c799ba9b067194cc922dbb356be43a8a8ac0 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Tue, 24 Sep 2024 16:58:52 +0200 Subject: [PATCH 12/17] Fix default in README --- packages/components/src/border-control/border-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 03a83f1ac063ee..b996721628cbe6 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -75,7 +75,7 @@ This controls whether the alpha channel will be offered when selecting custom colors. - Required: No -- Default: `false` +- Default: `true` ### `enableStyle`: `boolean` From 68262284aef7792215e488cb3d82596d9f8499cc Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Fri, 27 Sep 2024 02:57:10 +0200 Subject: [PATCH 13/17] Fix changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 047d863327f13f..3baddb5cccadd6 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,7 @@ ### Deprecations - `__experimentalBorderControl` can now be imported as a stable `BorderControl` ([#65475](https://github.com/WordPress/gutenberg/pull/65475)). +- `__experimentalBorderBoxControl` can now be imported as a stable `BorderBoxControl` ([#65586](https://github.com/WordPress/gutenberg/pull/65586)). ### Enhancements From d357efda081be89758b69f2eefc0f27a68127670 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Fri, 27 Sep 2024 03:06:08 +0200 Subject: [PATCH 14/17] Remove `showDropdownHeader` prop and the header itself. --- .../border-control-dropdown/component.tsx | 15 --------------- .../src/border-control/border-control/README.md | 7 ------- .../border-control/border-control/component.tsx | 2 -- .../components/src/border-control/test/index.js | 17 ++--------------- packages/components/src/border-control/types.ts | 12 ------------ 5 files changed, 2 insertions(+), 51 deletions(-) diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx index d84d6bea77335b..0223de66a4c78b 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -7,7 +7,6 @@ import type { CSSProperties } from 'react'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies @@ -17,12 +16,10 @@ import Button from '../../button'; import ColorIndicator from '../../color-indicator'; import ColorPalette from '../../color-palette'; import Dropdown from '../../dropdown'; -import { HStack } from '../../h-stack'; import { VStack } from '../../v-stack'; import type { WordPressComponentProps } from '../../context'; import { contextConnect } from '../../context'; import { useBorderControlDropdown } from './hook'; -import { StyledLabel } from '../../base-control/styles/base-control-styles'; import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper'; import type { ColorObject } from '../../color-palette/types'; @@ -149,7 +146,6 @@ const BorderControlDropdown = ( popoverContentClassName, popoverControlsClassName, resetButtonClassName, - showDropdownHeader, size, __unstablePopoverProps, ...otherProps @@ -197,17 +193,6 @@ const BorderControlDropdown = ( <> - { showDropdownHeader ? ( - - { __( 'Border color' ) } -