Action Bar width changes when an Action gets an indicator.

[LanceStasinski]

Actual Behavior

The width of an Action Bar component changes when an Action's indicator is toggled which leads to distracting layout changes.

Expected Behavior

I expect the width of the Action Bar to remain constant when an Action's indicator is toggled.

Reproduction Sample

https://codesandbox.io/s/proud-meadow-eo44tw?file=/src/styles.css

Reproduction Steps

1. Create an Action component with a toggle-able indicator
2. Nest that Action component within an Action Group that is nested with an Action Bar
3. Tie the toggle indicator action to an element outside of the Action Bar - probably a button.
4. Click the element that triggers the toggle indicator action.
5. Notice how the width of the Action Bar increases.

Reproduction Version

1.0.0-next.541

Relevant Info

MacOS, Chrome version 105.0.5195.102
Calcite Components version 1.0.0-next.541

We solved this issue temporarily by adding a pseudoelement that takes the place of the indicator when indicator=false. The issue may be fixed by keeping the indicator psuedoelement as a permanent fixture within the component by setting visibility: hidden;, and only changing the visibility when indicator=true.

Regression?

No response

Esri team

ArcGIS Field Apps

[geospatialem]

@ashetland + @SkyeSeitz: What are your design thoughts of action-bar where the indicator is added in particular use cases?

In the sample above the component is expanded, and the indicator is added to the text line with the most characters.

[LanceStasinski]

In case it's of use, we fixed this by modifying the CSS as such:

calcite-action-bar[expanded] calcite-action:not([indicator])::after
  display: inline-block
  content: ''
  width: 1rem

[driskull]

What if we changed the indicator to always be in the same place?

cc @asangma

[ashetland]

My vote would be to account for the additional space of the indicator rather than keep it attached to the icon. When it's expanded, the indicator feels out-of-place if it's still on the icon.

[SkyeSeitz]

I would agree with @ashetland. Also curious if there can be an Action Bar with no icons and just text?

[jcfranco]

Also curious if there can be an Action Bar with no icons and just text?

Technically, yes (except for the expand/collapse action), but I don't think this is a supported configuration. Looks odd to me.

If the actions used in action-bar/pad are meant to always use their icon, we should update the doc to indicate this. cc @geospatialem

---

Seems to me like this is ready for implementation. @SkyeSeitz @ashetland Can you confirm?

[jcfranco]

Took a stab with the current information. LMK if this needs further design discussion.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on master