Refactor font size and line height UI with wordpress components

t-hamano · Oct 20, 2024 · e9c4a09 · e9c4a09
1 parent a695142
commit e9c4a09
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 54 deletions.
diff --git a/src/editor.scss b/src/editor.scss
@@ -425,18 +425,6 @@
 	text-transform: uppercase;
 }
 
-.ftb-base-control-row {
-	display: flex;
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-
-	> *:first-child {
-		margin-right: 16px;
-	}
-}
-
 .ftb-percent-group {
 	margin-top: -8px;
 

diff --git a/src/settings/table-caption-settings.tsx b/src/settings/table-caption-settings.tsx
@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	Flex,
+	FlexBlock,
 	TextControl,
 	__experimentalSpacer as Spacer,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -104,27 +105,31 @@ export default function TableCaptionSettings( {
 					{ __( 'Clear caption settings', 'flexible-table-block' ) }
 				</Button>
 			</Spacer>
-			<div className="ftb-base-control-row">
-				<UnitControl
-					label={ __( 'Caption font size', 'flexible-table-block' ) }
-					value={ captionStylesObj?.fontSize }
-					units={ fontSizeUnits }
-					min={ 0 }
-					onChange={ onChangeFontSize }
-					size="__unstable-large"
-				/>
-				<TextControl
-					label={ __( 'Caption line height', 'flexible-table-block' ) }
-					autoComplete="off"
-					onChange={ onChangeLineHeight }
-					step={ 0.1 }
-					type="number"
-					value={ captionStylesObj?.lineHeight || '' }
-					min={ 0 }
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-				/>
-			</div>
+			<Spacer marginBottom="4" as={ Flex } align="end">
+				<FlexBlock>
+					<UnitControl
+						label={ __( 'Caption font size', 'flexible-table-block' ) }
+						value={ captionStylesObj?.fontSize }
+						units={ fontSizeUnits }
+						min={ 0 }
+						onChange={ onChangeFontSize }
+						size="__unstable-large"
+					/>
+				</FlexBlock>
+				<FlexBlock>
+					<TextControl
+						label={ __( 'Caption line height', 'flexible-table-block' ) }
+						autoComplete="off"
+						onChange={ onChangeLineHeight }
+						step={ 0.1 }
+						type="number"
+						value={ captionStylesObj?.lineHeight || '' }
+						min={ 0 }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					/>
+				</FlexBlock>
+			</Spacer>
 			<PaddingControl
 				label={ __( 'Caption padding', 'flexible-table-block' ) }
 				values={ pickPadding( captionStylesObj ) }

diff --git a/src/settings/table-cell-settings.tsx b/src/settings/table-cell-settings.tsx
@@ -13,6 +13,7 @@ import {
 	Button,
 	ButtonGroup,
 	Flex,
+	FlexBlock,
 	TextControl,
 	__experimentalSpacer as Spacer,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -222,27 +223,31 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell
 					{ __( 'Clear cell settings', 'flexible-table-block' ) }
 				</Button>
 			</Spacer>
-			<div className="ftb-base-control-row">
-				<UnitControl
-					label={ __( 'Cell font size', 'flexible-table-block' ) }
-					value={ cellStylesObj?.fontSize }
-					units={ fontSizeUnits }
-					min={ 0 }
-					onChange={ onChangeFontSize }
-					size="__unstable-large"
-				/>
-				<TextControl
-					label={ __( 'Cell line height', 'flexible-table-block' ) }
-					value={ cellStylesObj?.lineHeight || '' }
-					autoComplete="off"
-					type="number"
-					step={ 0.1 }
-					min={ 0 }
-					onChange={ onChangeLineHeight }
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-				/>
-			</div>
+			<Spacer marginBottom="4" as={ Flex }>
+				<FlexBlock>
+					<UnitControl
+						label={ __( 'Cell font size', 'flexible-table-block' ) }
+						value={ cellStylesObj?.fontSize }
+						units={ fontSizeUnits }
+						min={ 0 }
+						onChange={ onChangeFontSize }
+						size="__unstable-large"
+					/>
+				</FlexBlock>
+				<FlexBlock>
+					<TextControl
+						label={ __( 'Cell line height', 'flexible-table-block' ) }
+						value={ cellStylesObj?.lineHeight || '' }
+						autoComplete="off"
+						type="number"
+						step={ 0.1 }
+						min={ 0 }
+						onChange={ onChangeLineHeight }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					/>
+				</FlexBlock>
+			</Spacer>
 			<UnitControl
 				label={ __( 'Cell width', 'flexible-table-block' ) }
 				value={ cellStylesObj?.width }