Request Requirements

Request

Create a menu component that's similar to the dropdown. Ideally in the future dropdown component will be replaced with this more advanced component. It's a container that opens on click event below the clicked component.

Design

Figma

Updates required

This workflow will allow us to insert other components/objects into a menu that is activated by a chip.

In order to complete this component we need to make a few changes to existing components:

Chips

• Add option to customize border radius
  • example: Need to be able to do 8px border radius for design
• Update clear button styling to match new design
  • Split button separating clear action from chip label
  • End result looks like one chip but has two buttons (each hover state shows independently)
    • Label button opens menu/etc
    • Clear button clears selection

Menu

• Toggle element ID property is required
• Add option for menu to stay open after selecting from list
  • Add a control: disable-close-onselect. By default it should be false
  • Default this option to current behavior (closes when selecting)
  • Update data filter as selections are made
    • Each selection will reload the data set but the menu should stay open
• Menu can be closed by clicking outside of menu (elsewhere on screen)
  * Menu should also close when the parent component is clicked again
• Allow other components to be added inside menu container
  • All form control options are valid for v1
• Add parent styles to remove rounded corners on components when inserted into menu list within dropdown
  • List item (0 border radius)
  • Others TBD
• Menu height should be:
  • Maximum of 70vh or 400px
  • Minimum of 40vh or 200px
• Menu width should be”
  • Minimum of 160px
  • Maximum of 300px

Later Updates:

• after this work is completed we will iterrate on this component to add a header/footer with actions for clear/close/etc
• Not required for v1 right now