[Action Bar, Action Group] Improve configurability of action groups to support powerful, intuitive, accessible UI

[nCastle1]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

The current automatic collapsing behavior of calcite-action-group within calcite-action-bar is a very promising approach for accommodating powerful menus in contexts of limited available space. Unfortunately, there are currently unresolvable conflicts between the default behavior and the UI needs of my product.

Key challenges:

• There is no way to control the priority of automatic hiding of calcite-action elements. They appear to hide from right to left by default, but this is in conflict with the app's desired priority. Re-arranging is not a good option for the product. I would like to indicate that group b should collapse first, then group a, then group c; and group d should never collapse.
• When selecting an action in the overflow menu, after the menu is (automatically) closed, there is no indication that the item is active. I expect the calcite-action-group to ensure that the active actions get priority for display while in a collapsed state.
• For some action groups, an overflow menu appearance is appropriate, but for other groups, a split button appearance would be ideal. I would like an overflow-mode property, with options like split-button and menu (naming not important).
• I would like control over when action groups collapse themselves and when they are wrapped. In the case of a complex toolbar, it may be desired to wrap to another level rather than hide. I think this could be solved by adding a wrap or never option to the overflow-mode property described above

Acceptance Criteria

• Developer can control which action-groups in an action-bar collapse first
  • Bonus: automatic collapsing behavior happens in action-pad, too
• Developer can control appearance of collapsed group to appear as menu or as split button
• When the user selects an action from an overflow menu, calcite-group ensures that the selected action replaces one of the non-hidden items (such that the most recently selected overflow item becomes persistently visible)
• Developer can prevent overflow and force the action groups to wrap

Relevant Info

#7507 is also relevant, but there are additional requirements to improve the situation for calcite-action-bar

Which Component

• calcite-action-bar
• calcite-action-group

Example Use Case

Split button mode

In the case of selection tools, it is common to present these as a split button:

Screen.Recording.2024-12-20.at.2.39.24.PM.mov

The app in the video is using a calcite-action with compact (deprecated) set and custom menu. I think it makes sense for action-group to have a mode that implements this automatically. A split button will save space relative to the overflow menu action, and better match user expectations in some cases.

Collapse prioritization

I have a toolbar for controlling drawing on a map. In the ideal case, there is room for all of my buttons. Unfortunately, I don't know how the tool will be used, and the customer can add infinitely many tools.

In the most common case, I want to ensure that there is at least one selection tool, then prioritize showing draw/create tools. Unfortunately, with the current implementation, the draw tools are hidden first:

By convention, the selection tools are presented first, so fiddling with the order is not a solution. Even if it was, it would only be a temporary solution since the order is not documented.

Wrapping

Although it isn't as pretty, there are some advanced use cases where it is better to keep all of the items accessible by wrapping on multiple rows, rather than hiding. I would like to be able to support this, but currently cannot. Wrapping is pretty common for toolbars in apps:

Keeping the active item visible even when overflowing

In the case of a toolbar with several items, I expect the active item to become shown in the main area when selecting from the overflow menu. An example of this behavior is in VS Code:

Screen.Recording.2024-12-20.at.2.53.20.PM.mov

In the GIS context, I have a toolbar with many draw tools. Some of these are placed in an overflow menu. Once I have selected the draw tool, as a user, I should see the current draw tool reflected in the UI. Currently, that is not possible (except maybe with hacks to re-arrange the actions after selection by checking if the selected action is a descendant of a calcite-action-menu). I also need to support users who will attach a popover to the active menu item, and that will not work if it is hidden in the overflow menu.

Screen.Recording.2024-12-20.at.2.59.30.PM.mov

Screen.Recording.2024-12-20.at.3.00.05.PM.mov

Priority impact

impact - p2 - want for an upcoming 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