[2.x] fix: restore text-overflow: ellipsis on long button labels - #4628
Merged
Conversation
Since #4174 added display: flex to .Button-label (so helper text could stack below the label), text-overflow: ellipsis stopped working — flex containers don't honor it on themselves. Move overflow/text-overflow to the inner .Button-labelText span, and add min-width: 0 to .Button-label so the flex chain can shrink below content size when the parent applies shrink force. For SplitDropdown, the main-action button sits inside a ButtonGroup where .ButtonGroup > .Button has flex-shrink: 0 — so even with the above, the button would still grow past the group's max-width. Override flex-shrink/min-width on .SplitDropdown-button only, leaving other ButtonGroup uses (post controls, admin permission grids) unchanged. Fixes #4621
This file contains hidden or 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
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.
Summary
Restores
text-overflow: ellipsison long button labels — regressed in #4174 whendisplay: flex; flex-direction: column;was added to.Button-labelto stack helper text below the label.Flex containers don't honor
text-overflow: ellipsison themselves, so labels stopped truncating and started overflowing their containers.Fixes #4621
Changes
Button.less— moved truncation to the inner span:overflow: hidden; text-overflow: ellipsis;from.Button-label..Button-labelTextblock — that's the<span>already rendered inside every.Button-label(Button.tsx:122).min-width: 0;to.Button-labelso the flex chain can shrink below content size when its parent applies shrink force.Dropdown.less— fix for the SplitDropdown case shown in the issue:.SplitDropdown-button) sits inside a.ButtonGroup, where.ButtonGroup > .Button { flex-shrink: 0 }prevents shrinking. Without overriding that, the button would still grow past the group'smax-width: 100%..SplitDropdown-button { min-width: 0; flex-shrink: 1; }scoped under.Dropdown--split, leaving every other ButtonGroup user (post controls, admin permission grids,ExtensionNavButton) unchanged.Test plan
Reply, but much longeras in the issue) — main button truncates with…, dropdown toggle stays at fixed width.ExtensionNavButton(admin extension list with long extension name) — still truncates correctly via its existingwhite-space: nowraprule.Notes
<span class="Button-label"><span class="Button-labelText">…</span>…</span>already exists..Button-labelfor text styling still work; only the overflow behavior moves to.Button-labelText.