Refactor PaddingControl with wordpress components

t-hamano · Oct 20, 2024 · 7b3568a · 7b3568a
1 parent ab71378
commit 7b3568a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 78 deletions.
diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx
@@ -15,6 +15,8 @@ import {
 	Flex,
 	FlexBlock,
 	FlexItem,
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	__experimentalUnitControl as UnitControl,
@@ -122,40 +124,60 @@ export default function PaddingControl( {
 						</Button>
 					</FlexItem>
 				</Flex>
-				<div className="ftb-padding-control__header-control">
-					<SideIndicatorControl sides={ side === undefined ? undefined : [ side ] } />
-					{ isLinked && (
-						<UnitControl
-							placeholder={ allInputPlaceholder }
-							aria-label={ __( 'All', 'flexible-table-block' ) }
-							onChange={ handleOnChangeAll }
-							value={ allInputValue }
-							units={ paddingUnits }
-							size="__unstable-large"
-						/>
-					) }
+				<HStack alignment="center" justify="space-between" style={ { minHeight: '40px' } }>
+					<HStack justify="start">
+						<SideIndicatorControl sides={ side === undefined ? undefined : [ side ] } />
+						{ isLinked && (
+							<div>
+								<UnitControl
+									placeholder={ allInputPlaceholder }
+									aria-label={ __( 'All', 'flexible-table-block' ) }
+									onChange={ handleOnChangeAll }
+									value={ allInputValue }
+									units={ paddingUnits }
+									size="__unstable-large"
+									__unstableInputWidth="110px"
+								/>
+							</div>
+						) }
+					</HStack>
 					<Button
-						className="ftb-padding-control__header-linked-button"
 						label={ linkedLabel }
 						onClick={ toggleLinked }
 						icon={ isLinked ? link : linkOff }
 						size="small"
 					/>
-				</div>
+				</HStack>
 				{ ! isLinked && (
-					<div className="ftb-padding-control__input-controls">
-						{ SIDE_CONTROLS.map( ( item ) => (
-							<UnitControl
-								key={ item.value }
-								aria-label={ item.label }
-								value={ values[ item.value as ValuesKey ] }
-								units={ paddingUnits }
-								onFocus={ () => handleOnFocus( item.value ) }
-								onChange={ ( value ) => handleOnChange( value, item.value ) }
-								size="__unstable-large"
-							/>
-						) ) }
-					</div>
+					<Grid gap={ 2 } columns={ 2 } rows={ 3 }>
+						{ SIDE_CONTROLS.map( ( item ) => {
+							const gridStyles = ( value: SideValue ) => {
+								if ( value === 'top' || value === 'bottom' ) {
+									return {
+										gridColumn: 'span 2',
+										margin: '0 auto',
+									};
+								}
+								if ( value === 'right' ) {
+									return { gridColumn: 2, display: 'flex', justifyContent: 'flex-end' };
+								}
+								return { gridRow: 2 };
+							};
+							return (
+								<div key={ item.value } style={ gridStyles( item.value ) }>
+									<UnitControl
+										aria-label={ item.label }
+										value={ values[ item.value as ValuesKey ] }
+										units={ paddingUnits }
+										onFocus={ () => handleOnFocus( item.value ) }
+										onChange={ ( value ) => handleOnChange( value, item.value ) }
+										size="__unstable-large"
+										__unstableInputWidth="110px"
+									/>
+								</div>
+							);
+						} ) }
+					</Grid>
 				) }
 			</VStack>
 		</BaseControl>

diff --git a/src/controls/style.scss b/src/controls/style.scss
@@ -1,54 +1,3 @@
-// Header control styles.
-.ftb-padding-control__header-control {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	min-height: 40px !important;
-
-	.components-unit-control-wrapper {
-		max-width: 104px;
-		margin-right: auto;
-		margin-bottom: 0;
-	}
-}
-
-// Input controls styles.
-.ftb-padding-control__input-controls {
-	display: grid;
-	gap: 8px;
-	grid-template-columns: repeat(2, 1fr);
-	padding-top: 8px;
-
-	.components-unit-control-wrapper.components-unit-control-wrapper {
-		margin-bottom: 0;
-	}
-
-	.components-unit-control-wrapper {
-
-		&:nth-child(1) {
-			margin: 0 auto;
-			max-width: 116px;
-			grid-column: span 2;
-		}
-
-		&:nth-child(2) {
-			grid-row: 2;
-			grid-column: 2;
-		}
-
-		&:nth-child(3) {
-			margin: 0 auto;
-			max-width: 116px;
-			grid-column: span 2;
-		}
-
-		&:nth-child(4) {
-			grid-row: 2;
-			grid-column: 1;
-		}
-	}
-}
-
 // Color indicator button styles.
 .ftb-color-indicator-button {
 	position: relative;