From 21382b2ecd51e25c9709d44503fdc7fac2c4b34b Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Tue, 10 Nov 2026 16:56:11 -0300 Subject: [PATCH 1/3] 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 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. --- src/components/Button/README.md | 21 ++++++++++ src/components/Button/component.stories.tsx | 46 +++++++++++++++++++-- src/components/Button/component.tsx | 40 ++++++++++++++++-- src/components/Button/constants.ts | 11 +++++ src/components/Button/styles.ts | 27 ++++++++++++ src/components/Button/type.ts | 10 +++++ 6 files changed, 148 insertions(+), 7 deletions(-) diff --git a/src/components/Button/README.md b/src/components/Button/README.md index 5c77aa3..674953b 100644 --- a/src/components/Button/README.md +++ b/src/components/Button/README.md @@ -71,6 +71,26 @@ import { BBButton } from 'bbb-ui-components-react'; (console.log('clicked'))}/> ``` +### Long Labels + +`labelOverflow` sets what happens when the label doesn't fit the button's available width, for example a `fullWidth` button in a narrow container or a row of equal-width buttons. It has no visible effect while the label fits. + +- `nowrap` (default): the label stays on one line. The button grows to fit it, or the label overflows when the button can't grow. +- `wrap`: the label breaks onto more lines, making the button taller. +- `ellipsis`: the label is truncated with an ellipsis, and the button can shrink below its label's width as a flex item. While truncated, hovering or focusing the button shows the full label in a tooltip, unless `tooltipLabel` is set. + +```jsx +import styled from 'styled-components'; +import { BBButton } from 'bbb-ui-components-react'; + +const RoomActionButton = styled(BBButton)` + flex: 1 1 10rem; +`; + + (console.log('clicked'))}/> + (console.log('clicked'))}/> +``` + ### Extending with `styled()` `className` is forwarded to the root element (the `