Autodesk / Autodesk/hig

Filters Framework: Basic, Panel and Modal

Open
#531 0 comments 0 reactions 0 assignees View on GitHub
table view
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.