From 77e408b3d3ecc2072490cbe065344276e5904c16 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Thu, 6 Feb 2025 07:52:39 +0900 Subject: [PATCH 1/9] fix #69065 --- .../components/global-styles/border-panel.js | 1 + .../border-box-control/README.md | 8 ++++++ .../border-box-control/component.tsx | 3 ++ .../src/border-box-control/types.ts | 2 +- .../border-control-dropdown/component.tsx | 28 ++++++++++++++++++- .../border-control-dropdown/hook.ts | 5 ++++ .../border-control/component.tsx | 2 ++ .../src/border-control/border-control/hook.ts | 2 ++ .../components/src/border-control/styles.ts | 6 ++++ .../components/src/border-control/types.ts | 10 +++++++ 10 files changed, 65 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index aea8e67f5b594..e4c349024dae5 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -256,6 +256,7 @@ export default function BorderPanel( { { return ( & { + Pick< BorderControlProps, 'showClearButton' | 'enableStyle' | 'size' > & { /** * A callback function invoked when any border value is changed. The value * received may be a "flat" border object, one that has properties defining 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 707497ae2993c..3be8e37efa9c4 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -7,6 +7,7 @@ import type { CSSProperties } from 'react'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -152,17 +153,27 @@ const BorderControlDropdown = ( indicatorClassName, indicatorWrapperClassName, isStyleSettable, + showClearButton, onReset, onColorChange, onStyleChange, popoverContentClassName, popoverControlsClassName, resetButtonClassName, + clearButtonClassName, size, __unstablePopoverProps, ...otherProps } = useBorderControlDropdown( props ); + if ( showClearButton === undefined ) { + deprecated( `Clear button styles for wp.components.BorderBoxControl`, { + since: '6.8', + version: '7.1', + hint: 'Set the `showClearButton` prop to true to start opting into the new styles, which will become the default in a future version.', + } ); + } + const { color, style } = border || {}; const colorObject = getColorObject( color, colors ); @@ -224,8 +235,23 @@ const BorderControlDropdown = ( /> ) } + { showClearButton && ( +
+ +
+ ) } - { showResetButton && ( + { ! showClearButton && showResetButton && ( ); - const renderContent: DropdownComponentProps[ 'renderContent' ] = ( { - onClose, - } ) => ( + const renderContent: DropdownComponentProps[ 'renderContent' ] = () => ( <> @@ -235,37 +222,20 @@ const BorderControlDropdown = ( /> ) } - { showClearButton && ( -
- -
- ) } - - { ! showClearButton && showResetButton && ( - +
- - ) } +
+ ); diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index 8fb2729d817e0..858f0b0c77b19 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -80,10 +80,6 @@ export function useBorderControlDropdown( return cx( styles.clearButton ); }, [ cx ] ); - const resetButtonClassName = useMemo( () => { - return cx( styles.resetButton ); - }, [ cx ] ); - return { ...otherProps, border, @@ -99,7 +95,6 @@ export function useBorderControlDropdown( popoverContentClassName, popoverControlsClassName, clearButtonClassName, - resetButtonClassName, size, __experimentalIsRenderedInSidebar, }; diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index 20000fd8a2792..f71599b274778 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -49,7 +49,6 @@ const UnconnectedBorderControl = ( innerWrapperClassName, inputWidth, isStyleSettable, - showClearButton, label, onBorderChange, onSliderChange, @@ -90,7 +89,6 @@ const UnconnectedBorderControl = ( enableAlpha={ enableAlpha } enableStyle={ enableStyle } isStyleSettable={ isStyleSettable } - showClearButton={ showClearButton } onChange={ onBorderChange } previousStyleSelection={ previousStyleSelection diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts index 9b90b7ead2f9a..9b0f064c51921 100644 --- a/packages/components/src/border-control/border-control/hook.ts +++ b/packages/components/src/border-control/border-control/hook.ts @@ -33,7 +33,6 @@ export function useBorderControl( enableAlpha = true, enableStyle = true, shouldSanitizeBorder = true, - showClearButton, size = 'default', value: border, width, @@ -161,7 +160,6 @@ export function useBorderControl( innerWrapperClassName, inputWidth: wrapperWidth, isStyleSettable, - showClearButton, onBorderChange, onSliderChange, onWidthChange, diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index 1e3db6944e725..da2107fc73a93 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -153,18 +153,6 @@ export const clearButton = css` margin-top: 12px; `; -export const resetButton = css` - justify-content: center; - width: 100%; - - /* Override button component styling */ - && { - border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] }; - border-top-left-radius: 0; - border-top-right-radius: 0; - } -`; - export const borderSlider = () => css` flex: 1 1 60%; ${ rtl( { marginRight: space( 3 ) } )() } diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts index 860084feea0f7..ecd3f67c9be08 100644 --- a/packages/components/src/border-control/types.ts +++ b/packages/components/src/border-control/types.ts @@ -57,12 +57,6 @@ export type BorderControlProps = ColorProps & * @default true */ enableStyle?: boolean; - /** - * ShowClearButton - * - * @default undefined - */ - showClearButton?: boolean | undefined; /** * This flags the `BorderControl` to render with a more compact * appearance. It restricts the width of the control and prevents it @@ -143,10 +137,6 @@ export type DropdownProps = ColorProps & * Whether a border style can be set, based on the border sanitization settings. */ isStyleSettable: boolean; - /** - * Show Clear Button - */ - showClearButton?: boolean; /** * An internal prop used to control the visibility of the dropdown. */ From d8c9b0af791219b1145782c647ee478be2b35760 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 7 Feb 2025 18:23:03 +0900 Subject: [PATCH 3/9] test --- packages/components/src/border-control/test/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index ff9007be28f1a..9170a47f64fee 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -146,7 +146,7 @@ describe( 'BorderControl', () => { const solidButton = getButton( 'Solid' ); const dashedButton = getButton( 'Dashed' ); const dottedButton = getButton( 'Dotted' ); - const resetButton = getButton( 'Reset' ); + const clearButton = getButton( 'Clear' ); expect( customColorPicker ).toBeInTheDocument(); expect( colorSwatchButtons.length ).toEqual( colors.length ); @@ -154,7 +154,7 @@ describe( 'BorderControl', () => { expect( solidButton ).toBeInTheDocument(); expect( dashedButton ).toBeInTheDocument(); expect( dottedButton ).toBeInTheDocument(); - expect( resetButton ).toBeInTheDocument(); + expect( clearButton ).toBeInTheDocument(); } ); it( 'should not render style options when opted out of', async () => { @@ -350,12 +350,12 @@ describe( 'BorderControl', () => { expect( props.onChange ).not.toHaveBeenCalled(); } ); - it( 'should reset color and style only when popover reset button clicked', async () => { + it( 'should clear color and style only when popover clear button clicked', async () => { const user = userEvent.setup(); const props = createProps(); render( ); await openPopover( user ); - await user.click( getButton( 'Reset' ) ); + await user.click( getButton( 'Clear' ) ); expect( props.onChange ).toHaveBeenNthCalledWith( 1, { color: undefined, From 5ae0216cd06f0fedc12ece388bec6ea3362aa265 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 7 Feb 2025 18:29:50 +0900 Subject: [PATCH 4/9] changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c487b0a17a288..86cd3d9f41ef0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,6 +7,7 @@ ### Enhancements - `BorderBoxControl`, `BoxControl`: Remove `Tooltip` component from linked button ([#68498](https://github.com/WordPress/gutenberg/pull/68498)). +- `BorderControlDropdown`, `BorderControl`: Reset button is always visible. ([#69066](https://github.com/WordPress/gutenberg/pull/69066)). ### Internal From b3149c92d2b71d14f7ef75c590afc750d5625a40 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 7 Feb 2025 18:32:27 +0900 Subject: [PATCH 5/9] changelog --- packages/components/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 86cd3d9f41ef0..142272bd3ad00 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Enhancements + +- `BorderControlDropdown`, `BorderControl`: Reset button is always visible. ([#69066](https://github.com/WordPress/gutenberg/pull/69066)). + + ## 29.3.0 (2025-01-29) ### Enhancements From a459bc86279fd4a259670457abba27bb2f57da5b Mon Sep 17 00:00:00 2001 From: shimotmk Date: Sat, 8 Feb 2025 06:26:50 +0900 Subject: [PATCH 6/9] changelog --- packages/components/CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7e9c24c637abc..4afdd978bc948 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,7 +12,6 @@ ### Enhancements - `BorderBoxControl`, `BoxControl`: Remove `Tooltip` component from linked button ([#68498](https://github.com/WordPress/gutenberg/pull/68498)). -- `BorderControlDropdown`, `BorderControl`: Reset button is always visible. ([#69066](https://github.com/WordPress/gutenberg/pull/69066)). ### Internal From 6de075e7a6195f01c246772e227945889df4a6f3 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 14 Feb 2025 07:22:10 +0900 Subject: [PATCH 7/9] =?UTF-8?q?clear=20=E2=86=92=20reset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../border-control/border-control-dropdown/component.tsx | 6 +++--- .../src/border-control/border-control-dropdown/hook.ts | 6 +++--- packages/components/src/border-control/styles.ts | 2 +- packages/components/src/border-control/test/index.js | 4 ++-- 4 files changed, 9 insertions(+), 9 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 29a17c8be87e4..00f5c0df46372 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -157,7 +157,7 @@ const BorderControlDropdown = ( onStyleChange, popoverContentClassName, popoverControlsClassName, - clearButtonClassName, + resetButtonClassName, size, __unstablePopoverProps, ...otherProps @@ -222,7 +222,7 @@ const BorderControlDropdown = ( /> ) } -
+
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts index 858f0b0c77b19..5366babc266c6 100644 --- a/packages/components/src/border-control/border-control-dropdown/hook.ts +++ b/packages/components/src/border-control/border-control-dropdown/hook.ts @@ -76,8 +76,8 @@ export function useBorderControlDropdown( return cx( styles.borderControlPopoverContent ); }, [ cx ] ); - const clearButtonClassName = useMemo( () => { - return cx( styles.clearButton ); + const resetButtonClassName = useMemo( () => { + return cx( styles.resetButton ); }, [ cx ] ); return { @@ -94,7 +94,7 @@ export function useBorderControlDropdown( onReset, popoverContentClassName, popoverControlsClassName, - clearButtonClassName, + resetButtonClassName, size, __experimentalIsRenderedInSidebar, }; diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index da2107fc73a93..f06472afb7cff 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -147,7 +147,7 @@ export const borderControlPopoverControls = css` export const borderControlPopoverContent = css``; export const borderColorIndicator = css``; -export const clearButton = css` +export const resetButton = css` display: flex; justify-content: flex-end; margin-top: 12px; diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index 9170a47f64fee..6864a1add1fff 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -146,7 +146,7 @@ describe( 'BorderControl', () => { const solidButton = getButton( 'Solid' ); const dashedButton = getButton( 'Dashed' ); const dottedButton = getButton( 'Dotted' ); - const clearButton = getButton( 'Clear' ); + const resetButton = getButton( 'Reset' ); expect( customColorPicker ).toBeInTheDocument(); expect( colorSwatchButtons.length ).toEqual( colors.length ); @@ -154,7 +154,7 @@ describe( 'BorderControl', () => { expect( solidButton ).toBeInTheDocument(); expect( dashedButton ).toBeInTheDocument(); expect( dottedButton ).toBeInTheDocument(); - expect( clearButton ).toBeInTheDocument(); + expect( resetButton ).toBeInTheDocument(); } ); it( 'should not render style options when opted out of', async () => { From da27fb764fb314220dae5bbe7c3988ea99cb4d58 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 14 Feb 2025 07:23:29 +0900 Subject: [PATCH 8/9] =?UTF-8?q?clear=20=E2=86=92=20reset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/src/border-control/test/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index 6864a1add1fff..ff9007be28f1a 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -350,12 +350,12 @@ describe( 'BorderControl', () => { expect( props.onChange ).not.toHaveBeenCalled(); } ); - it( 'should clear color and style only when popover clear button clicked', async () => { + it( 'should reset color and style only when popover reset button clicked', async () => { const user = userEvent.setup(); const props = createProps(); render( ); await openPopover( user ); - await user.click( getButton( 'Clear' ) ); + await user.click( getButton( 'Reset' ) ); expect( props.onChange ).toHaveBeenNthCalledWith( 1, { color: undefined, From 4bda128c52c14f2a4cd16e318738ddb3e44253d9 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Sat, 15 Feb 2025 06:31:26 +0900 Subject: [PATCH 9/9] fix --- .../border-control/border-control-dropdown/component.tsx | 8 ++++---- .../src/border-control/border-control-dropdown/hook.ts | 6 +++--- packages/components/src/border-control/styles.ts | 2 +- 3 files changed, 8 insertions(+), 8 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 00f5c0df46372..23ee902df5ffc 100644 --- a/packages/components/src/border-control/border-control-dropdown/component.tsx +++ b/packages/components/src/border-control/border-control-dropdown/component.tsx @@ -157,7 +157,7 @@ const BorderControlDropdown = ( onStyleChange, popoverContentClassName, popoverControlsClassName, - resetButtonClassName, + resetButtonWrapperClassName, size, __unstablePopoverProps, ...otherProps @@ -173,7 +173,7 @@ const BorderControlDropdown = ( enableStyle ); - const showResetButton = color || ( style && style !== 'none' ); + const enableResetButton = color || ( style && style !== 'none' ); const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined; @@ -222,13 +222,13 @@ const BorderControlDropdown = ( /> ) } -
+