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: Fix overflowing menu name in the navigation selector dropdown #45647

Conversation

yuliyan
Copy link
Contributor

@yuliyan yuliyan commented Nov 9, 2022

What?

This PR fixes the overflowing text in the navigation selector dropdown for menus with longer names.

Why?

It resolves the UI bug with the navigation selector dropdown reported in #45294.

How?

This PR wraps the text for the selected menu within the navigation selector dropdown toggle, so that flex and text CSS properties can be applied to avoid the overflowing.

Testing Instructions

  1. Add a new Navigation block.
  2. Create a menu with a really long name.
  3. Select the menu from the dropdown.
  4. Check if the menu name within the dropdown toggle button gets truncated instead of overflowing outside of the button.

Screenshots or screencast

Before:
CleanShot 2022-11-09 at 11 24 02

After:
CleanShot 2022-11-09 at 11 23 10

@codesandbox
Copy link

codesandbox bot commented Nov 9, 2022

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

Copy link
Contributor

@getdave getdave 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 PR. I tested it to the extreme and this is what I saw

Screen Shot 2022-11-09 at 11 43 16

The <LinkControl> component does a lot with overflow and ellipsis so perhaps there are some learnings we could take from that?

@yuliyan
Copy link
Contributor Author

yuliyan commented Nov 9, 2022

@getdave, thanks for the review. It looks like I had accidentally deleted one of the properties before committing the changes.

I've added it back so it should now be working as expected. Could you pull the changes and take another look?

@yuliyan yuliyan requested review from getdave and removed request for tellthemachines November 9, 2022 19:17
Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

Tested and works as described. Thank you for the fix 👏

Left some small changes that appeared unrelated which we should revert.

@@ -158,7 +157,7 @@ $colors-selector-size: 22px;
min-width: $colors-selector-size;
height: $colors-selector-size;
min-height: $colors-selector-size;
line-height: ( $colors-selector-size - 2 );
line-height: ($colors-selector-size - 2);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
line-height: ($colors-selector-size - 2);
line-height: ( $colors-selector-size - 2 );

This change seems unrelated.

Comment on lines 204 to 206
.wp-block-navigation
.wp-block + .block-list-appender
.block-editor-button-block-appender {
Copy link
Contributor

Choose a reason for hiding this comment

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

Seems like another unrelated formatting change we should revert

Comment on lines 392 to 394
.wp-block-navigation
.components-placeholder.is-medium
.components-placeholder__fieldset {
Copy link
Contributor

Choose a reason for hiding this comment

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

And one more unrelated formatting change...

Comment on lines 574 to 575
.wp-block-navigation
.wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
Copy link
Contributor

Choose a reason for hiding this comment

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

And one more.

@getdave getdave enabled auto-merge (squash) November 9, 2022 21:38
@getdave getdave merged commit edafbbf into WordPress:trunk Nov 9, 2022
@github-actions github-actions bot added this to the Gutenberg 14.6 milestone Nov 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants