Add submenu feature for Dropdown

[Anastasiia-Boleiko]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Dropdowns have the functionality to display submenus.

Acceptance Criteria

• Dropdowns display submenus via a named slot on Dropdown Item
• Users can slot both Dropdown Items and/or Dropdown Item Groups into submenus
• Documentation of dos/avoids (refer to internal repo issue)

See Figma file for full design requirements and additional details 🔗

Which Component

Dropdown
Dropdown Item
Dropdown Item Group

Example Use Case

Different menus with submenus opened from the floating toolbars.

Additional use cases outlined in this comment.

Priority impact

impact - p1 - need for current milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Urban

monday.com sync: #9365337583

Ideas explored in design file:

1. slot="submenu-item" and text property

<calcite-dropdown>
    <calcite-button slot="trigger" icon-start="ellipsis">
    </calcite-button>
    <calcite-dropdown-group selection-mode="none">
        <calcite-dropdown-item text="Locate"></calcite-dropdown-item>
        <calcite-dropdown-group group-title="Duplicate to" selection-mode="none">
            <calcite-dropdown-item text="Existing" slot="submenu-item"></calcite-dropdown-item>
            <calcite-dropdown-item text="Scenario 2" slot="submenu-item">Scenario 2</calcite-dropdown-item>
        </calcite-dropdown-group>
        <calcite-dropdown-item text="Locate"></calcite-dropdown-item>
        <calcite-dropdown-item text="Resize"></calcite-dropdown-item>
        <calcite-dropdown-item text="Preview"></calcite-dropdown-item>
        <calcite-dropdown-item text="Add Custom ID"></calcite-dropdown-item>
        <calcite-dropdown-item text="Get info"></calcite-dropdown-item>
    </calcite-dropdown-group>
</calcite-dropdown>

2. display-mode="open-list | submenu", where

open-list - is a default, how the group is displayed now.
It seems to be non breaking change 😊

<calcite-dropdown>
    <calcite-button slot="trigger" icon-start="ellipsis">
    </calcite-button>
    <calcite-dropdown-group selection-mode="none">
        <calcite-dropdown-item>Locate</calcite-dropdown-item>
        <calcite-dropdown-group group-title="Duplicate to" selection-mode="none" display-mode="submenu">
            <calcite-dropdown-item>Existing</calcite-dropdown-item>
            <calcite-dropdown-item>Scenario 2</calcite-dropdown-item>
        </calcite-dropdown-group>
        <calcite-dropdown-item>Locate</calcite-dropdown-item>
        <calcite-dropdown-item>Resize</calcite-dropdown-item>
        <calcite-dropdown-item>Preview</calcite-dropdown-item>
        <calcite-dropdown-item>Add Custom ID</calcite-dropdown-item>
        <calcite-dropdown-item>Get info</calcite-dropdown-item>
    </calcite-dropdown-group>
</calcite-dropdown>

3. New calcite-dropdown-submenu child item, inherits calcite-dropdown-group properties (ex.: selection)

It seems to be non breaking change 😊

<calcite-dropdown>
    <calcite-button slot="trigger" icon-start="ellipsis">
    </calcite-button>
    <calcite-dropdown-group selection-mode="none">
        <calcite-dropdown-item>Locate</calcite-dropdown-item>
        <calcite-dropdown-submenu submenu-title="Duplicate to" selection-mode="none">
            <calcite-dropdown-item>Existing</calcite-dropdown-item>
            <calcite-dropdown-item>Scenario 2</calcite-dropdown-item>
        </calcite-dropdown-submenu>
        <calcite-dropdown-item>Locate</calcite-dropdown-item>
        <calcite-dropdown-item>Resize</calcite-dropdown-item>
        <calcite-dropdown-item>Preview</calcite-dropdown-item>
        <calcite-dropdown-item>Add Custom ID</calcite-dropdown-item>
        <calcite-dropdown-item>Get info</calcite-dropdown-item>
    </calcite-dropdown-group>
</calcite-dropdown>

[macandcheese]

cc @SkyeSeitz @ashetland - there is a good bit of overlap here with the existing Menu functionality - we've talked about adding scale and making UI improvements to that component - that work might benefit from some of the above proposed UI.

[Anastasiia-Boleiko]

We also were considering Calcite Menu component at some point. However, in our case, we have distinct reasons for differentiating the menus from the Navigation header and floating context menus.

One crucial factor is the size, scale, box shadow (styling) of the list, which could be long and result in a significantly increased height of the dropdown overlay. This could lead to the need for scrolling or partial cut of the list within the 3D scene "viewport".
Additionally, the look and feel of menus and its submenus may not match our floating bar, which has a box-shadow effect.

So, in our case, the Dropdown component visually aligns with the styling we desire, and we would use it extensively, especially when it includes submenus. 😊

But in case, the Menu component will have scales, and look and feel which is close to Dropdown (rounded corners, box-shadow, etc.), this would be a very good alternative for us 😊

[macandcheese]

Definitely understand! I think the mentioned UI improvements would actually bring Menu more in-line with what you'd expect from Dropdown (while also having scale) - if we can improve that component it might be a clearer story.

Re: priority - there are two listed - Can you clarify if it is p1 or p3 from your side? p1 is unlikely for an issue of this scope + design work.

[Anastasiia-Boleiko]

@macandcheese Thanks a lot for the clarification 👍
For our team this is p1 priority 😊 We would like to use such a component in the upcoming release.