ResizableBox: Ensure tooltip text remains on a single line #39623
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
andrewserong
added
[Type] Bug
|
Size Change: +12 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
ciampo
approved these changes
Mar 22, 2022
andrewserong
deleted the
update/resizable-box-tooltip-to-keep-text-on-one-line
branch
jostnes
pushed a commit
to jostnes/gutenberg
that referenced
this pull request
Mar 23, 2022
…#39623) * ResizableBox: Ensure tooltip text remains on a single line * Add changelog entry
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
In this small PR, we update the
ResizableBoxtooltip to ensure that the text does not wrap, to keep the text on a single line.Why?
While testing #39577, I noticed that in the horizontal configuration of the Spacer block, that when we resize the block to be quite small, the tooltip text wraps to multiple lines.
How?
Given that the tooltip text will always be very small for this control, I thought that it's probably pretty safe to ensure that it never wraps, rather than add a more complex min width value. But, happy to go with a different approach if folks prefer!
Testing Instructions
Test in storybook by running
npm run storybook:devand then go to http://localhost:50240/?path=/story/components-resizablebox--default — you'll likely need to open up the Knobs tab, set__experimentalShowTooltiptotrueand set the minimum width to0to be able to test how this looks.For real world usage, open up the post editor and add a Navigation block containing a variety of blocks (e.g. a link + a site logo) to enable adding arbitrary blocks to it. Then, add a spacer block. Adjust the spacer block using the resizer control and observe that the tooltip text should now be on a single line.
Screenshots or screencast