Skip to content

feat: Filtros de múltiple selección con combo desplegable (IMP-17) #120

Description

@konami12

Descripción

Las opciones de Prioridad y Etiquetas en la barra de filtros se listan todas juntas, ocupando demasiado espacio vertical/horizontal, con mala experiencia en móvil y sin límite visual claro.

Requerimiento completo: requirements/improvements-17-filter-combo-multiselect.md


Propuesta

Transformar los selectores de Prioridad y Etiquetas en componentes combo de múltiple selección (dropdown colapsable):

  • Estado colapsado: campo con resumen de selección (ej. "Prioridad ▼ (2 seleccionadas)"), ~40-50px de altura
  • Estado expandido: lista de opciones con checkboxes
  • Cierre automático al hacer clic fuera
  • Botón/opción para limpiar el filtro
  • Cambios aplicados en tiempo real (sin botón "Aplicar")

Cambios en el código

  • src/components/organisms/filter-bar/filter-combo.ts (nuevo componente)
  • src/components/organisms/filter-bar/filter-bar.ts (refactor para usar filter-combo)
  • src/styles/filter-combo.css (estilos nuevos)

Criterios de Aceptación

  • El combo de Prioridad muestra "Prioridad ▼ (Ninguno)" cuando no hay filtros aplicados
  • Al hacer clic en el combo se despliega la lista de opciones con checkboxes
  • Al marcar opciones, el combo actualiza el resumen (ej. "2 seleccionadas") y filtra las tareas inmediatamente
  • Existe botón/acción "Limpiar filtro" que resetea la selección
  • El combo se cierra automáticamente al hacer clic fuera de él
  • Se usan atributos ARIA (aria-expanded, aria-label) para accesibilidad
  • El dropdown respeta max-height: 60vh en pantallas pequeñas

Área

UI/UX

Prioridad

Alta

Rama sugerida

feat/IMP-17-filter-combo-multiselect

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions