diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx index 2a5bd8f..43678e9 100644 --- a/src/controls/color-control.tsx +++ b/src/controls/color-control.tsx @@ -76,28 +76,22 @@ export default function ColorControl( { { __( 'Reset', 'flexible-table-block' ) } -
-
-
- - { isPickerOpen && ( - - - - ) } -
-
-
+ + { isPickerOpen && ( + + + + ) } { /* @ts-ignore Slot is not currently typed on Popover */ } diff --git a/src/controls/style.scss b/src/controls/style.scss index 65284bc..b3be1b2 100644 --- 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 index 1a157b1..8abeb8b 100644 --- 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 index ca64d4e..992103a 100644 --- 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' );