Action Pad - support wrapping

[nCastle1]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

I would like to use calcite-action-pad with the confidence that it will remain usable on a variety of view sizes.

Consider the following example:

Screen.Recording.2024-12-05.at.6.46.01.PM.mov

A one-line "good enough" fix would be to set flex-wrap on the internal container.

Screen.Recording.2024-12-05.at.6.47.51.PM.mov

An even better approach might be to have an overflow menu.

I didn't show it in the video, but also making the action-group container wrap could be a potential further enhancement.

Acceptance Criteria

Some way to configure calcite-action-pad such that all actions remain usable when the available horizontal space is less than the natural width of the pad.

Relevant Info

• This came up in the context of migrating an ArcGIS Maps SDK for JavaScript widget to more fully use the Calcite design system
• A similar limitation affects one or more other products; those products resolve this problem by showing a scrim and blocking use if the view is too small; maybe they could benefit from this change?
• "just use fewer actions" isn't really an option for this use case; customers can add more, and the existing options can be hidden or shown dynamically. And in one or more future releases, the widget may or may not get several new tools, heightening the need for wrapping (or a really well thought out collapsing strategy).

Which Component

calcite-action-pad

Example Use Case

Imagine a hypothetical effort to re-implement the widget on this page to use built-in Calcite components:

https://developers.arcgis.com/javascript/latest/sample-code/sketch-geometries/

Through use of custom layout, that widget is able to support responsive layout:

Screen.Recording.2024-12-05.at.6.54.29.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

[macandcheese]

The Action Bar component supports automatic overflow behavior like you describe, I'd expect Action Pad to behave similarly - maybe we can add that functionality in here.

An interim workaround could be to use layout="grid" on the Action Group to provide "line breaks" - though this would require you to determine when to adapt and make that change.

You could also "fake it" in the component's current state by maintaining a few pads (and, probably handling focus between them), and determining at certain breakpoints when to show what: https://codepen.io/mac_and_cheese/pen/qBzyePq?editors=1010