BoxControl: Refactor and unify the different sides implementation (Wo…

…rdPress#67626) Co-authored-by: youknowriad <[email protected]> Co-authored-by: tyxla <[email protected]>
yogeshbhutkar · Dec 18, 2024 · 775606b · 775606b
1 parent 0695a4e
commit 775606b
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 517 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -40,6 +40,7 @@
 -   Upgraded `@ariakit/react` (v0.4.15) and `@ariakit/test` (v0.4.7) ([#67404](https://github.com/WordPress/gutenberg/pull/67404)).
 -   `ToolbarButton`: Set size to "compact" ([#67440](https://github.com/WordPress/gutenberg/pull/67440)).
 -   `SlotFill`: remove manual rerenders from the portal `Fill` component ([#67471](https://github.com/WordPress/gutenberg/pull/67471)).
+-   `BoxControl`: Refactor internals to unify the different combinations of sides ([#67626](https://github.com/WordPress/gutenberg/pull/67626)).
 
 ### Bug Fixes
 

diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
@@ -9,13 +9,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { BaseControl } from '../base-control';
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
-import AxialInputControls from './axial-input-controls';
+import InputControl from './input-control';
 import LinkedButton from './linked-button';
 import { Grid } from '../grid';
 import {
-	FlexedBoxControlIcon,
 	InputWrapper,
 	ResetButton,
 	LinkedButtonWrapper,
@@ -24,8 +21,9 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
 	getInitialSide,
-	isValuesMixed,
+	isValueMixed,
 	isValuesDefined,
+	getAllowedSides,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type {
@@ -97,7 +95,7 @@ function BoxControl( {
 
 	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
 	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
+		! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide
 	);
 
 	const [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(
@@ -162,6 +160,7 @@ function BoxControl( {
 		__next40pxDefaultSize,
 		size: undefined,
 	} );
+	const sidesToRender = getAllowedSides( sides );
 
 	return (
 		<Grid
@@ -176,8 +175,7 @@ function BoxControl( {
 			</BaseControl.VisualLabel>
 			{ isLinked && (
 				<InputWrapper>
-					<FlexedBoxControlIcon side={ side } sides={ sides } />
-					<AllInputControl { ...inputControlProps } />
+					<InputControl side="all" { ...inputControlProps } />
 				</InputWrapper>
 			) }
 			{ ! hasOneSide && (
@@ -189,12 +187,24 @@ function BoxControl( {
 				</LinkedButtonWrapper>
 			) }
 
-			{ ! isLinked && splitOnAxis && (
-				<AxialInputControls { ...inputControlProps } />
-			) }
-			{ ! isLinked && ! splitOnAxis && (
-				<InputControls { ...inputControlProps } />
-			) }
+			{ ! isLinked &&
+				splitOnAxis &&
+				[ 'vertical', 'horizontal' ].map( ( axis ) => (
+					<InputControl
+						key={ axis }
+						side={ axis as 'horizontal' | 'vertical' }
+						{ ...inputControlProps }
+					/>
+				) ) }
+			{ ! isLinked &&
+				! splitOnAxis &&
+				Array.from( sidesToRender ).map( ( axis ) => (
+					<InputControl
+						key={ axis }
+						side={ axis }
+						{ ...inputControlProps }
+					/>
+				) ) }
 			{ allowReset && (
 				<ResetButton
 					className="component-box-control__reset-button"