Repository navigation
Conversation
BBButton's default layout always keeps its label on one line (`white-space: nowrap`). When the button can't grow, for example a `fullWidth` button in a narrow popover or a row of equal-width buttons, a long label overflows the button or pushes the row wider. Consumers work around it by reaching into BBButton's markup: `white-space: normal` overrides to let the label wrap, or rules on the internal label <span> to truncate it with an ellipsis, which is not part of the public API. Add a `labelOverflow` prop to the default layout, setting what happens when the label doesn't fit the button's available width: - `nowrap` (default) keeps today's behavior, so no existing button changes. - `wrap` sets `white-space: normal` and `overflow-wrap: break-word`, so the label breaks onto more lines and a single word too long for the button breaks instead of overflowing. - `ellipsis` gives the button `min-width: 0` and `max-width: 100%`, so it can shrink as a flex item and stay within its container, and truncates the label with an ellipsis. Truncation hides part of the label from sighted users, and most such buttons have no `tooltipLabel`. While the label is actually truncated, detected with a ResizeObserver comparing scrollWidth and clientWidth, and no `tooltipLabel` is set, the full label shows as a tooltip on hover and focus. A single Tippy is kept mounted and toggled through `disabled`, so the button is not remounted (losing focus) when the truncation state changes. That tooltip sets `aria.content` to null, because the label is already the accessible name via aria-labelledby and would otherwise be announced again as a description. Separate `wrapLabel` and `truncateLabel` booleans were considered and discarded: they can be combined into a contradictory state, and a name describing the action doesn't say it only applies when the label doesn't fit. Wrapping by default was also considered; it would make buttons that overflow today taller, so it is left out of this change.
The first story in a file is the one Storybook shows in the Docs page's top preview and binds to its Controls table. For BBButton that story is Primary, which renders three buttons with fixed labels, one per color. The preview shows three buttons instead of one, and the fixed labels override the `label` control, so editing it has no visible effect. Add a Default story, rendering a single button from the story args, as the first export. Every other component in the library already starts with a Default story. Primary and the other variant stories keep their fixed labels, since they exist to compare colors and sizes side by side.
germanocaumo
suggested changes
Nov 11, 2026
germanocaumo
left a comment
germanocaumo
left a comment
Contributor
There was a problem hiding this comment.
Tested base vs head in Chromium, Firefox and WebKit. ellipsis works in a flex row, a block container and with fullWidth. The tooltip shows only while the label is truncated, and the button keeps focus as that changes. Two one-line fixes inline.
#119 changes the same <Tippy>. Whichever PR merges second should keep plugins={TOOLTIP_PLUGINS} there, so the truncated-label tooltip also closes with Escape.
feat(BBButton): add labelOverflow prop BBButton's default layout always keeps its label on one line (`white-space: nowrap`). When the button can't grow, for example a `fullWidth` button in a narrow popover or a row of equal-width buttons, a long label overflows the button or pushes the row wider. Consumers work around it by reaching into BBButton's markup: `white-space: normal` overrides to let the label wrap, or rules on the internal label <span> to truncate it with an ellipsis, which is not part of the public API. Add a `labelOverflow` prop to the default layout, setting what happens when the label doesn't fit the button's available width: - `nowrap` (default) keeps today's behavior, so no existing button changes. - `wrap` sets `white-space: normal` and `overflow-wrap: anywhere`, so the label breaks onto more lines and a single word too long for the button breaks instead of overflowing. `break-word` is not enough: it doesn't lower the button's min-content width, so a long word still widens the button past its container. - `ellipsis` gives the button `min-width: 0` and `max-width: 100%`, so it can shrink as a flex item and stay within its container, and truncates the label with an ellipsis. Truncation hides part of the label from sighted users, and most such buttons have no `tooltipLabel`. While the label is actually truncated, detected with a ResizeObserver comparing scrollWidth and clientWidth, and no `tooltipLabel` is set, the full label shows as a tooltip on hover and focus. A single Tippy is kept mounted and toggled through `disabled`, so the button is not remounted (losing focus) when the truncation state changes. That tooltip sets `aria.content` to null, because the label is already the accessible name via aria-labelledby and would otherwise be announced again as a description. `aria` is passed on every render, since Tippy keeps the previous value when the prop is omitted. Separate `wrapLabel` and `truncateLabel` booleans were considered and discarded: they can be combined into a contradictory state, and a name describing the action doesn't say it only applies when the label doesn't fit. Wrapping by default was also considered; it would make buttons that overflow today taller, so it is left out of this change.
germanocaumo
approved these changes
Nov 12, 2026
germanocaumo
left a comment
germanocaumo
left a comment
Contributor
There was a problem hiding this comment.
verified and working
This branch has not been deployed
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.
What does this PR do?
Adds a
labelOverflowprop toBBButton's default layout. It sets what happens when the label doesn't fit the button's available width.labelOverflow="nowrap"(default): keeps today's behavior. The label stays on one line, and the button grows or the label overflows. Existing buttons don't change.labelOverflow="wrap": the label breaks onto more lines, making the button taller.labelOverflow="ellipsis": the label is truncated with an ellipsis, and the button can shrink as a flex item. While the label is truncated and notooltipLabelis set, the full label shows in a tooltip.Defaultstory renders a single button driven by the controls, so the Docs page's top preview now responds to them. A newLabel Overflowstory compares the three values.Closes Issue(s)
Closes #105
Closes #106
Motivation
In a narrow container or a row of equal-width buttons, such as the BigBlueButton 4.0 breakout rooms panel, a long or translated label overflows the button or pushes the row wider. Consumers work around this today by overriding styles on
BBButton's internal markup.