Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Feature Request]: Badge component should support text truncation with ellipsis

Aperta
  • Qualcosa non va?
#4,625 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, scss, typescript
Ambito
frontend

Direzione di ricerca

Start by locating the Badge component implementation and its tests, then inspect how its internal markup handles children and sizing. Check how Badge is used in Table cells and how the component’s styling is tested. Done means an opt-in truncation behavior shows an ellipsis as the available width changes without forcing the table row to grow.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement
Description

Use case

When using Badge inside a Table cell to display dynamic content (e.g., resource tags like aws:cloudformation:stack-name=my-very-long-stack-name), long text causes the Badge to expand beyond the column width. Since Badge renders as an inline-block element, the table row height increases when the column is resized and the Badge cannot wrap internally, so it forces the row to grow.

There is currently no way to constrain Badge content with standard CSS (overflow: hidden; text-overflow: ellipsis; white-space: nowrap) because the text is not a direct child of the overflow container, it's nested inside Badge's internal markup.

Proposed solution

Add a truncate boolean prop (or similar) to Badge that enables single-line text overflow with ellipsis:

<Badge truncate>aws:cloudformation:stack-name=my-very-long-value</Badge>

When enabled, the Badge's internal text container would apply:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

And the Badge itself would respect a max-width (either from a parent container or an explicit prop) rather than always sizing to its content.

Workarounds attempted

  • Wrapping Badge in a div with overflow: hidden — clips visually but does not show ellipsis
  • Placing a styled span inside Badge children with text-overflow: ellipsis — does not respond to column resizing because Badge sizes to its content, creating a circular width dependency
  • Programmatic text truncation (string.slice(0, N) + '…') — works but is not responsive to layout changes
Code of Conduct
Lingua principale
TypeScript
Stelle
2.7k
Fork
248
Merge medio
3g 14h
PR unite (30g)
83

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudscape-design/components

Tutte le issue di cloudscape-design/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.