Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ColorPalette: show Clear button even when colors array is empty #46001

Merged
merged 10 commits into from
Nov 26, 2022

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Nov 23, 2022

What?

Fixes #45928 by showing the Clear button in ColorPalette even when the array of colors is empty.

Why?

Fixing a regression introduced in #44632

How?

  • Removed the check that was forcing the component not to render CircularOptionPicker, which was effectively the source of the regression
  • Fixed an issue in the Storybook example, which was causing the example to crash when colors=[]
  • Added a unit test to prevent this regression from happening again
  • In the process, tidied up a little the unit tests file (including changing example colors to be less US-centric)

Testing Instructions

Screenshots

Before (trunk) After (this PR)
Screenshot 2022-11-23 at 12 41 09 Screenshot 2022-11-23 at 12 40 33

@ciampo ciampo added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Nov 23, 2022
@ciampo ciampo self-assigned this Nov 23, 2022
@codesandbox
Copy link

codesandbox bot commented Nov 23, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@ciampo ciampo changed the title Fix/color palette clear button ColorPalette: show Clear button even when colors array is empty Nov 23, 2022
Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

Tests well and code looks good 🚀 Thanks for the fix!

packages/components/src/color-palette/test/index.tsx Outdated Show resolved Hide resolved
@tyxla
Copy link
Member

tyxla commented Nov 23, 2022

Note that the failing check is not related to this PR and I've filed a fix for it in #45999.

Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Thanks for the quick fix!

packages/components/src/color-palette/stories/index.tsx Outdated Show resolved Hide resolved
Comment on lines 48 to 56
const asColorObject = ( args.colors as ColorObject[] )?.[ 0 ].color;
let asPaletteObject;

if ( ( args.colors as PaletteObject[] )[ 0 ].colors?.length ) {
asPaletteObject = ( args.colors as PaletteObject[] )[ 0 ]
.colors[ 0 ].color;
}

initialColor = asColorObject || asPaletteObject;
Copy link
Member

Choose a reason for hiding this comment

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

I personally find it more readable if we just added some question marks to the original code — what do you think?

	const initialColor =
		( args.colors as ColorObject[] )?.[ 0 ]?.color ||
		( args.colors as PaletteObject[] )?.[ 0 ]?.colors[ 0 ].color;

FWIW I'm also fine with removing this "initial color" selection logic altogether. It's not part of the default component logic, and it's probably not a common use case either.

Copy link
Contributor Author

@ciampo ciampo Nov 25, 2022

Choose a reason for hiding this comment

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

I'd rather remove it altogether, to be honest — done in 5be28fb

@ciampo ciampo force-pushed the fix/color-palette-clear-button branch from 66fe642 to 5be28fb Compare November 25, 2022 23:17
@ciampo ciampo enabled auto-merge (squash) November 25, 2022 23:17
@ciampo ciampo merged commit 0b1998c into trunk Nov 26, 2022
@ciampo ciampo deleted the fix/color-palette-clear-button branch November 26, 2022 11:45
@github-actions github-actions bot added this to the Gutenberg 14.7 milestone Nov 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ColorPalette: Clear button doesn't show when default colors array is empty
3 participants