[Feature Request]: Badge Slot on SideNavigationItem

Aperta
  • Qualcosa non va?
#14,272 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
55/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Start by reading the SideNavigationItem component and its tests, then check how ButtonBadge is implemented and used for slot-based content. Work out how a badge can fit into the item while preserving its active and hover states; done means a badge count can be rendered on a SideNavigationItem and its behavior is covered by tests.

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

Descrizione

feature request SAP Signavio TOPIC RD
Feature Request Description

Hi team :)
We from Signavio have a use case where we would like to render a badge count notification on a SideNavigationItem.

For now, our workaround is to render a <Button /> with a Badge, however this requires us to re-implement a lot of logic including the hover state and the active state.

I attached a screenshot of the designs.

Image
Proposed Solution

Perhaps adding a new badge component, or even re-using the existing 

 <SideNavigationItem
      dir="rtl"
      key={item.id}
      text={item.label}
      onClick={() => handleItemClick(item)}
      data-uie={item.testId}
      .......
>
      <SideNavigationItemBadge
            design="OverlayText"
            text={item.badgeText}
            slot="badge"
       />
</SideNavigationItem>
Proposed Alternatives

For now, our workaround is to render a <Button /> with a Badge, however this requires us to re-implement a lot of logic including the hover state and the active state.

Organization

Signavio - Shell Team

Additional Context

No response

Priority

High

Privacy Policy
  • I’m not disclosing any internal or sensitive information.
Lingua principale
TypeScript
Stelle
1.8k
Fork
290
Merge medio
2g 13h
PR unite (30g)
50

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 UI5/webcomponents

Tutte le issue di UI5/webcomponents

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.