BoxControl: Add allowReset option (#32345)

* Add option to hide BoxControl reset button
WordPress · May 31, 2021 · bce9630 · bce9630
1 parent 4346306
commit bce9630
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
@@ -97,6 +97,13 @@ const Example = () => {
 ```
 
 ## Props
+### allowReset
+
+If this property is true, a button to reset the box control is rendered.
+
+- Type: `Boolean`
+- Required: No
+- Default: `true`
 
 ### inputProps
 
@@ -127,6 +134,13 @@ A callback function for visualizer changes, based on input hover interactions.
 -   Type: `Function`
 -   Required: Yes
 
+### resetValues
+
+The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
+
+-   Type: `Object`
+-   Required: No
+
 ### sides
 
 Collection of sides to allow control of. If omitted or empty, all sides will be available.

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
@@ -52,6 +52,7 @@ export default function BoxControl( {
 	values: valuesProp,
 	units,
 	sides,
+	allowReset = true,
 	resetValues = DEFAULT_VALUES,
 } ) {
 	const [ values, setValues ] = useControlledState( valuesProp, {
@@ -123,17 +124,19 @@ export default function BoxControl( {
 						{ label }
 					</Text>
 				</FlexItem>
-				<FlexItem>
-					<Button
-						className="component-box-control__reset-button"
-						variant="secondary"
-						isSmall
-						onClick={ handleOnReset }
-						disabled={ ! isDirty }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</FlexItem>
+				{ allowReset && (
+					<FlexItem>
+						<Button
+							className="component-box-control__reset-button"
+							isSecondary
+							isSmall
+							onClick={ handleOnReset }
+							disabled={ ! isDirty }
+						>
+							{ __( 'Reset' ) }
+						</Button>
+					</FlexItem>
+				) }
 			</Header>
 			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
 				<FlexItem>