Toolbar / Action Pad overflow and menu enhancements

[ashishgodbole]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Context.
The Web Editor team is using the Action Pad as a primary contextual toolbar that displays editing options.

1. Overflow requirement
   This toolbar can get quite wide with a lot of actions in it, and we would like to reduce its width by putting some actions in an overflow menu. This is a need when viewing on smaller screens, or when there is a need to accommodate for other elements that may take up space on the screen.

2. Menu requirement
   The toolbar may have several related actions that we would like to group, and present as an 'actions menu' in the toolbar, so that it will take up only 1 slot, instead of several slots in the toolbar.

Acceptance Criteria

For "1. Overflow requirement":

• Add basic overflow functionality to Action Pad, modeled after the current behavior in Action Bar
• A control for when overflow occurs may be required. Should it happen when Action Pad runs out of space, like Action Bar, or should there be a prop like maxItems to control it? Defer to developers on this.

For "2. Menu requirement":

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

Relevant Info

Please review the figma file for requirements, designs, etc.

Figma File

Which Component

Action Pad

Example Use Case

Please review the figma file for requirements, designs, etc.

Figma File

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

ArcGIS Online

[brittneytewks]

Removed Figma changes label as this will be tracked in monday.com

[nCastle1]

This would be useful for a Maps SDK use case, both in the Action Pad and Action Bar context.

[ashetland]

@ashishgodbole and @geospatialem, we'd like to use this issue to focus on the first request above — replicating Action Bar's overflow behavior in Action Pad. For the second request, we'd like to defer to issue #11126 instead. That way we aren't holding up basic overflow functionality on Action Pad.

[github-actions]

cc @geospatialem, @brittneytewks

[ashetland]

Updated Acceptance Criteria above based on comment.