Prevent menu content from wrapping by default. Fixes #56.#102
Prevent menu content from wrapping by default. Fixes #56.#102JanMiksovsky wants to merge 2 commits intoPolymerElements:masterfrom
Conversation
…ring animation. Fixes PolymerElements#56.
|
|
||
| .dropdown-content ::content > * { | ||
| /* Ensure items are full width so they don't wrap during animation. */ | ||
| white-space: nowrap; |
There was a problem hiding this comment.
Perhaps it makes aesthetic sense to also truncate with ellipsis?
There was a problem hiding this comment.
I'd recommend against doing that.
The menu is only animated for a short time, not long enough to read the text of the long menu items. By the time someone can recognize that an ellipsis indicates that some of the menu item text is currently hidden, the complete menu item text will be shown. During that interval, showing ellipsis briefly would just constitute another source of flicker, when it's the intent of this PR to reduce flicker during the animation.
Moreover, ellipses are conventionally used at the ends of menu items with a specific semantic intent: to signal that a menu item will open a dialog. Applying ellipses automatically to arbitrary menu items could lead to confusion.
|
Polygit allows for some basic configuration (docs). You can include your fork using a configuration like this: <base href="//polygit.org/paper-menu-button+janmiksovsky/components/">
<link rel="import" href="../paper-menu-button/paper-menu-button.html"> |
By turning off wrapping, items don't reflow during menu animation.
Note that, while most people will probably welcome this change, there's some risk that people have created dropdown menus that rely on wrapping.
This PR currently doesn't include a unit test, since it's exclusively styling, but let me know if one should be added. Along those same lines, I'd like to provide an update to the original repro case provided so that people can verify the fix. I had difficulty creating a jsBin that imported
paper-menu-button.htmloff this fork, but imported all other dependencies off of polygit. If there's an easy way to do that, please let me know and I'll post an updated repro.