Refactor control headers with wordpress components

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

Hide file tree

Showing 8 changed files with 113 additions and 79 deletions.
diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx
@@ -15,6 +15,10 @@ import {
 	Button,
 	Popover,
 	ColorPalette,
+	Flex,
+	FlexBlock,
+	FlexItem,
+	__experimentalVStack as VStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 } from '@wordpress/components';
@@ -120,13 +124,17 @@ export default function BorderColorControl( {
 
 	return (
 		<BaseControl className="ftb-border-color-control" help={ help } __nextHasNoMarginBottom>
-			<div aria-labelledby={ headingId } role="region">
-				<div className="ftb-border-color-control__header">
-					<Text id={ headingId }>{ label }</Text>
-					<Button variant="secondary" onClick={ handleOnReset } size="small">
-						{ __( 'Reset', 'flexible-table-block' ) }
-					</Button>
-				</div>
+			<VStack aria-labelledby={ headingId } role="region">
+				<Flex>
+					<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
+						{ label }
+					</Text>
+					<FlexItem>
+						<Button variant="secondary" onClick={ handleOnReset } size="small">
+							{ __( 'Reset', 'flexible-table-block' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
 				<div className="ftb-border-color-control__controls">
 					<div className="ftb-border-color-control__controls-inner">
 						{ isLinked && (
@@ -186,7 +194,7 @@ export default function BorderColorControl( {
 						size="small"
 					/>
 				</div>
-			</div>
+			</VStack>
 		</BaseControl>
 	);
 }
diff --git a/src/controls/border-radius-control.tsx b/src/controls/border-radius-control.tsx
@@ -12,6 +12,10 @@ import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
+	Flex,
+	FlexBlock,
+	FlexItem,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -136,13 +140,17 @@ export default function BorderRadiusControl( {
 
 	return (
 		<BaseControl className="ftb-border-radius-control" help={ help } __nextHasNoMarginBottom>
-			<div aria-labelledby={ headingId } role="region">
-				<div className="ftb-border-radius-control__header">
-					<Text id={ headingId }>{ label }</Text>
-					<Button variant="secondary" onClick={ handleOnReset } size="small">
-						{ __( 'Reset', 'flexible-table-block' ) }
-					</Button>
-				</div>
+			<VStack aria-labelledby={ headingId } role="region">
+				<Flex>
+					<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
+						{ label }
+					</Text>
+					<FlexItem>
+						<Button variant="secondary" onClick={ handleOnReset } size="small">
+							{ __( 'Reset', 'flexible-table-block' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
 				<div className="ftb-border-radius-control__header-control">
 					<CornerIndicatorControl corners={ corner === undefined ? undefined : [ corner ] } />
 					{ isLinked && (
@@ -181,7 +189,7 @@ export default function BorderRadiusControl( {
 						) ) }
 					</div>
 				) }
-			</div>
+			</VStack>
 		</BaseControl>
 	);
 }
diff --git a/src/controls/border-spacing-control.tsx b/src/controls/border-spacing-control.tsx
@@ -7,6 +7,10 @@ import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
+	Flex,
+	FlexBlock,
+	FlexItem,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -111,13 +115,17 @@ export default function BorderSpacingControl( {
 
 	return (
 		<BaseControl className="ftb-border-spacing-control" help={ help } __nextHasNoMarginBottom>
-			<div aria-labelledby={ headingId } role="region">
-				<div className="ftb-border-spacing-control__header">
-					<Text id={ headingId }>{ label }</Text>
-					<Button variant="secondary" onClick={ handleOnReset } size="small">
-						{ __( 'Reset', 'flexible-table-block' ) }
-					</Button>
-				</div>
+			<VStack aria-labelledby={ headingId } role="region">
+				<Flex>
+					<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
+						{ label }
+					</Text>
+					<FlexItem>
+						<Button variant="secondary" onClick={ handleOnReset } size="small">
+							{ __( 'Reset', 'flexible-table-block' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
 				<div className="ftb-border-spacing-control__controls">
 					<div className="ftb-border-spacing-control__controls-inner">
 						{ isLinked && (
@@ -156,7 +164,7 @@ export default function BorderSpacingControl( {
 						size="small"
 					/>
 				</div>
-			</div>
+			</VStack>
 		</BaseControl>
 	);
 }
diff --git a/src/controls/border-style-control.tsx b/src/controls/border-style-control.tsx
@@ -12,8 +12,12 @@ import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
+	Flex,
+	FlexBlock,
+	FlexItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -115,13 +119,17 @@ export default function BorderStyleControl( {
 
 	return (
 		<BaseControl className="ftb-border-style-control" help={ help } __nextHasNoMarginBottom>
-			<div aria-labelledby={ headingId } role="region">
-				<div className="ftb-border-style-control__header">
-					<Text id={ headingId }>{ controlLabel }</Text>
-					<Button variant="secondary" onClick={ handleOnReset } size="small">
-						{ __( 'Reset', 'flexible-table-block' ) }
-					</Button>
-				</div>
+			<VStack aria-labelledby={ headingId } role="region">
+				<Flex>
+					<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
+						{ controlLabel }
+					</Text>
+					<FlexItem>
+						<Button variant="secondary" onClick={ handleOnReset } size="small">
+							{ __( 'Reset', 'flexible-table-block' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
 				<div className="ftb-border-style-control__button-controls">
 					<div className="ftb-border-style-control__button-controls-inner">
 						{ isLinked && (
@@ -180,7 +188,7 @@ export default function BorderStyleControl( {
 						/>
 					) }
 				</div>
-			</div>
+			</VStack>
 		</BaseControl>
 	);
 }
diff --git a/src/controls/border-width-control.tsx b/src/controls/border-width-control.tsx
@@ -12,6 +12,10 @@ import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
+	Flex,
+	FlexBlock,
+	FlexItem,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -136,13 +140,17 @@ export default function BorderWidthControl( {
 
 	return (
 		<BaseControl className="ftb-border-width-control" help={ help } __nextHasNoMarginBottom>
-			<div aria-labelledby={ headingId } role="region">
-				<div className="ftb-border-width-control__header">
-					<Text id={ headingId }>{ label }</Text>
-					<Button variant="secondary" onClick={ handleOnReset } size="small">
-						{ __( 'Reset', 'flexible-table-block' ) }
-					</Button>
-				</div>
+			<VStack aria-labelledby={ headingId } role="region">
+				<Flex>
+					<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
+						{ label }
+					</Text>
+					<FlexItem>
+						<Button variant="secondary" onClick={ handleOnReset } size="small">
+							{ __( 'Reset', 'flexible-table-block' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
 				<div className="ftb-border-width-control__header-control">
 					{ hasIndicator && (
 						<SideIndicatorControl sides={ side === undefined ? undefined : [ side ] } />
@@ -182,7 +190,7 @@ export default function BorderWidthControl( {
 						) ) }
 					</div>
 				) }
-			</div>
+			</VStack>
 		</BaseControl>
 	);
 }
diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx
@@ -13,9 +13,13 @@ import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
+	Flex,
+	FlexBlock,
+	FlexItem,
 	Popover,
 	ColorPalette,
 	SlotFillProvider,
+	__experimentalVStack as VStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 } from '@wordpress/components';
@@ -70,13 +74,17 @@ export default function ColorControl( {
 	return (
 		<SlotFillProvider>
 			<BaseControl className="ftb-color-control" help={ help } __nextHasNoMarginBottom>
-				<div aria-labelledby={ headingId } role="region">
-					<div className="ftb-color-control__header">
-						<Text id={ headingId }>{ label }</Text>
-						<Button variant="secondary" onClick={ handleOnReset } size="small">
-							{ __( 'Reset', 'flexible-table-block' ) }
-						</Button>
-					</div>
+				<VStack aria-labelledby={ headingId } role="region">
+					<Flex>
+						<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
+							{ label }
+						</Text>
+						<FlexItem>
+							<Button variant="secondary" onClick={ handleOnReset } size="small">
+								{ __( 'Reset', 'flexible-table-block' ) }
+							</Button>
+						</FlexItem>
+					</Flex>
 					<ColorIndicatorButton
 						label={ __( 'Color', 'flexible-table-block' ) }
 						value={ value }
@@ -95,7 +103,7 @@ export default function ColorControl( {
 							</Spacer>
 						</Popover>
 					) }
-				</div>
+				</VStack>
 				{ /* @ts-ignore Slot is not currently typed on Popover */ }
 				<Popover.Slot />
 			</BaseControl>

diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx
@@ -12,6 +12,10 @@ import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
+	Flex,
+	FlexBlock,
+	FlexItem,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -107,13 +111,17 @@ export default function PaddingControl( {
 
 	return (
 		<BaseControl className="ftb-padding-control" help={ help } __nextHasNoMarginBottom>
-			<div aria-labelledby={ headingId } role="region">
-				<div className="ftb-padding-control__header">
-					<Text id={ headingId }>{ label }</Text>
-					<Button variant="secondary" onClick={ handleOnReset } size="small">
-						{ __( 'Reset', 'flexible-table-block' ) }
-					</Button>
-				</div>
+			<VStack aria-labelledby={ headingId } role="region">
+				<Flex>
+					<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
+						{ label }
+					</Text>
+					<FlexItem>
+						<Button variant="secondary" onClick={ handleOnReset } size="small">
+							{ __( 'Reset', 'flexible-table-block' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
 				<div className="ftb-padding-control__header-control">
 					<SideIndicatorControl sides={ side === undefined ? undefined : [ side ] } />
 					{ isLinked && (
@@ -149,7 +157,7 @@ export default function PaddingControl( {
 						) ) }
 					</div>
 				) }
-			</div>
+			</VStack>
 		</BaseControl>
 	);
 }
diff --git a/src/controls/style.scss b/src/controls/style.scss
@@ -1,25 +1,3 @@
-// Header common styles.
-.ftb-border-radius-control__header,
-.ftb-border-width-control__header,
-.ftb-border-style-control__header,
-.ftb-border-spacing-control__header,
-.ftb-border-color-control__header,
-.ftb-padding-control__header,
-.ftb-color-control__header {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-	justify-content: space-between;
-	padding-bottom: 8px;
-
-	.components-text {
-		font-size: 11px;
-		font-weight: 500;
-		line-height: 1.4;
-		text-transform: uppercase;
-	}
-}
-
 // Linked button common styles.
 .ftb-border-radius-control__header-linked-button,
 .ftb-border-width-control__header-linked-button,
@@ -41,7 +19,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	min-height: 40px;
+	min-height: 40px !important;
 
 	.components-unit-control-wrapper {
 		max-width: 104px;