Add a stretch layout on horizontal action bar

[asangma]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

By deprecating layout on ActionGroup it removes the ability to use grid layout anywhere but ActionPad.

1. I suggest either retaining it in ActionGroup or adding layout=grid to ActionBar.
2. When ActionBar is layout="horizontal" AND in a flex container such as Panel, the ActionBar fills the space, and the Actions keep their content-based widths.

Acceptance Criteria

• [ ] The ability to do grid layouts without having to use ActionPad.
• [ ] Make Actions in a horizontal ActionBar and ActionPad look better, similar to:

Relevant Info

• A widget in Maps SDK needs grid layout but not the styles that come with ActionPad.
• Refer to this codepen to see how ActionBar affects the different layouts.

Which Component

ActionGroup, ActionBar, ActionPad

Example Use Case

A widget that needs grid layout but not ActionPad styles.

Priority impact

p3 - want for upcoming milestone

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

Calcite design solution

Per our discussions, this enhancement should be scoped to only Action Bar.

• Add new horizontal-fill value to the layout prop
  • This will need to force slotted Actions to alignment=“center” and flex to fill
  • The collapse button, when present, should not follow this pattern and retain its current behavior

[driskull]

I think we should decide if calcite-action-group should be allowed to be used without a parent component. That will kind of drive whether or not layout is removed or kept.

[asangma]

@driskull That's a good point. Also it will help decide whether or not grid is available as a layout option on ActionBar.

As of now, in order to make the UI work in the SDK widget, we would be using ActionGroup without an ActionPad or ActionBar parent.

[SkyeSeitz]

I lean towards setting grid on the parent to avoid having to use calcite-action-group outside of a Pad or Bar. Makes sense to get rid of calcite-action-group and instead add layout=grid to ActionBar (would love to see some examples if you got em).

[ashetland]

~~Just to clarify, we're not talking about removing calcite-action-group, right? grid was a part of group, but it was removed in favor of setting the layout at the parent level. Agree with that logic and would definitely like to see some examples of how this played out in Action Bar when a group could be set to a grid layout. A path forward I could see is not adding grid to Action Bar (to keep it a single row/column bar), but adding the option to remove the styling from Action Pad.~~

[ashetland]

Scratch the above comment. To clarify agian:

• keep action-bar-group
• add layout=grid to Action Bar
• layout is set at parent level
• 🚀

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[brittneytewks]

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

[macandcheese]

I'd like to bump the priority on this because it prevents many layouts that require this. It's related to #7496 so we can likely consolidate into one.

[geospatialem]

I'd like to bump the priority on this because it prevents many layouts that require this. It's related to #7496 so we can likely consolidate into one.

It looks like this issue is assigned for design work in May. WDYT about using this in favor of #7496 and bumping priority to medium, @macandcheese?

[macandcheese]

Sounds good. I think based on above comments design work is done, cc @ashetland

[ashetland]

Yep, added a "Design recommendations" section to the top that links to the appropriate comment.

[josercarcamo]

@jcfranco @ashetland @driskull @macandcheese I don't believe this issue is ready for development. I've asked a few of the team members for clarification and each has provided a different answer. ~~Could we please create clear requirements for this issue?~~ I'll set up a meeting so we can clarify.

[driskull]

The basic question for this issue is if action-group should be considered a standalone component or a child only component.

[macandcheese]

IMO that is best as a child component, otherwise we have three possible top-level "Action Pad / Bar / Group"...

I think we could achieve Alan's designs by introducing the "grid" layout to Action Bar (like it exists in Pad) - and perhaps adding a "horizontal-stretch" or "horizontal-fill" layout that places actions horizontally, but stretches them to the container width. We could potentially add this to Pad as well. However... this does lead to Pad / Bar being basically the same with a visual and perhaps "fill height / width" difference. Maybe an opportunity to combine them in some way to simplify the story...

[ashetland]

Design to do:

• [ ] Flush out specs for layout="horizontal-fill" taking into account the collapse button
• [ ] Determine next steps to support `layout="grid" in Action Bar, if needed

[driskull]

I think we could achieve Alan's designs by introducing the "grid" layout to Action Bar (like it exists in Pad)

I'm not sure grid makes sense in action-bar. A bar by name should only be a single row or column.

and perhaps adding a "horizontal-stretch" or "horizontal-fill" layout that places actions horizontally, but stretches them to the container width.

Yeah, I think this makes the most sense to achieve what @asangma is looking for.

We could potentially add this to Pad as well. However... this does lead to Pad / Bar being basically the same with a visual and perhaps "fill height / width" difference. Maybe an opportunity to combine them in some way to simplify the story...

I'm not sure there's a need to stretch or fill action pad actions as the pad only takes up the space it needs.