calcite-action-menu should allow groups of related actions

[sagewall]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

We are refactoring the JavaScript Maps SDK LayerList widget to use calcite components. The LayerList ListItem has a property actionsSections that defines a nested 2-dimensional collection of actions that could be triggered on the item. In the previous design of the LayerList these action sections were visually separated by some empty space.

It would be nice if there was a way to create groups of actions inside a calcite-action-menu to be able to categorize and group the actions. Currently we have no way to visually separate the two defined action sections.

cc @driskull

Acceptance Criteria

The ability to visually distinguish between groups of related actions in the calcite-action-menu

Relevant Info

No response

Which Component

calcite-action-menu

Example Use Case

https://codepen.io/sagewall/pen/ExroQVb

Priority impact

p2 - want for current milestone

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

[macandcheese]

An option with the current components could be to use a Dropdown there. It supports Groups, and in selection-mode="none" should behave like an Action menu. You can choose to add group-title, but when not present, has a visual line between the items.

I think we need to clarify the story between the two components, IIRC Action Menu hasn't been a component we often document in standalone cases (not that it shouldn't be), vs. where it's automatically populated with overflow, or within an Action Bar / Pad parent. Thoughts on any improvement we can make to that story @driskull ?

[driskull]

Yeah we could probably phase out action-menu if dropdown handles all the cases.

I think the only thing I noticed now is that the arrow-down/arrow-up keys will open an action-menu but not a dropdown.

[driskull]

This keyboard interaction should be there for the menu role so some kind of dropdown enhancement would be nice.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role#keyboard_interactions

[driskull]

The other problem with the dropdown is that it steals focus away from the "trigger" element.

Ideally, the trigger should remain focused and the dropdown items should appear focused but not actually be focused.

This is better because it would act like a single component that is in focus rather than two separate components passing focus back and forth between each other.

When you open a dropdown and shift-tab it takes you back to the trigger rather than the previous element.

[macandcheese]

Yeah agreed with above, would improve Dropdown to address all those points.

[driskull]

#8205

#8206

[driskull]

@macandcheese another thing we would want for dropdown item is the indicator property which is only currently on action.

action also allows for slotting an icon and this works well for fallback image icons whereas dropdown has no equivalent. It only supports the named icons.

What do you think?

Until we get those two things, I don't think I can use dropdown for the layerlist.

[driskull]

I can add an enhancement issue for an indicator property on calcite-dropdown-item and add an enhancement issue for slotting a custom icon in calcite-dropdown-item if agreed upon.

[macandcheese]

Dropdown Item has two icon properties, so we'd need two slots to match that. On Dropdown Item, indicator could conflate with the selection... So, if the Action Menu can support Group, maybe that is less work? Dropdown option was nice because it already had support for group.

This might mean we'd have to document the Action Menu and make it more "public", AFAIK this has just been a component we use in certain places where overflow occurs?

[driskull]

Dropdown Item has two icon properties, so we'd need two slots to match that.

Correct.

So, if the Action Menu can support Group, maybe that is less work? Dropdown option was nice because it already had support for group.

Yeah we can go that route, I was just thinking it would be nice if we didn't have two similar components.

this has just been a component we use in certain places where overflow occurs?

Correct. overflowing actions.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.12.0-next.6 with the following:

<calcite-action-menu open>
  <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
  <calcite-action-group>
    <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
    <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
  </calcite-action-group>
  <calcite-action-group>
    <calcite-action text="Table" icon="table" text-enabled></calcite-action>
  </calcite-action-group>
  <calcite-action-group>
    <calcite-action text="Save" icon="save" text-enabled></calcite-action>
  </calcite-action-group>
</calcite-action-menu>