From 563d6a21570c4792965c30a95733d44b277d0790 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Sun, 20 Oct 2024 12:57:50 +0900
Subject: [PATCH] Quality: Removed redundant BaseControl wrapper from
 UnitControl component (#225)

---
 src/editor.scss                               |  21 +-
 .../global-settings/setting-modal.tsx         |  77 +++----
 src/settings/table-caption-settings.tsx       |  48 ++--
 src/settings/table-cell-settings.tsx          | 104 ++++-----
 src/settings/table-settings.tsx               | 205 ++++++++----------
 5 files changed, 187 insertions(+), 268 deletions(-)

diff --git a/src/editor.scss b/src/editor.scss
index beaef0c..a5174f5 100644
--- a/src/editor.scss
+++ b/src/editor.scss
@@ -446,24 +446,9 @@
 }
 
 .ftb-percent-group {
-	margin-top: 8px;
-}
-
-.ftb-font-size-control,
-.ftb-width-control {
+	margin-top: -8px;
 
-	.components-input-control.components-input-control {
-		max-width: 100px;
-		margin-bottom: 0;
+	&:has(+ .components-base-control) {
+		margin-bottom: 16px;
 	}
 }
-
-.ftb-width-control .components-unit-control .components-unit-control__select {
-	background-color: transparent;
-	background-image: none;
-}
-
-.ftb-line-height-control .components-text-control__input {
-	display: block;
-	max-width: 72px;
-}
diff --git a/src/settings/global-settings/setting-modal.tsx b/src/settings/global-settings/setting-modal.tsx
index a6e6f14..b2a5627 100644
--- a/src/settings/global-settings/setting-modal.tsx
+++ b/src/settings/global-settings/setting-modal.tsx
@@ -12,7 +12,6 @@ import { createInterpolateElement, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import {
-	BaseControl,
 	Button,
 	Notice,
 	Modal,
@@ -229,54 +228,42 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 									<h2>{ __( 'Default table styles', 'flexible-table-block' ) }</h2>
 									<div className="ftb-global-setting-modal__styles">
 										<div className="ftb-global-setting-modal__styles-item">
-											<BaseControl
-												id="flexible-table-block-global-table-width"
+											<UnitControl
 												label={ __( 'Table width', 'flexible-table-block' ) }
-												className="ftb-width-control"
-												__nextHasNoMarginBottom
-											>
-												<UnitControl
-													id="flexible-table-block-global-table-width"
-													units={ tableWidthUnits }
-													value={ currentOptions.block_style?.table_width }
-													min={ 0 }
-													onChange={ ( value ) => {
-														setCurrentOptions( {
-															...currentOptions,
-															block_style: {
-																...currentOptions.block_style,
-																table_width: sanitizeUnitValue( value ),
-															},
-														} );
-													} }
-													size="__unstable-large"
-												/>
-											</BaseControl>
+												units={ tableWidthUnits }
+												value={ currentOptions.block_style?.table_width }
+												min={ 0 }
+												onChange={ ( value ) => {
+													setCurrentOptions( {
+														...currentOptions,
+														block_style: {
+															...currentOptions.block_style,
+															table_width: sanitizeUnitValue( value ),
+														},
+													} );
+												} }
+												size="__unstable-large"
+												__unstableInputWidth="100px"
+											/>
 										</div>
 										<div className="ftb-global-setting-modal__styles-item">
-											<BaseControl
-												id="flexible-table-block-global-table-max-width"
+											<UnitControl
 												label={ __( 'Table max width', 'flexible-table-block' ) }
-												className="ftb-width-control"
-												__nextHasNoMarginBottom
-											>
-												<UnitControl
-													id="flexible-table-block-global-table-max-width"
-													units={ tableWidthUnits }
-													value={ currentOptions.block_style?.table_max_width }
-													min={ 0 }
-													onChange={ ( value ) => {
-														setCurrentOptions( {
-															...currentOptions,
-															block_style: {
-																...currentOptions.block_style,
-																table_max_width: sanitizeUnitValue( value ),
-															},
-														} );
-													} }
-													size="__unstable-large"
-												/>
-											</BaseControl>
+												units={ tableWidthUnits }
+												value={ currentOptions.block_style?.table_max_width }
+												min={ 0 }
+												onChange={ ( value ) => {
+													setCurrentOptions( {
+														...currentOptions,
+														block_style: {
+															...currentOptions.block_style,
+															table_max_width: sanitizeUnitValue( value ),
+														},
+													} );
+												} }
+												size="__unstable-large"
+												__unstableInputWidth="100px"
+											/>
 										</div>
 										<div className="ftb-global-setting-modal__styles-item">
 											<ToggleGroupControl
diff --git a/src/settings/table-caption-settings.tsx b/src/settings/table-caption-settings.tsx
index 2884cfb..83ba35a 100644
--- a/src/settings/table-caption-settings.tsx
+++ b/src/settings/table-caption-settings.tsx
@@ -8,7 +8,6 @@ import type { Property, Properties } from 'csstype';
  */
 import { __ } from '@wordpress/i18n';
 import {
-	BaseControl,
 	Button,
 	Flex,
 	TextControl,
@@ -106,38 +105,25 @@ export default function TableCaptionSettings( {
 				</Button>
 			</Spacer>
 			<div className="ftb-base-control-row">
-				<BaseControl
-					id="flexible-table-block-caption-font-size"
+				<UnitControl
 					label={ __( 'Caption font size', 'flexible-table-block' ) }
-					className="ftb-font-size-control"
+					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
-				>
-					<UnitControl
-						id="flexible-table-block-caption-font-size"
-						value={ captionStylesObj?.fontSize }
-						units={ fontSizeUnits }
-						min={ 0 }
-						onChange={ onChangeFontSize }
-						size="__unstable-large"
-					/>
-				</BaseControl>
-				<BaseControl
-					id="flexible-table-block-caption-line-height"
-					className="ftb-line-height-control"
-					__nextHasNoMarginBottom
-				>
-					<TextControl
-						label={ __( 'Caption line height', 'flexible-table-block' ) }
-						autoComplete="off"
-						onChange={ onChangeLineHeight }
-						step={ 0.1 }
-						type="number"
-						value={ captionStylesObj?.lineHeight || '' }
-						min={ 0 }
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-					/>
-				</BaseControl>
+					__next40pxDefaultSize
+				/>
 			</div>
 			<PaddingControl
 				label={ __( 'Caption padding', 'flexible-table-block' ) }
diff --git a/src/settings/table-cell-settings.tsx b/src/settings/table-cell-settings.tsx
index 87e45b6..b97349f 100644
--- a/src/settings/table-cell-settings.tsx
+++ b/src/settings/table-cell-settings.tsx
@@ -223,73 +223,53 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell
 				</Button>
 			</Spacer>
 			<div className="ftb-base-control-row">
-				<BaseControl
-					id="flexible-table-block-cell-font-size"
+				<UnitControl
 					label={ __( 'Cell font size', 'flexible-table-block' ) }
-					className="ftb-font-size-control"
-					__nextHasNoMarginBottom
-				>
-					<UnitControl
-						id="flexible-table-block-cell-font-size"
-						value={ cellStylesObj?.fontSize }
-						units={ fontSizeUnits }
-						min={ 0 }
-						onChange={ onChangeFontSize }
-						size="__unstable-large"
-					/>
-				</BaseControl>
-				<BaseControl
-					id="flexible-table-block-cell-line-height"
-					className="ftb-line-height-control"
+					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
-				>
-					<TextControl
-						label={ __( 'Cell line height', 'flexible-table-block' ) }
-						value={ cellStylesObj?.lineHeight || '' }
-						autoComplete="off"
-						type="number"
-						step={ 0.1 }
-						min={ 0 }
-						onChange={ onChangeLineHeight }
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-					/>
-				</BaseControl>
+					__next40pxDefaultSize
+				/>
 			</div>
-			<BaseControl
-				id="flexible-table-block-cell-width"
+			<UnitControl
 				label={ __( 'Cell width', 'flexible-table-block' ) }
-				className="ftb-width-control"
-				__nextHasNoMarginBottom
+				value={ cellStylesObj?.width }
+				units={ cellWidthUnits }
+				min={ 0 }
+				onChange={ onChangeWidth }
+				size="__unstable-large"
+				__unstableInputWidth="calc(50% - 8px)"
+			/>
+			<ButtonGroup
+				aria-label={ __( 'Cell percentage width', 'flexible-table-block' ) }
+				className="ftb-percent-group"
 			>
-				<UnitControl
-					id="flexible-table-block-cell-width"
-					aria-label={ __( 'Cell width', 'flexible-table-block' ) }
-					value={ cellStylesObj?.width }
-					units={ cellWidthUnits }
-					min={ 0 }
-					onChange={ onChangeWidth }
-					size="__unstable-large"
-				/>
-				<ButtonGroup
-					aria-label={ __( 'Cell percentage width', 'flexible-table-block' ) }
-					className="ftb-percent-group"
-				>
-					{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
-						const isPressed = cellStylesObj?.width === `${ perWidth }%`;
-						return (
-							<Button
-								key={ perWidth }
-								variant={ isPressed ? 'primary' : undefined }
-								onClick={ () => onChangeWidth( isPressed ? '' : `${ perWidth }%` ) }
-								size="small"
-							>
-								{ `${ perWidth }%` }
-							</Button>
-						);
-					} ) }
-				</ButtonGroup>
-			</BaseControl>
+				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+					const isPressed = cellStylesObj?.width === `${ perWidth }%`;
+					return (
+						<Button
+							key={ perWidth }
+							variant={ isPressed ? 'primary' : undefined }
+							onClick={ () => onChangeWidth( isPressed ? '' : `${ perWidth }%` ) }
+							size="small"
+						>
+							{ `${ perWidth }%` }
+						</Button>
+					);
+				} ) }
+			</ButtonGroup>
 			<hr />
 			<ColorControl
 				label={ __( 'Cell text color', 'flexible-table-block' ) }
diff --git a/src/settings/table-settings.tsx b/src/settings/table-settings.tsx
index 80e218b..17fcab9 100644
--- a/src/settings/table-settings.tsx
+++ b/src/settings/table-settings.tsx
@@ -10,7 +10,6 @@ import type { Dispatch, SetStateAction } from 'react';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import {
-	BaseControl,
 	Button,
 	ButtonGroup,
 	Flex,
@@ -311,125 +310,107 @@ export default function TableSettings( {
 				__nextHasNoMarginBottom
 			/>
 			<hr />
-			<BaseControl
-				id="flexible-table-block-table-width"
+			<UnitControl
 				label={ __( 'Table width', 'flexible-table-block' ) }
-				className="ftb-width-control"
-				__nextHasNoMarginBottom
+				value={ tableStylesObj?.width }
+				units={ tableWidthUnits }
+				disabled={ tableStylesObj?.width === 'auto' }
+				min={ 0 }
+				onChange={ onChangeWidth }
+				size="__unstable-large"
+				__unstableInputWidth="calc(50% - 8px)"
+			/>
+			<ButtonGroup
+				aria-label={ __( 'Table percentage width', 'flexible-table-block' ) }
+				className="ftb-percent-group"
 			>
-				<UnitControl
-					id="flexible-table-block-table-width"
-					value={ tableStylesObj?.width }
-					units={ tableWidthUnits }
-					disabled={ tableStylesObj?.width === 'auto' }
-					min={ 0 }
-					onChange={ onChangeWidth }
-					size="__unstable-large"
-				/>
-				<ButtonGroup
-					aria-label={ __( 'Table percentage width', 'flexible-table-block' ) }
-					className="ftb-percent-group"
+				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+					const isPressed = tableStylesObj?.width === `${ perWidth }%`;
+					return (
+						<Button
+							key={ perWidth }
+							variant={ isPressed ? 'primary' : undefined }
+							onClick={ () =>
+								onChangeWidth( isPressed ? '' : sanitizeUnitValue( `${ perWidth }%` ) )
+							}
+							size="small"
+						>
+							{ `${ perWidth }%` }
+						</Button>
+					);
+				} ) }
+				<Button
+					variant={ tableStylesObj?.width === 'auto' ? 'primary' : undefined }
+					onClick={ () => onChangeWidth( tableStylesObj?.width === 'auto' ? '' : 'auto' ) }
+					size="small"
 				>
-					{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
-						const isPressed = tableStylesObj?.width === `${ perWidth }%`;
-						return (
-							<Button
-								key={ perWidth }
-								variant={ isPressed ? 'primary' : undefined }
-								onClick={ () =>
-									onChangeWidth( isPressed ? '' : sanitizeUnitValue( `${ perWidth }%` ) )
-								}
-								size="small"
-							>
-								{ `${ perWidth }%` }
-							</Button>
-						);
-					} ) }
-					<Button
-						variant={ tableStylesObj?.width === 'auto' ? 'primary' : undefined }
-						onClick={ () => onChangeWidth( tableStylesObj?.width === 'auto' ? '' : 'auto' ) }
-						size="small"
-					>
-						{ __( 'auto', 'flexible-table-block' ) }
-					</Button>
-				</ButtonGroup>
-			</BaseControl>
-			<BaseControl
-				id="flexible-table-block-table-max-width"
+					{ __( 'auto', 'flexible-table-block' ) }
+				</Button>
+			</ButtonGroup>
+			<UnitControl
 				label={ __( 'Table max width', 'flexible-table-block' ) }
-				className="ftb-width-control"
-				__nextHasNoMarginBottom
+				value={ tableStylesObj?.maxWidth }
+				units={ tableWidthUnits }
+				disabled={ tableStylesObj?.maxWidth === 'none' }
+				min={ 0 }
+				onChange={ onChangeMaxWidth }
+				size="__unstable-large"
+				__unstableInputWidth="calc(50% - 8px)"
+			/>
+			<ButtonGroup
+				aria-label={ __( 'Table percentage max width', 'flexible-table-block' ) }
+				className="ftb-percent-group"
 			>
-				<UnitControl
-					id="flexible-table-block-table-max-width"
-					value={ tableStylesObj?.maxWidth }
-					units={ tableWidthUnits }
-					disabled={ tableStylesObj?.maxWidth === 'none' }
-					min={ 0 }
-					onChange={ onChangeMaxWidth }
-					size="__unstable-large"
-				/>
-				<ButtonGroup
-					aria-label={ __( 'Table percentage max width', 'flexible-table-block' ) }
-					className="ftb-percent-group"
+				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+					const isPressed = tableStylesObj?.maxWidth === `${ perWidth }%`;
+					return (
+						<Button
+							key={ perWidth }
+							variant={ isPressed ? 'primary' : undefined }
+							onClick={ () =>
+								onChangeMaxWidth( isPressed ? '' : sanitizeUnitValue( `${ perWidth }%` ) )
+							}
+							size="small"
+						>
+							{ `${ perWidth }%` }
+						</Button>
+					);
+				} ) }
+				<Button
+					variant={ tableStylesObj?.maxWidth === 'none' ? 'primary' : undefined }
+					onClick={ () => onChangeMaxWidth( tableStylesObj?.maxWidth === 'none' ? '' : 'none' ) }
+					size="small"
 				>
-					{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
-						const isPressed = tableStylesObj?.maxWidth === `${ perWidth }%`;
-						return (
-							<Button
-								key={ perWidth }
-								variant={ isPressed ? 'primary' : undefined }
-								onClick={ () =>
-									onChangeMaxWidth( isPressed ? '' : sanitizeUnitValue( `${ perWidth }%` ) )
-								}
-								size="small"
-							>
-								{ `${ perWidth }%` }
-							</Button>
-						);
-					} ) }
-					<Button
-						variant={ tableStylesObj?.maxWidth === 'none' ? 'primary' : undefined }
-						onClick={ () => onChangeMaxWidth( tableStylesObj?.maxWidth === 'none' ? '' : 'none' ) }
-						size="small"
-					>
-						{ _x( 'none', 'width', 'flexible-table-block' ) }
-					</Button>
-				</ButtonGroup>
-			</BaseControl>
-			<BaseControl
-				id="flexible-table-block-table-min-width"
+					{ _x( 'none', 'width', 'flexible-table-block' ) }
+				</Button>
+			</ButtonGroup>
+			<UnitControl
 				label={ __( 'Table min width', 'flexible-table-block' ) }
-				className="ftb-width-control"
-				__nextHasNoMarginBottom
+				value={ tableStylesObj?.minWidth }
+				units={ tableWidthUnits }
+				min={ 0 }
+				onChange={ onChangeMinWidth }
+				size="__unstable-large"
+				__unstableInputWidth="calc(50% - 8px)"
+			/>
+			<ButtonGroup
+				aria-label={ __( 'Table percentage min width', 'flexible-table-block' ) }
+				className="ftb-percent-group"
 			>
-				<UnitControl
-					id="flexible-table-block-table-min-width"
-					value={ tableStylesObj?.minWidth }
-					units={ tableWidthUnits }
-					min={ 0 }
-					onChange={ onChangeMinWidth }
-					size="__unstable-large"
-				/>
-				<ButtonGroup
-					aria-label={ __( 'Table percentage min width', 'flexible-table-block' ) }
-					className="ftb-percent-group"
-				>
-					{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
-						const isPressed = tableStylesObj?.minWidth === `${ perWidth }%`;
-						return (
-							<Button
-								key={ perWidth }
-								variant={ isPressed ? 'primary' : undefined }
-								onClick={ () => onChangeMinWidth( isPressed ? '' : `${ perWidth }%` ) }
-								size="small"
-							>
-								{ `${ perWidth }%` }
-							</Button>
-						);
-					} ) }
-				</ButtonGroup>
-			</BaseControl>
+				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+					const isPressed = tableStylesObj?.minWidth === `${ perWidth }%`;
+					return (
+						<Button
+							key={ perWidth }
+							variant={ isPressed ? 'primary' : undefined }
+							onClick={ () => onChangeMinWidth( isPressed ? '' : `${ perWidth }%` ) }
+							size="small"
+						>
+							{ `${ perWidth }%` }
+						</Button>
+					);
+				} ) }
+			</ButtonGroup>
 			<hr />
 			<PaddingControl
 				label={ __( 'Table padding', 'flexible-table-block' ) }