Make Actions in horizontal ActionBar fill space.

[asangma]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

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.

Propose adding flex: 1 0 auto to Action when in ActionBar and ActionPad to let Action fill the space. OR possibly just setting that style on Action.

Please see this codepen to see how it affects the different layouts.

Acceptance Criteria

Make Actions in horizontal ActionBar and ActionPad look better.

Relevant Info

No response

Which Component

Action or ActionBar and ActionPad

Example Use Case

Toolbar in a panel.
See the above codepen.

Priority impact

p4 - not time sensitive

Calcite package

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

Esri team

N/A

[asangma]

Note: this might be considered a bug?

[macandcheese]

I think we'd want to enable this only when Action Bar layout is grid (after we add it #7438). It may require the columns on group to be set in some way.

But I don't think it's a bug or needed by default when in horizontal. I don't think this would always be desirable - for example in horizontal action bar in a shell panel's bottom / top panel slot - or in in this example I think the current fixed width Action is a better design than if they were to all fill available space: https://codepen.io/mac_and_cheese/pen/JjeqpjN?editors=1000

[asangma]

Thanks @macandcheese. That totes makes sense.
Do you think it's a prop we could add to either ActionBar/Pad or Action?

[macandcheese]

Yeah - it's possible now with Action Pad: https://codepen.io/mac_and_cheese/pen/QWJRQGW?editors=1000

But it has a requirement of using an Action Group and setting columns to an appropriate amount. I do wonder if columns could accept an "auto" or "all" value to avoid needing to know?

In - Dropdown, we require the Dropdown Item to be in a Dropdown Group, where certain properties are set / expected. Not sure if we want to enforce that here.

It seems like we'd also need to adjust the expand-disabled placement in a few configurations.

[asangma]

Maybe it could follow the model that Button uses with width="full"?

[ashetland]

Should this just be what the grid layout does? I've always found it confusing that the "grid" can look un-grid-like:

This

vs this

[macandcheese]

That is how grid works currently - https://codepen.io/mac_and_cheese/pen/QWJRQGW?editors=1000

Just need to add it to Bar, I think. The Collapse really is pretty useless in those cases though, at least IMO. I almost wonder if Action Bar / Pad should have expanded off by default vs. having to disable it, since for most horizontal use cases it's not ... always at least ... necessary with tooltip on action, etc.

[ashetland]

This is from the component sample. Is it not configured correctly? https://codepen.io/ashetland/pen/qBQGxzM?editors=1000

[driskull]

@asangma @macandcheese this was brought up from the Maps SDK team that they felt like the actions here should take up the full space and its weird the "...More" action isn't all the way to the right.

I agree with @asangma that it should probably have an option to take up the available space.

[macandcheese]

Agreed, I think it's a good option for some cases. As long as .. not doing it.. remains possible.

That said, in that example, I'd expect More and Zoom out to be "docked" to the right and not flex to fill space, since it makes them seem like siblings to "visitation highlights (2022) (unless they are...), especially since the actions directly above don't do that, but... IMO 😄

[asangma]

I can see what you're saying about the grouping @macandcheese.
It may be that we would want to have a prop on Action for width similar to what we have on Button...?

[driskull]

That said, in that example, I'd expect More and Zoom out to be "docked" to the right and not flex to fill space,

I can make zoom out docked to the right. That might help the appearance a bit.

[asangma]

That makes sense. Like render "internal" actions in their own group?

[driskull]

yeah maybe. I think ill hold off for now though

[geospatialem]

Reconsolidating the effort in #7438 for later this year. Closing the above.