Add a stretch layout on horizontal action bar

asangma commented 1 year ago

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.

I suggest either retaining it in ActionGroup or adding layout=grid to ActionBar.
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

Design recommendations

See this comment.

driskull commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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] commented 1 year ago

cc @geospatialem, @brittneytewks

brittneytewks commented 8 months ago

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

macandcheese commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

ashetland commented 5 months ago

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

josercarcamo commented 3 months ago

@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 commented 3 months ago

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

macandcheese commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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.

Esri / calcite-design-system