remove showClearButton props

WordPress · Feb 7, 2025 · 6a656af · 6a656af
1 parent 77e408b
commit 6a656af
Show file tree

Hide file tree

Showing 10 changed files with 8 additions and 81 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
@@ -256,7 +256,6 @@ export default function BorderPanel( {
 					<BorderBoxControl
 						colors={ colors }
 						enableAlpha
-						showClearButton
 						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }

diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
@@ -48,7 +48,6 @@ const MyBorderBoxControl = () => {
 	return (
 		<BorderBoxControl
 			__next40pxDefaultSize
-			showClearButton
 			colors={ colors }
 			label={ __( 'Borders' ) }
 			onChange={ onChange }
@@ -90,13 +89,6 @@ custom colors.
 -   Required: No
 -   Default: `false`
 
-### `showClearButton`: `boolean`
-
-Select whether to display the Clear button.
-
--   Required: No
--   Default: `undefined`
-
 ### `enableStyle`: `boolean`
 
 This controls whether to support border style selections.

diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -48,7 +48,6 @@ const UnconnectedBorderBoxControl = (
 		disableCustomColors,
 		disableUnits,
 		enableAlpha,
-		showClearButton,
 		enableStyle,
 		hasMixedBorders,
 		hideLabelFromVision,
@@ -104,7 +103,6 @@ const UnconnectedBorderBoxControl = (
 						disableUnits={ disableUnits }
 						disableCustomColors={ disableCustomColors }
 						enableAlpha={ enableAlpha }
-						showClearButton={ showClearButton }
 						enableStyle={ enableStyle }
 						onChange={ onLinkedChange }
 						placeholder={
@@ -179,7 +177,6 @@ const UnconnectedBorderBoxControl = (
  * 	return (
  * 		<BorderBoxControl
  * 			__next40pxDefaultSize
- * 			showClearButton
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }

diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts
@@ -22,7 +22,7 @@ export type BorderSide = keyof Borders;
 
 export type BorderBoxControlProps = ColorProps &
 	LabelProps &
-	Pick< BorderControlProps, 'showClearButton' | 'enableStyle' | 'size' > & {
+	Pick< BorderControlProps, '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
@@ -7,7 +7,6 @@ import type { CSSProperties } from 'react';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -153,27 +152,17 @@ 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 );
 
@@ -210,9 +199,7 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
-		onClose,
-	} ) => (
+	const renderContent: DropdownComponentProps[ 'renderContent' ] = () => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
@@ -235,37 +222,20 @@ const BorderControlDropdown = (
 						/>
 					) }
 				</VStack>
-				{ showClearButton && (
-					<div className={ clearButtonClassName }>
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								onReset();
-							} }
-							disabled={ ! showResetButton }
-							accessibleWhenDisabled
-							__next40pxDefaultSize
-						>
-							{ __( 'Clear' ) }
-						</Button>
-					</div>
-				) }
-			</DropdownContentWrapper>
-			{ ! showClearButton && showResetButton && (
-				<DropdownContentWrapper paddingSize="none">
+				<div className={ clearButtonClassName }>
 					<Button
-						className={ resetButtonClassName }
 						variant="tertiary"
 						onClick={ () => {
 							onReset();
-							onClose();
 						} }
+						disabled={ ! showResetButton }
+						accessibleWhenDisabled
 						__next40pxDefaultSize
 					>
-						{ __( 'Reset' ) }
+						{ __( 'Clear' ) }
 					</Button>
-				</DropdownContentWrapper>
-			) }
+				</div>
+			</DropdownContentWrapper>
 		</>
 	);
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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.
 		 */