cengage
Document Expandable Filter Dropdown
An expandable dropdown could be used with checkboxes as a filter. We should document this example in our documentation (storybook + docs). Here's an example of what that may look like: https://codesandbox.io/s/expandable-filter-menu-z5mjcp?file=/example.tsx.
Outstanding questions:
- How do we handle icons?
- What is the exact spacing we expect for the form wrappers?
I vetted the following solution with the UX Team.
Figma: https://www.figma.com/file/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?type=design&node-id=1464%3A6569&mode=design&t=ajfSAofslLEo6dsm-1
- When a child item has a checkbox or radio button, the left padding on the menu should be 32px to provide a bit of indentation.
- When the checkbox or radio component is used inside of a dropdown, we need the space between the icon and label to be 16px, instead of its original 8px. This will allow all text labels to align, regardless of whether there is a checkbox, radio, or icon in front.
As a result of how we're handling checkboxes in the dropdown, we need to adjust the spacing on menu items that use an icon and text label. We need to decrease that space from 16px to 8px.