diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 38c97f5a31017..f425baae72617 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +### Enhancement +- `BorderControlDropdown`, `BorderControl`: Reset button is always visible. ([#69066](https://github.com/WordPress/gutenberg/pull/69066)). + ### Internal - `NumberControl`: Fix invalid HTML attributes for infinite bounds ([#69033](https://github.com/WordPress/gutenberg/pull/69033)). 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..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; @@ -199,9 +199,7 @@ const BorderControlDropdown = ( ); - const renderContent: DropdownComponentProps[ 'renderContent' ] = ( { - onClose, - } ) => ( + const renderContent: DropdownComponentProps[ 'renderContent' ] = () => ( <> @@ -224,22 +222,20 @@ const BorderControlDropdown = ( /> ) } - - { 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 5366babc266c6..daba828fa64f2 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 resetButtonClassName = useMemo( () => { - return cx( styles.resetButton ); + const resetButtonWrapperClassName = useMemo( () => { + return cx( styles.resetButtonWrapper ); }, [ cx ] ); return { @@ -94,7 +94,7 @@ export function useBorderControlDropdown( onReset, popoverContentClassName, popoverControlsClassName, - resetButtonClassName, + resetButtonWrapperClassName, size, __experimentalIsRenderedInSidebar, }; diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index a678b6f362308..0109c0598e85b 100644 --- a/packages/components/src/border-control/styles.ts +++ b/packages/components/src/border-control/styles.ts @@ -147,16 +147,10 @@ export const borderControlPopoverControls = css` export const borderControlPopoverContent = css``; export const borderColorIndicator = css``; -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 resetButtonWrapper = css` + display: flex; + justify-content: flex-end; + margin-top: 12px; `; export const borderSlider = () => css`