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

DoubleBadge: draw its own divider instead of relying on the badges' borders

Aperta Adatta ai principianti
  • Qualcosa non va?
#117 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
66/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, typescript
Ambito
design, frontend

Direzione di ricerca

Individua gli stili di DoubleBadge e confrontali con quelli di DoubleToken, concentrandoti sulla sovrapposizione e sulle regole degli angoli interni descritte nell’issue. Controlla i token di badge e divider in entrambi gli schemi di colore, poi verifica che i badge della stessa variante mostrino un divider e che i temi di badge con contorno non producano una linea doppia.

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

Descrizione

Problem

DoubleBadge joins its badges by overlapping them by --border-width and squaring the inner corners, the same CSS as DoubleToken. That only draws a seam when each item has a visible edge of its own. Astryx Token has an outline, so DoubleToken always shows a divider. Astryx Badge has a fill and no border, so DoubleBadge has no divider of its own:

  • with the default Astryx theme, two badges of the same variant render as one pill ([Paused][Paused] reads as one label);
  • with a theme that outlines badges, the seam is whatever the later item's outline happens to be, and it disappears when that outline is close to the fill. Backend.AI WebUI hit this in dark mode with a neutral badge after a warning badge (Paused | Set by user), and worked around it in its theme (lablup/backend.ai-webui#10662).

Proposal

Let DoubleBadge draw the divider itself instead of relying on the items' borders, e.g. a border-inline-start: var(--border-width) solid <divider token> (or an equivalent inset shadow) on every item but the first, using a token that contrasts with badge fills in both color schemes. The overlap rule can then go.

Acceptance

  • Two adjacent badges of the same variant show a visible divider under the default Astryx theme, light and dark.
  • A theme that outlines badges does not get a doubled line.
Lingua principale
TypeScript
Stelle
2
Fork
0
Merge medio
1g 14h
PR unite (30g)
36

Preparare l'ambiente

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 lablup/ui-common

Tutte le issue di lablup/ui-common

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.