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

[Feature Request]: Adding a hover state to badge component

Aperta
  • Qualcosa non va?
#4,536 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à
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
54/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, scss, typescript
Ambito
design, frontend

Direzione di ricerca

Start by reading the badge component and the tab hover styling to see how component styles interact when the badge is nested inside a tab. Check the existing badge and tab tests, if available, before choosing a subtle visual response. Done means the badge visibly responds when its containing tab is hovered, without changing its placement or normal appearance.

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

Descrizione

enhancement
Description

Context:
We are using blue badges within tab headers to display dynamic values (coverage percentage and utilization percentage) alongside the tab label. The badges provide at-a-glance metrics that help users understand the content of each tab before clicking into it.

Current Behavior:
When a user hovers over a tab that contains a badge, the tab label responds with a hover style, but the badge itself does not reflect any hover state. This creates an inconsistent interaction where part of the tab header appears interactive and part does not, making the component feel unresponsive or broken.

Expected Behavior:
The badge should inherit or complement the tab's hover state when placed inside a tab header. When the user hovers over the tab, the badge should visually respond (e.g., subtle background shift or opacity change) to indicate it is part of the clickable tab area.

Customer Benefit:
Customers using the Purchase Analyzer rely on the coverage and utilization badges to quickly assess their savings plan performance before diving into detailed analysis. A proper hover state reinforces that these metrics are interactive and tied to actionable content, reducing hesitation and confusion during navigation. Without it, customers may second-guess whether the tab is clickable or assume the UI is malfunctioning, which erodes trust in the tool. A polished, responsive interaction builds confidence that the data they are viewing is reliable and that the product is well-maintained, ultimately encouraging deeper engagement with savings recommendations.

Impact:

  • Users perceive the tab as partially broken during interaction
  • Reduces the polished feel of the interface
  • Creates a disconnect between the interactive affordance of the tab and the static appearance of the badge
  • User feedback from testing has been positive on the badge placement itself, so we want to preserve the pattern while improving the interaction quality

Proposed Solution:
Add a hover style variant for the badge component when nested inside interactive containers (e.g., tabs). This could be a subtle visual shift that signals the badge is part of the parent's interactive area.

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.