# Feature DREAM-101 - Add filter labels to current filter box Project: Stream Design System Status: specified URL: https://community.openproject.org/work_packages/DREAM-101 ## Planning | Attribute | Value | | --- | --- | | Date | | | Priority | Medium | | Target versions | Product Backlog | | Sprint | | | Backlog bucket | | | Votes | | | List | | | Roadmap | | | Relevance | | ## OPEN POINTS / FEEDBACK _No work packages_ ## Features and Chunks _No work packages_ ## Bugs and other work packages _No work packages_ ## Technical Details | Attribute | Value | | --- | --- | | Module | Frontend components and Primer design system | | Feature Flag | | | Requires doc change | No | | Enterprise plan | | ## Details | Attribute | Value | | --- | --- | | Pull preview | | | Mockups | | | Accessibility | No | ## People | Attribute | Value | | --- | --- | | Assignee | | | Accountable | | | Product manager | | | Developers | | | Designer | Marc Alcobé | | Ordered by | | | Signed off by | | | Interest by | | ## Estimates and progress | Attribute | Value | | --- | --- | | PD (min) | | | PD (max) | | | Work | | | Labor costs | | ## Description **As** a user **I want to** easily see what filters has been applied to the view I'm currently working on **so that** I don't need to open the filter box to see the filter criteria ### Note This is a first step to redesign and improve the current filter UX and UI. See full concepts [here](https://www.figma.com/design/tUkyiLDn5ax7Q9DAhxlS69/Sub-headers-concept?node-id=0-1). ### **Acceptance criteria** - Implement bellow the filter button a new line inside of the SubHeaders component an **Active filters** label visualisation. - Display in the **Active filters** the filters applied to the view through the filter box. Display them using Primer dismissible labels. - If the filter apply only has an on off status the label should represent the status of that switch (eg. Active in Project lists). - If the filter has a multiple option: - Only one option is selected, display the option (eg. BUG in work packages) - Multiple options are selected, display the name of the filter with the amount of options selected (eg. 5 types in work packages) - When a user removes a filter label the filter is removed from the filter criteria and the page enters an "unsaved" status. - When a user clicks on the label (not in the "X") this opens the filter box. **TBD** - Hide the full **Active filters** row in mobile. - As we can't control the amount of filter criteria that our users have in their instance the following logic for each module will apply:

Module

Filters displayed as individual labels

Filters displayed as Advanced filters

Project lists

  • Active

  • Favorite

  • I am member

  • Project status

  • Public

  • Type

All other attributes (including custom)

Work packages lists

  • Assignee

  • Status

  • Type

  • Author

All other fields (including custom)

Meetings index

  • Time

  • Invited user

  • Attended user

  • Author

No advanced filters

Gantt charts

  • Assignee

  • Status

  • Type

  • Author

  • End date

  • Finish date

  • Duration

All other fields (including custom)

Calendars

  • Assignee

  • Status

  • Type

  • Author

  • End date

  • Finish date

  • Duration

All other fields (including custom)

Team planners

  • Assignee

  • Status

  • Type

  • Author

  • End date

  • Finish date

  • Duration

All other fields (including custom)

Boards

  • Assignee

  • Status

  • Type

  • Author

All other fields (including custom)

Members

  • Status

  • Group

  • Role

  • Work package shares

No advanced filters

Administration settings > Users and permissions > Users

  • Status

  • Group

No advanced filters

Administration settings >Time and costs > Cost types

  • Fixed date

  • Show locked types

No advanced filters

### Figma and visuals