Simplify color control (#220)

* Refactor: simplify ColorControl component * Change indicator label * Fix e2e test
t-hamano · Oct 20, 2024 · 67ec55a · 67ec55a
1 parent ca37ee7
commit 67ec55a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 29 deletions.
diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx
@@ -76,28 +76,22 @@ export default function ColorControl( {
 							{ __( 'Reset', 'flexible-table-block' ) }
 						</Button>
 					</div>
-					<div className="ftb-color-control__controls">
-						<div className="ftb-color-control__controls-inner">
-							<div className="ftb-color-control__controls-row">
-								<ColorIndicatorButton
-									label={ __( 'All', 'flexible-table-block' ) }
-									value={ value }
-									onClick={ handleOnPickerOpen }
-									isNone={ ! value }
-									isTransparent={ value === 'transparent' }
-								/>
-								{ isPickerOpen && (
-									<Popover className="ftb-color-control__popover" onClose={ handleOnPickerClose }>
-										<ColorPalette
-											colors={ [ ...colors, ...colorsProp ] }
-											value={ value || '' }
-											onChange={ handleOnChange }
-										/>
-									</Popover>
-								) }
-							</div>
-						</div>
-					</div>
+					<ColorIndicatorButton
+						label={ __( 'Color', 'flexible-table-block' ) }
+						value={ value }
+						onClick={ handleOnPickerOpen }
+						isNone={ ! value }
+						isTransparent={ value === 'transparent' }
+					/>
+					{ isPickerOpen && (
+						<Popover className="ftb-color-control__popover" onClose={ handleOnPickerClose }>
+							<ColorPalette
+								colors={ [ ...colors, ...colorsProp ] }
+								value={ value || '' }
+								onChange={ handleOnChange }
+							/>
+						</Popover>
+					) }
 				</div>
 				{ /* @ts-ignore Slot is not currently typed on Popover */ }
 				<Popover.Slot />

diff --git a/src/controls/style.scss b/src/controls/style.scss
@@ -192,7 +192,6 @@
 
 // Controls styles.
 .ftb-border-color-control__controls,
-.ftb-color-control__controls,
 .ftb-border-spacing-control__controls {
 	display: flex;
 	align-items: flex-start;
@@ -213,7 +212,6 @@
 
 // Controls row styles.
 .ftb-border-color-control__controls-row,
-.ftb-color-control__controls-row,
 .ftb-border-spacing-control__controls-row {
 	display: flex;
 	align-items: center;

diff --git a/test/e2e/specs/global-setting.spec.ts b/test/e2e/specs/global-setting.spec.ts
@@ -49,7 +49,7 @@ test.describe( 'Global Setting', () => {
 		for ( let i = 0; i < tableColors.length; i++ ) {
 			await page
 				.getByRole( 'dialog', { name: 'Flexible Table Block Global setting' } )
-				.getByRole( 'button', { name: 'All' } )
+				.getByRole( 'button', { name: 'Color' } )
 				.nth( i )
 				.click();
 			await pageUtils.pressKeys( 'Enter' );
@@ -69,7 +69,7 @@ test.describe( 'Global Setting', () => {
 		for ( let i = 0; i < cellColors.length; i++ ) {
 			await page
 				.getByRole( 'dialog', { name: 'Flexible Table Block Global setting' } )
-				.getByRole( 'button', { name: 'All' } )
+				.getByRole( 'button', { name: 'Color' } )
 				.nth( i )
 				.click();
 			await pageUtils.pressKeys( 'Enter' );
@@ -82,7 +82,7 @@ test.describe( 'Global Setting', () => {
 		await page.getByRole( 'spinbutton', { name: 'Right' } ).fill( '2' );
 		await page.getByRole( 'spinbutton', { name: 'Bottom' } ).fill( '3' );
 		await page.getByRole( 'spinbutton', { name: 'Left' } ).fill( '4' );
-		// Change cell border with.
+		// Change cell border width.
 		await page.getByRole( 'spinbutton', { name: 'All' } ).fill( '2' );
 		// Change cell border style.
 		await page.getByRole( 'button', { name: 'Dotted' } ).click();

diff --git a/test/e2e/specs/table-style.spec.ts b/test/e2e/specs/table-style.spec.ts
@@ -24,7 +24,7 @@ async function applyCellStyles( page, pageUtils ) {
 	const cellTextColorId = await page.getByText( 'Cell text color' ).getAttribute( 'id' );
 	await page
 		.locator( `[aria-labelledby="${ cellTextColorId }"]` )
-		.getByRole( 'button', { name: 'All' } )
+		.getByRole( 'button', { name: 'Color' } )
 		.click();
 	await pageUtils.pressKeys( 'Enter' );
 	await page.getByRole( 'textbox', { name: 'Hex color' } ).fill( '111111' );
@@ -34,7 +34,7 @@ async function applyCellStyles( page, pageUtils ) {
 		.getAttribute( 'id' );
 	await page
 		.locator( `[aria-labelledby="${ cellBackgroundColorId }"]` )
-		.getByRole( 'button', { name: 'All' } )
+		.getByRole( 'button', { name: 'Color' } )
 		.click();
 	await pageUtils.pressKeys( 'Enter' );
 	await page.getByRole( 'textbox', { name: 'Hex color' } ).fill( '333333' );