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

PaletteEdit: Add appropriate size props to Buttons #66590

Merged
merged 4 commits into from
Oct 30, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
### Enhancements

- `PaletteEdit`: use `Item` internally instead of custom styles ([#66164](https://github.com/WordPress/gutenberg/pull/66164)).
- `PaletteEdit`: Add appropriate size props to Buttons ([#66590](https://github.com/WordPress/gutenberg/pull/66590)).

### Experimental

Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/palette-edit/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,7 @@ function Option< T extends PaletteElement >( {
<Item ref={ setPopoverAnchor } size="small">
<HStack justify="flex-start">
<Button
size="small"
Copy link
Member Author

Choose a reason for hiding this comment

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

I can't tell if there's any intentionality to the height of these rows. @WordPress/gutenberg-design Is the natural height resulting from this fix acceptable, or do we want to maintain a certain row height?

Before After
PaletteEdit in edit mode, before PaletteEdit in edit mode, after

Copy link
Contributor

Choose a reason for hiding this comment

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

This predates my involvement so I can't comment with confidence on the intentionality. Aiming for 40px rows seems acceptable to me though.

This whole UI likely needs to be revisited and standardised at some point.

Copy link
Member Author

Choose a reason for hiding this comment

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

Ok, let's leave it like this for now until we have time to revisit.

onClick={ () => {
setIsEditingColor( true );
} }
Expand Down Expand Up @@ -501,6 +502,7 @@ export function PaletteEdit( {
<NavigableMenu role="menu">
{ ! isEditing && (
<Button
__next40pxDefaultSize
variant="tertiary"
onClick={ () => {
setIsEditing( true );
Expand All @@ -513,6 +515,7 @@ export function PaletteEdit( {
) }
{ ! canOnlyChangeValues && (
<Button
__next40pxDefaultSize
variant="tertiary"
onClick={ () => {
setEditingElement(
Expand All @@ -535,6 +538,8 @@ export function PaletteEdit( {
) }
{ canReset && (
<Button
__next40pxDefaultSize
className="components-palette-edit__menu-button"
Comment on lines +541 to +542
Copy link
Member Author

Choose a reason for hiding this comment

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

The last menu item is visible when the canReset prop is enabled. It was also missing a CSS class that set the width to 100%.

Before After
PaletteEdit dropdown, before PaletteEdit dropdown, after

Copy link
Member

Choose a reason for hiding this comment

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

Classname addition makes sense to resolve this.

I just wonder if these buttons make sense to be menu items instead of buttons?

Not something to block the PR of course.

Copy link
Member Author

Choose a reason for hiding this comment

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

Right, it looks like this could be a DropdownMenu.

@ciampo Should we add any new dropdown instances using DropdownMenuV2, or should we still use v1 until it's a bit more stable?

Copy link
Contributor

Choose a reason for hiding this comment

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

Let's keep v1 for now, but use this as a place where we can use v2 soon (probably as soon as #66383 is merged)

Copy link
Contributor

Choose a reason for hiding this comment

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

Related to #61094

variant="tertiary"
onClick={ () => {
setEditingElement(
Expand Down
Loading