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 29a17c8be87e44..00f5c0df46372a 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 858f0b0c77b197..5366babc266c61 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 da2107fc73a93e..f06472afb7cff9 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 9170a47f64feeb..6864a1add1fffc 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 () => {