Filters Framework: Basic, Panel and Modal
- Dominant language
- JavaScript
- Stars
- 193
- Forks
- 112
- PR merge metrics
- No merged PRs in 30d
Description
Link to wiki: https://wiki.autodesk.com/display/HIG/Filters
Link to file in Abstract: https://share.goabstract.com/c1e43262-2009-44cd-b64f-1262550fdcdc
Framework includes Basic (top) pattern, Left Panel and Modal Dialog.
Desktop "Rulebuilder" leveraged the Modal.
Drag-and-drop reorder of filter groups in left panel and reorder of items in a multi-select listbox so that selected items are moved to the top when listbox is reopened.
-----
Basic filter bar
- Fixed at top of content, table scrolls beneath
- Room for 3 form fields (Dropdown, text field etc)
- Content entirely configurable
Filter panel
- Subgroups drag-and-drop reorderable
- Parents not reorder able
- Children cannot be moved to a different parent
- Label number shows number of elements checked
Modal filter dialog (configure)
- Opens from gear button on upper right of table
- Contents entirely configurable by client dev
Tokens
- They show what filters are applied from within the modal filter dialog
- May be deleted
- Plus button on the right reopens the modal filter dialog
- May wrap to additional lines
Test-based filter (in table header)
- Field expands wider when it has focus
Test-based filter (in filter panel)
- Search icon turns to X when field has a value
Filter panel reclaims width from sidenav when expanding
- If expanding filter panel would cause table to be narrowed below minimum width threshold, filter panel can ask SideNav to close to reclaim space.
Contributor guide
Research direction
Start with the linked HIG wiki page and the Abstract design file; the issue does not name repository files, tests, or an entry point. Compare the Basic, panel, modal, token, and table-filter requirements there with the existing design-system structure. Done means the described filter framework behaviors and layouts are implemented and verified against those requirements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100