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.

Sign up for GitHub

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

Site Editor: Unify the delete button style in the dropdown menu with red #52597

Merged
merged 4 commits into from
Aug 21, 2023
Merged

Site Editor: Unify the delete button style in the dropdown menu with red #52597

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
323b05c
Site Editor: Unify the delete button style in the dropdown menu with red
t-hamano Jul 13, 2023
5aa5a56
Merge branch 'trunk' into a11y/site-editor-dropdown-delete
t-hamano Jul 14, 2023
ba78ab7
Add isTertiary prop form delete-page-menu-item
t-hamano Jul 14, 2023
f0ce8ee
Fix conflicts
t-hamano Aug 16, 2023
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
2 changes: 2 additions & 0 deletions packages/edit-site/src/components/page-patterns/grid-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,8 @@ function GridItem( { categoryId, item, ...props } ) {
/>
{ isCustomPattern && (
<MenuItem
isDestructive={ ! hasThemeFile }
isTertiary={ ! hasThemeFile }
Copy link
Member

Choose a reason for hiding this comment

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

Same here.

onClick={ () =>
setIsDeleteDialogOpen( true )
}
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ export default function ScreenNavigationMoreMenu( props ) {
>
{ __( 'Duplicate' ) }
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItem
isDestructive
isTertiary
Copy link
Member

Choose a reason for hiding this comment

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

Do we need isTertiary here? The other menu items I checked don't have this prop, and it adds different background on hover.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Do we need isTertiary here?

I think isTertialy prop is necessary. Because without this prop, the border will be drawn even if there is no focus.

isTertialy=false

tertialy_false.mp4

isTertiary=true

tertialy_true.mp4

I checked the code base again and noticed that there is only one Delete button that does not have the isTertiary prop. It's the page delete button. Therefore, I added the isTertiary prop to this button as well.

My feeling is that the default red border is unnecessary, what do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

My feeling is that the default red border is unnecessary, what do you think?

I'm not a designer :) but I'd say I agree it's unnecessary. Thanks for working on this ❤️

Copy link
Member

Choose a reason for hiding this comment

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

Marking for design feedback. The "tertiary" variation changes the background on hover, which doesn't happen with other buttons. It could be out of place.

Cc @jameskoster, @richtabor

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the ping.

Neither of these seem quite right to me... The $theme color background when hovering destructive tertiary buttons looks a bit strange with the red text. But I also agree that the border that appears when the button is not tertiary seems heavy-handed and unnecessary.

I'd be inclined to update the latter. IE remove the box-shadow applied to .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link). Then we can remove isTertiary here.

When a destructive button with an outline is required, isSecondary can handle that use case.

Side note: I've seen it suggested elsewhere to remove the red styling on destructive buttons altogether, as it is not a globally appropriate color. Still, getting everything into a consistent state from which we can later refine seems like a good change to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

remove the box-shadow applied to .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link). Then we can remove isTertiary here.

This appears to be the ideal approach. Indeed, it is strange to have a border by default when in distractive state. However, should this be submitted as a separate PR for review by the component team?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, it would probably make sense to tackle that in a dedicated PR, then revisit this one.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you, then I would like to create a separate PR for the button component first.

onClick={ () => {
openDeleteModal();

Expand Down