Create Menu component

[seancolsen]

From what I can tell, we're going to end up with multiple places throughout the app where we want dropdown menus which behave similar to the typical "File" menus atop a desktop application.

From a discussion about styling dropdown menus, @ghislaineguerin proposed this mockup:

Additional thoughts:

• I'd also like to see the text for all menu items left-aligned with each other regardless of whether an icon is present.

• We might also want nested menus at some point, so it would be worth considering that when setting up this UI component.

Here's an example of a dropdown menu with other features that we may someday want to support

Initially proposed designs

• For the most common use-case with a trigger that looks like a button with a downward pointing chevron

  <DropdownMenu icon={} label="" >
    <DropdownMenuItem icon={} label="" onClick={}/>
    <DropdownMenuItem icon={} label="" onClick={} isDisabled/>
    <DropdownMenuDivider />
    <DropdownSubMenu icon={} label="">
      <DropdownMenuItem icon={} label="" onClick={}/>
    </DropdownSubMenu>
  </DropdownMenu>

• With a custom trigger

  <DropdownMenu>
    <svelte:fragment slot="trigger">
      put anything here
    </svelte:fragment>
    <DropdownMenuItem icon={} label="" onClick={}/>
    <DropdownMenuItem icon={} label="" onClick={}/>
  </DropdownMenu>

Finalized component design

<Menu>
  <MenuItem icon={} label="" onClick={}/>
  <MenuItem icon={} label="" onClick={}/>
  <MenuItem>
     Custom menu item
  </MenuItem>
  <MenuDivider/>
  <NestedMenu icon={} label="">
    <MenuItem icon={} label="" onClick={}/>
    <MenuItem icon={} label="" onClick={}/>
  </NestedMenu>
</Menu>

[pavish]

@seancolsen The proposed component design looks good to me.

We can use this issue to keep track of developing the DropdownMenu and DropdownMenuItem components.

The DropdownSubMenu can be taken up when we have a design which requires it. As of now, we do not have a need, let's pick it up when we do.

[pavish]

@seancolsen I think we may have to rethink the design for this.

I think Menu should be a separate low level component of it's own and we can slot it within Dropdown whenever required.

For eg., the column dropdown menu changes it's structure entirely when we try to switch column type. Having a separate Menu component would give us more flexibility.

I'm thinking of something like:

<Dropdown>
  <svelte:fragment slot="trigger">
  </svelte:fragment>

  <svelte:fragment slot="content">
    <Menu>
     <MenuItem icon={} label="" onClick={}/>
     <MenuItem icon={} label="" onClick={}/>
    </Menu>
  </svelte:fragment/>
</Dropdown>

This will separate the Menu logic from Dropdown logic. We can use this Menu in other places, such as on right-click context menu.

I do think it also makes sense to additionally have a DropdownMenu component which wraps both these up.

[seancolsen]

@pavish That sounds good

[kgodey]

I moved this to "Initial Data Types" since it's blocking other issues in it.