Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

BBButton: let a long label wrap instead of overflowing

Đang mở
  • Có gì không ổn?
#105 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
Nửa ngày
Mức phù hợp với người mới
45/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start in src/components/Button/styles.ts, where commonButtonStyles sets white-space: nowrap, and compare it with the stacked layout's ButtonText clamp. Check how the component passes className through, since the issue relies on that. Before coding, get a maintainer decision on wrap-by-default versus an opt-in wrapLabel prop. Done means a long label wraps inside a narrow fullWidth container, short labels look unchanged, and a Storybook story or test covers both cases.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Is your feature request related to a problem? Please describe.
BBButton never wraps its label: commonButtonStyles sets white-space: nowrap. When the button can't grow, for example a fullWidth button in a narrow popover or a dialog footer on a phone, a long translation overflows the button instead of breaking onto a second line.

The BigBlueButton 4.0 client already overrides this in three places:

Since 0.9.0 forwards className, each override is a one-liner. But every consumer only finds out it needs one after a label overflows in some language.

Describe the solution you'd like
Either of these:

  • Wrap by default. BBButton is inline-flex and sizes itself to its label, so a label only wraps when its container is narrower than the label. A button with room renders exactly as today. The stacked layout already wraps: ButtonText clamps to two lines.
  • An opt-in prop, wrapLabel?: boolean, for the default layout.

The truncation request (#106) is the other answer to the same overflow. Both could share one prop, for example labelOverflow?: 'nowrap' | 'wrap' | 'ellipsis'.

Describe alternatives you've considered
styled(BBButton) with white-space: normal at each call site, which is what the client does today.

Affected component(s)
BBButton

Proposed API / Usage Example

// Wrapping by default: no change at call sites.
<BBButton label={intl.formatMessage(messages.takePresenter)} fullWidth size="sm" onClick={take} />

// Or opt-in:
<BBButton label={longLabel} fullWidth wrapLabel onClick={take} />

Additional context
A wrapped label makes the button taller, for example 37px to 56px at sm, so buttons in a row can end up with different heights. The client accepts that, because the alternative is an overflowing label.

Ngôn ngữ chính
TypeScript
Star
2
Fork
5
Merge trung bình
1 ngày 21 giờ
Pull request đã merge (30 ngày)
15

Chuẩn bị môi trường

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của bigbluebutton/bbb-ui-components-react

Tất cả issue của bigbluebutton/bbb-ui-components-react

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.