Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#942 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 5 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
86/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza por el tipo FilterSelectOption y el componente FilterChip mencionados en el issue, además de la implementación de Select.Item que muestra SelectItemProps y leadingIcon. Rastrea dónde se hacen spread de las opciones de filtro y dónde se construye el elemento de menú "Add filter" para ver por qué DataViewField.icon nunca se lee. Está terminado cuando las opciones llevan leadingIcon/disabled, un chip de un único valor muestra ese icono, field.icon aparece en el menú y en el chip, y los tests de componentes existentes de DataView/FilterChip siguen pasando.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
69
Forks
13
Merge medio
4 d 4 h
PR fusionados (30 d)
27

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de raystack/apsara

Todos los issues de raystack/apsara

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.