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

Navigation: Upsize back buttons #68157

Merged
merged 2 commits into from
Dec 20, 2024
Merged

Navigation: Upsize back buttons #68157

merged 2 commits into from
Dec 20, 2024

Conversation

mirka
Copy link
Member

@mirka mirka commented Dec 19, 2024

In preparation for #65751

What?

Upsizes the back buttons (NavigationBackButton) of Navigation.

Why?

So it's consistent with the new default Button sizes, and won't log deprecation warnings when we start logging them for Button.

Testing Instructions

See Storybook for Navigation.

@mirka mirka added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Dec 19, 2024
@mirka mirka self-assigned this Dec 19, 2024
Copy link

github-actions bot commented Dec 19, 2024

Flaky tests detected in 0453580.
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/12423459183
📝 Reported issues:

Comment on lines +82 to +83
__next40pxDefaultSize:
'as' in restProps ? restProps.as === undefined : true,
Copy link
Member Author

@mirka mirka Dec 20, 2024

Choose a reason for hiding this comment

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

This is just to ensure that this usage is safe for the 40px default size, and won't log deprecation warnings. There should be no visual changes to the navigation items, as their sizes are already overridden.

Copy link
Contributor

Choose a reason for hiding this comment

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

Makes sense, we want to apply __next40pxDefaultSize only for Button.

To be extra safe, should we also set it to true when restProps.as is Button? (just in case a consumer sets it explicitly, not sure why)

Copy link
Member Author

@mirka mirka Dec 20, 2024

Choose a reason for hiding this comment

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

Good edge case thinking 😄

The reasoning here is that, if there's a Button size violation the console warning will say "wp.components.Button", even if it came from within the NavigationItem black box. That can be confusing to a consumer because for all they know, they just used a NavigationItem and may not even have a single Button instance in their code. But as long as they did an explicit as={ Button }, that Button instance comes from their own code and not from within the NavigationItem black box, and is therefore "discoverable".

@@ -49,6 +49,7 @@ function UnforwardedNavigationBackButton(
const icon = isRTL() ? chevronRight : chevronLeft;
return (
<MenuBackButtonUI
__next40pxDefaultSize
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 back buttons should now have 40px height.

Copy link
Member

Choose a reason for hiding this comment

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

They do 👍

Before After
Screenshot 2024-12-20 at 15 49 31 Screenshot 2024-12-20 at 15 49 18

@mirka mirka changed the title Navigation: Upsize buttons Navigation: Upsize back buttons Dec 20, 2024
@mirka mirka marked this pull request as ready for review December 20, 2024 00:59
@mirka mirka requested a review from ajitbohra as a code owner December 20, 2024 00:59
@mirka mirka requested a review from a team December 20, 2024 01:00
Copy link

github-actions bot commented Dec 20, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

🚀 LGTM

Left a little comment but it's not blocking.

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.

Looking good 👍

@@ -49,6 +49,7 @@ function UnforwardedNavigationBackButton(
const icon = isRTL() ? chevronRight : chevronLeft;
return (
<MenuBackButtonUI
__next40pxDefaultSize
Copy link
Member

Choose a reason for hiding this comment

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

They do 👍

Before After
Screenshot 2024-12-20 at 15 49 31 Screenshot 2024-12-20 at 15 49 18

@mirka mirka merged commit d472c16 into trunk Dec 20, 2024
71 of 72 checks passed
@mirka mirka deleted the navigation-button branch December 20, 2024 14:33
@github-actions github-actions bot added this to the Gutenberg 20.0 milestone Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants