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

DataView filters: support icons on select options (and use field.icon)

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

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
86/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Parti dal tipo FilterSelectOption e dal componente FilterChip indicati nell'issue, oltre all'implementazione di Select.Item che mostra SelectItemProps e leadingIcon. Traccia dove le opzioni del filtro vengono spreadate e dove viene costruito l'elemento di menu "Add filter" per capire perché DataViewField.icon non viene mai letto. È completato quando le opzioni contengono leadingIcon/disabled, un chip a valore singolo mostra quell'icona, field.icon appare nel menu e nel chip e i test dei componenti esistenti per DataView/FilterChip continuano a passare.

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

Descrizione

Select filters in DataView can only show plain text options right now. A lot of filters can have an icon that goes with each value, like a status dot, a priority glyph, or an avatar. Without it, the filter dropdown looks different from the column it's filtering, and it's slower to scan.

Select.Item already supports leadingIcon. But FilterSelectOption is just { value, label }, and FilterChip only passes label through, so there's no way to get an icon in.

Also, DataViewField has an icon prop, but as far as I can tell nothing reads it. It doesn't show in the "Add filter" menu or on the chip.

What I'd suggest

  1. Let filter options take the same extras Select.Item does, instead of adding fields one by one:

    type FilterSelectOption = {
  value: FilterValueType;
  label: string;
} & Pick<SelectItemProps, 'leadingIcon' | 'disabled'>;

    FilterChip would spread those onto Select.Item. label stays a plain string, since search, accessibility and the "N selected" text all depend on it.

  2. When one value is picked, show its icon in the chip as well, not just in the dropdown. Multiple values can keep showing "N selected".

  3. Use field.icon for the "Add filter" menu item and the chip's leadingIcon.

I'd skip a render-prop like renderOption. It would break the text-based stuff above, and every app would end up drawing options differently. If two-line options are ever needed (name + email), a description field would cover that better.

Lingua principale
TypeScript
Stelle
69
Fork
13
Merge medio
3g 15h
PR unite (30g)
24

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 raystack/apsara

Tutte le issue di raystack/apsara

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.