Refactor BorderColorControl with wordpress components

t-hamano · Oct 20, 2024 · 4f29a3f · 4f29a3f
1 parent 8553588
commit 4f29a3f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 46 deletions.
diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx
@@ -18,6 +18,7 @@ import {
 	Flex,
 	FlexBlock,
 	FlexItem,
+	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
@@ -135,39 +136,34 @@ export default function BorderColorControl( {
 						</Button>
 					</FlexItem>
 				</Flex>
-				<div className="ftb-border-color-control__controls">
-					<div className="ftb-border-color-control__controls-inner">
-						{ isLinked ? (
-							<div className="ftb-border-color-control__controls-row">
-								<SideIndicatorControl />
-								<ColorIndicatorButton
-									label={ __( 'All', 'flexible-table-block' ) }
-									value={ allInputValue }
-									onClick={ () => handleOnPickerOpen( undefined ) }
-									isNone={ ! allInputValue && ! isMixed }
-									isTransparent={ allInputValue === 'transparent' }
-									isMixed={ isMixed }
-								/>
-								{ isPickerOpen && ! pickerIndex && (
-									<Popover
-										placement="left-start"
-										shift
-										offset={ 36 }
-										onClose={ handleOnPickerClose }
-									>
-										<Spacer padding={ 4 } marginBottom={ 0 }>
-											<ColorPalette
-												colors={ colors }
-												value={ allInputValue || '' }
-												onChange={ handleOnChangeAll }
-											/>
-										</Spacer>
-									</Popover>
-								) }
-							</div>
-						) : (
-							SIDE_CONTROLS.map( ( item, index ) => (
-								<div className="ftb-border-color-control__controls-row" key={ index }>
+				<HStack alignment="start" justify="space-between">
+					{ isLinked ? (
+						<HStack spacing={ 3 } justify="start">
+							<SideIndicatorControl />
+							<ColorIndicatorButton
+								label={ __( 'All', 'flexible-table-block' ) }
+								value={ allInputValue }
+								onClick={ () => handleOnPickerOpen( undefined ) }
+								isNone={ ! allInputValue && ! isMixed }
+								isTransparent={ allInputValue === 'transparent' }
+								isMixed={ isMixed }
+							/>
+							{ isPickerOpen && ! pickerIndex && (
+								<Popover placement="left-start" shift offset={ 36 } onClose={ handleOnPickerClose }>
+									<Spacer padding={ 4 } marginBottom={ 0 }>
+										<ColorPalette
+											colors={ colors }
+											value={ allInputValue || '' }
+											onChange={ handleOnChangeAll }
+										/>
+									</Spacer>
+								</Popover>
+							) }
+						</HStack>
+					) : (
+						<VStack>
+							{ SIDE_CONTROLS.map( ( item, index ) => (
+								<HStack spacing={ 3 } justify="start" key={ item.value }>
 									<SideIndicatorControl sides={ [ item.value ] } />
 									<ColorIndicatorButton
 										label={ item.label }
@@ -192,18 +188,17 @@ export default function BorderColorControl( {
 											</Spacer>
 										</Popover>
 									) }
-								</div>
-							) )
-						) }
-					</div>
+								</HStack>
+							) ) }
+						</VStack>
+					) }
 					<Button
-						className="ftb-border-color-control__header-linked-button"
 						label={ linkedLabel }
 						onClick={ toggleLinked }
 						icon={ isLinked ? link : linkOff }
 						size="small"
 					/>
-				</div>
+				</HStack>
 			</VStack>
 		</BaseControl>
 	);

diff --git a/src/controls/style.scss b/src/controls/style.scss
@@ -3,7 +3,6 @@
 .ftb-border-width-control__header-linked-button,
 .ftb-border-style-control__header-linked-button,
 .ftb-border-spacing-control__header-linked-button,
-.ftb-border-color-control__header-linked-button,
 .ftb-padding-control__header-linked-button,
 .ftb-color-control__header-linked-button {
 
@@ -169,14 +168,10 @@
 }
 
 // Controls styles.
-.ftb-border-color-control__controls,
 .ftb-border-spacing-control__controls {
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
-}
-
-.ftb-border-spacing-control__controls {
 
 	.ftb-border-spacing-control__header-linked-button {
 		margin-top: 8px;
@@ -189,7 +184,6 @@
 }
 
 // Controls row styles.
-.ftb-border-color-control__controls-row,
 .ftb-border-spacing-control__controls-row {
 	display: flex;
 	align-items: center;

diff --git a/src/controls/styles.tsx b/src/controls/styles.tsx
@@ -9,7 +9,6 @@ export const ViewBox = styled.span`
 	display: block;
 	width: 24px;
 	height: 24px;
-	margin-right: 12px;
 `;
 
 const Side = styled.span< { isFocused: boolean } >`