Refactor BorderRadiusControl with wordpress components

t-hamano · Oct 20, 2024 · 1cef752 · 1cef752
1 parent 73d1a24
commit 1cef752
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 61 deletions.
diff --git a/src/controls/border-radius-control.tsx b/src/controls/border-radius-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,
@@ -151,43 +153,49 @@ export default function BorderRadiusControl( {
 						</Button>
 					</FlexItem>
 				</Flex>
-				<div className="ftb-border-radius-control__header-control">
-					<CornerIndicatorControl corners={ corner === undefined ? undefined : [ corner ] } />
-					{ isLinked && (
-						<UnitControl
-							hideLabelFromVision
-							label={ __( 'All', 'flexible-table-block' ) }
-							placeholder={ allInputPlaceholder }
-							onChange={ handleOnChangeAll }
-							value={ allInputValue }
-							units={ borderRadiusUnits }
-							min={ 0 }
-							size="__unstable-large"
-						/>
-					) }
+				<HStack alignment="center" justify="space-between" style={ { minHeight: '40px' } }>
+					<HStack justify="start">
+						<CornerIndicatorControl corners={ corner === undefined ? undefined : [ corner ] } />
+						{ isLinked && (
+							<div>
+								<UnitControl
+									hideLabelFromVision
+									label={ __( 'All', 'flexible-table-block' ) }
+									placeholder={ allInputPlaceholder }
+									onChange={ handleOnChangeAll }
+									value={ allInputValue }
+									units={ borderRadiusUnits }
+									min={ 0 }
+									size="__unstable-large"
+									__unstableInputWidth="100px"
+								/>
+							</div>
+						) }
+					</HStack>
 					<Button
-						className="ftb-border-radius-control__header-linked-button"
 						label={ linkedLabel }
 						onClick={ toggleLinked }
 						icon={ isLinked ? link : linkOff }
 						size="small"
 					/>
-				</div>
+				</HStack>
 				{ ! isLinked && (
-					<div className="ftb-border-radius-control__input-controls">
+					<Grid gap={ 2 }>
 						{ CORNER_CONTROLS.map( ( item ) => (
-							<UnitControl
-								key={ item.value }
-								aria-label={ item.label }
-								value={ values[ item.value as ValuesKey ] }
-								units={ borderRadiusUnits }
-								min={ 0 }
-								onFocus={ () => handleOnFocus( item.value ) }
-								onChange={ ( value ) => handleOnChange( value, item.value ) }
-								size="__unstable-large"
-							/>
+							<div key={ item.value }>
+								<UnitControl
+									aria-label={ item.label }
+									value={ values[ item.value as ValuesKey ] }
+									units={ borderRadiusUnits }
+									min={ 0 }
+									onFocus={ () => handleOnFocus( item.value ) }
+									onChange={ ( value ) => handleOnChange( value, item.value ) }
+									size="__unstable-large"
+									style={ { marginBottom: 0 } }
+								/>
+							</div>
 						) ) }
-					</div>
+					</Grid>
 				) }
 			</VStack>
 		</BaseControl>

diff --git a/src/controls/style.scss b/src/controls/style.scss
@@ -1,5 +1,4 @@
 // Linked button common styles.
-.ftb-border-radius-control__header-linked-button,
 .ftb-border-width-control__header-linked-button,
 .ftb-padding-control__header-linked-button,
 .ftb-color-control__header-linked-button {
@@ -10,7 +9,6 @@
 }
 
 // Header control styles.
-.ftb-border-radius-control__header-control,
 .ftb-border-width-control__header-control,
 .ftb-padding-control__header-control {
 	display: flex;
@@ -26,7 +24,6 @@
 }
 
 // Input controls styles.
-.ftb-border-radius-control__input-controls,
 .ftb-border-width-control__input-controls,
 .ftb-padding-control__input-controls {
 	display: grid;
@@ -37,10 +34,6 @@
 	.components-unit-control-wrapper.components-unit-control-wrapper {
 		margin-bottom: 0;
 	}
-}
-
-.ftb-border-width-control__input-controls,
-.ftb-padding-control__input-controls {
 
 	.components-unit-control-wrapper {
 
@@ -68,32 +61,6 @@
 	}
 }
 
-.ftb-border-radius-control__input-controls {
-
-	.components-unit-control-wrapper {
-
-		&:nth-child(1) {
-			grid-row: 1;
-			grid-column: 1;
-		}
-
-		&:nth-child(2) {
-			grid-row: 1;
-			grid-column: 2;
-		}
-
-		&:nth-child(3) {
-			grid-row: 2;
-			grid-column: 2;
-		}
-
-		&:nth-child(4) {
-			grid-row: 2;
-			grid-column: 1;
-		}
-	}
-}
-
 // Color indicator button styles.
 .ftb-color-indicator-button {
 	position: relative;