Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

BBButton: let a long label wrap instead of overflowing

Abierto
  • ¿Algo no está bien?
#105 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
Medio día
Aptitud para principiantes
45/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
2
Forks
5
Merge medio
1 d 16 h
PR fusionados (30 d)
12

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de bigbluebutton/bbb-ui-components-react

Todos los issues de bigbluebutton/bbb-ui-components-react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.