Skip to content

Commit

Permalink
Fix usage of tooltip in the Circular option picker. (#68602)
Browse files Browse the repository at this point in the history 
* Fix usage of tooltip in the Circular option picker.

* Add changelog entry.

* Adjust tests.

* Adjust more tests.

* Adjust one more test.

* Update test snapshot.

* Adjust more tests.

* Adjust more tests.

* Adjust one more test.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
  • Loading branch information
@afercia @Mamaduka
3 people authored Jan 14, 2025
1 parent 994bc80 commit 130b6e2
Show file tree
Hide file tree
Showing 21 changed files with 72 additions and 69 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
class="components-circular-option-picker__option-wrapper"
>
<button
aria-label="Color: red"
aria-label="red"
aria-selected="true"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
data-active-item="true"
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/colors-gradients/test/control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ describe( 'ColorPaletteControl', () => {
).toBeInTheDocument();

// Is showing the two predefined Colors.
expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
} );

it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
Expand Down Expand Up @@ -80,7 +80,7 @@ describe( 'ColorPaletteControl', () => {
).not.toBeInTheDocument();

// Is showing the two predefined Colors.
expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
} );

it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
Expand Down
14 changes: 7 additions & 7 deletions packages/block-library/src/cover/test/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ async function setup( attributes, useCoreBlocks, customSettings ) {
async function createAndSelectBlock() {
await userEvent.click(
screen.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} )
);
await userEvent.click(
Expand All @@ -73,7 +73,7 @@ describe( 'Cover block', () => {
test( 'can set overlay color using color picker on block placeholder', async () => {
const { container } = await setup();
const colorPicker = screen.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} );
await userEvent.click( colorPicker );
const color = colorPicker.style.backgroundColor;
Expand All @@ -97,7 +97,7 @@ describe( 'Cover block', () => {

await userEvent.click(
screen.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} )
);

Expand Down Expand Up @@ -390,7 +390,7 @@ describe( 'Cover block', () => {
test( 'should toggle is-light class if background changed from light to dark', async () => {
await setup();
const colorPicker = screen.getByRole( 'option', {
name: 'Color: White',
name: 'White',
} );
await userEvent.click( colorPicker );

Expand All @@ -406,15 +406,15 @@ describe( 'Cover block', () => {
);
await userEvent.click( screen.getByText( 'Overlay' ) );
const popupColorPicker = screen.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} );
await userEvent.click( popupColorPicker );
expect( coverBlock ).not.toHaveClass( 'is-light' );
} );
test( 'should remove is-light class if overlay color is removed', async () => {
await setup();
const colorPicker = screen.getByRole( 'option', {
name: 'Color: White',
name: 'White',
} );
await userEvent.click( colorPicker );
const coverBlock = screen.getByLabelText( 'Block: Cover' );
Expand All @@ -429,7 +429,7 @@ describe( 'Cover block', () => {
// The default color is black, so clicking the black color option will remove the background color,
// which should remove the isDark setting and assign the is-light class.
const popupColorPicker = screen.getByRole( 'option', {
name: 'Color: White',
name: 'White',
} );
await userEvent.click( popupColorPicker );
expect( coverBlock ).not.toHaveClass( 'is-light' );
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

### Bug Fixes

- `CircularOptionPicker`, `ColorPalette`: Fix usage of tooltip in the Circular option picker. ([#68602](https://github.com/WordPress/gutenberg/pull/68602)).
- `InputControl`: Ensures email and url inputs have consistent LTR alignment in RTL languages ([#68188](https://github.com/WordPress/gutenberg/pull/68188)).

## 29.1.0 (2025-01-02)
Expand Down
16 changes: 12 additions & 4 deletions packages/components/src/border-control/test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
/**
* External dependencies
*/
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import {
fireEvent,
render,
screen,
waitFor,
within,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
Expand Down Expand Up @@ -56,7 +62,7 @@ const getButton = ( name ) => {
};

const getColorOption = ( color ) => {
return screen.getByRole( 'option', { name: `Color: ${ color }` } );
return screen.getByRole( 'option', { name: `${ color }` } );
};

const queryButton = ( name ) => {
Expand Down Expand Up @@ -131,9 +137,11 @@ describe( 'BorderControl', () => {
await openPopover( user );

const customColorPicker = getButton( /Custom color picker/ );
const colorSwatchButtons = screen.getAllByRole( 'option', {
name: /^Color:/,
const circularOptionPicker = screen.getByRole( 'listbox', {
name: 'Custom color picker.',
} );
const colorSwatchButtons =
within( circularOptionPicker ).getAllByRole( 'option' );
const styleLabel = screen.getByText( 'Style' );
const solidButton = getButton( 'Solid' );
const dashedButton = getButton( 'Dashed' );
Expand Down
3 changes: 1 addition & 2 deletions packages/components/src/circular-option-picker/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const Example = () => {
style={ { backgroundColor: color, color } }
isSelected={ index === currentColor }
onClick={ () => setCurrentColor( index ) }
aria-label={ name }
/>
);
} ) }
Expand Down Expand Up @@ -150,6 +149,6 @@ Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.

Props for the underlying `Button` component.

Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`.
Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`.

- Required: No
27 changes: 17 additions & 10 deletions packages/components/src/circular-option-picker/circular-option-picker-option.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,24 @@ import { Icon, check } from '@wordpress/icons';
import { CircularOptionPickerContext } from './circular-option-picker-context';
import Button from '../button';
import { Composite } from '../composite';
import Tooltip from '../tooltip';
import type { OptionProps } from './types';

function UnforwardedOptionAsButton(
props: {
id?: string;
className?: string;
isPressed?: boolean;
label?: string;
},
forwardedRef: ForwardedRef< any >
) {
const { isPressed, ...additionalProps } = props;
const { isPressed, label, ...additionalProps } = props;
return (
<Button
{ ...additionalProps }
aria-pressed={ isPressed }
ref={ forwardedRef }
label={ label }
/>
);
}
Expand All @@ -45,10 +46,11 @@ function UnforwardedOptionAsOption(
id: string;
className?: string;
isSelected?: boolean;
label?: string;
},
forwardedRef: ForwardedRef< any >
) {
const { id, isSelected, ...additionalProps } = props;
const { id, isSelected, label, ...additionalProps } = props;

const { setActiveId, activeId } = useContext( CircularOptionPickerContext );

Expand All @@ -69,6 +71,7 @@ function UnforwardedOptionAsOption(
role="option"
aria-selected={ !! isSelected }
ref={ forwardedRef }
label={ label }
/>
}
id={ id }
Expand Down Expand Up @@ -100,9 +103,17 @@ export function Option( {

const isListbox = setActiveId !== undefined;
const optionControl = isListbox ? (
<OptionAsOption { ...commonProps } isSelected={ isSelected } />
<OptionAsOption
{ ...commonProps }
label={ tooltipText }
isSelected={ isSelected }
/>
) : (
<OptionAsButton { ...commonProps } isPressed={ isSelected } />
<OptionAsButton
{ ...commonProps }
label={ tooltipText }
isPressed={ isSelected }
/>
);

return (
Expand All @@ -112,11 +123,7 @@ export function Option( {
'components-circular-option-picker__option-wrapper'
) }
>
{ tooltipText ? (
<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>
) : (
optionControl
) }
{ optionControl }
{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }
</div>
);
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/circular-option-picker/circular-option-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ import {
* style={ { backgroundColor: color, color } }
* isSelected={ index === currentColor }
* onClick={ () => setCurrentColor( index ) }
* aria-label={ name }
* />
* );
* } ) }
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/circular-option-picker/stories/index.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ const DefaultOptions = () => {
onClick={ () => {
setCurrentColor?.( color );
} }
aria-label={ name }
/>
);
} ) }
Expand Down
7 changes: 0 additions & 7 deletions packages/components/src/color-palette/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,6 @@ function SinglePalette( {
onClick={
isSelected ? clearColor : () => onChange( color, index )
}
aria-label={
name
? // translators: %s: The name of the color e.g: "vivid red".
sprintf( __( 'Color: %s' ), name )
: // translators: %s: color hex code e.g: "#f00".
sprintf( __( 'Color code: %s' ), color )
}
/>
);
} );
Expand Down
10 changes: 2 additions & 8 deletions packages/components/src/color-palette/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,7 @@ describe( 'ColorPalette', () => {
/>
);

expect(
screen.getAllByRole( 'option', { name: /^Color:/ } )
).toHaveLength( 3 );
expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
} );

it( 'should call onClick on an active button with undefined', async () => {
Expand All @@ -67,9 +65,7 @@ describe( 'ColorPalette', () => {
/>
);

await user.click(
screen.getByRole( 'option', { name: /^Color:/, selected: true } )
);
await user.click( screen.getByRole( 'option', { selected: true } ) );

expect( onChange ).toHaveBeenCalledTimes( 1 );
expect( onChange ).toHaveBeenCalledWith( undefined );
Expand All @@ -91,7 +87,6 @@ describe( 'ColorPalette', () => {
// (i.e. a button representing a color that is not the current color)
await user.click(
screen.getAllByRole( 'option', {
name: /^Color:/,
selected: false,
} )[ 0 ]
);
Expand Down Expand Up @@ -230,7 +225,6 @@ describe( 'ColorPalette', () => {
// Click the first unpressed button
await user.click(
screen.getAllByRole( 'option', {
name: /^Color:/,
selected: false,
} )[ 0 ]
);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/palette-edit/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ describe( 'PaletteEdit', () => {
/>
);

await click( screen.getByLabelText( 'Color: Primary' ) );
await click( screen.getByLabelText( 'Primary' ) );
const hexInput = screen.getByRole( 'textbox', {
name: 'Hex color',
} );
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/specs/editor/blocks/buttons.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,11 +295,11 @@ test.describe( 'Buttons', () => {
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
);
await page.click( 'role=option[name="Color: Cyan bluish gray"i]' );
await page.click( 'role=option[name="Cyan bluish gray"i]' );
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
);
await page.click( 'role=option[name="Color: Vivid red"i]' );
await page.click( 'role=option[name="Vivid red"i]' );

// Check the content.
const content = await editor.getEditedPostContent();
Expand Down
10 changes: 5 additions & 5 deletions test/e2e/specs/editor/blocks/cover.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ test.describe( 'Cover', () => {

// Locate the Black color swatch.
const blackColorSwatch = coverBlock.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} );
await expect( blackColorSwatch ).toBeVisible();

Expand Down Expand Up @@ -106,7 +106,7 @@ test.describe( 'Cover', () => {
// a functioning block.
await coverBlock
.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} )
.click();

Expand All @@ -129,7 +129,7 @@ test.describe( 'Cover', () => {
} );
await coverBlock
.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} )
.click();

Expand Down Expand Up @@ -241,7 +241,7 @@ test.describe( 'Cover', () => {
// a functioning block.
await coverBlock
.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} )
.click();

Expand All @@ -267,7 +267,7 @@ test.describe( 'Cover', () => {
// a functioning block.
await secondCoverBlock
.getByRole( 'option', {
name: 'Color: Black',
name: 'Black',
} )
.click();

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/editor/blocks/heading.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ test.describe( 'Heading', () => {

await page
.getByRole( 'option', {
name: 'Color: Luminous vivid orange',
name: 'Luminous vivid orange',
} )
.click();

Expand Down
Loading

1 comment on commit 130b6e2

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 130b6e2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12765223834
📝 Reported issues:

Please sign in to comment.