ActionGroup Icon not provided padding when rendered with sibling and ActionGroup is collapsed

[GrantRussell]

Provide a general summary of the issue here

When an ActionGroup Item renders an Icon and any other sibling (like Text), then the Icon is not provided the needed padding style when in collapsed menu.

CodeSandbox to reproduce
https://codesandbox.io/p/sandbox/wizardly-james-vmfrxg?file=%2Fsrc%2FApp.js%3A13%2C58

🤔 Expected Behavior?

ActionGroup Icon should have equal spacing on both sides

😯 Current Behavior

ActionGroup Icon is pressed against Chevron

💁 Possible Solution

The issue appears to be caused by the pseudo-class :only-child used as part of the selector that applies the expected padding. The selector looks like this:

.spectrum-ActionButton .spectrum-Icon:only-child {
    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85))
}

The problem is if you render the icon with a label, the label is still present in the DOM as a sibling to the Icon and is only hidden with CSS styles.

<ActionGroup maxWidth={100}>
  <Item key="list">
    <ViewList />
    <Text>Table View</Text>
  </Item>
</ActionGroup>

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/wizardly-james-vmfrxg?file=%2Fsrc%2FApp.js%3A13%2C58

Version

3.33.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

Adobe / Assets Essentials

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, please make sure the Codesandbox is public.

Otherwise, it looks like it's behaving correctly to me in our testing storybook https://reactspectrum.blob.core.windows.net/reactspectrum/88c7f4ee5f959b6c3d0b5b1f877d3e63b6c88aca/storybook/index.html?path=/story/actiongroup--summary-icon&args=overflowMode:collapse;buttonLabelBehavior:collapse&providerSwitcher-express=false

Will need to see the codesandbox to know if I'm missing something

[GrantRussell]

@snowystinger Sorry about that, the Codesandbox is now public.

You can see the visual padding issue on the main documentation site as well - https://react-spectrum.adobe.com/react-spectrum/ActionGroup.html#single-selection, check the icon padding in the Single Selection example using the TextAlign icons.

[snowystinger]

Yep, I can see it now in the docs. Thanks for bringing it up.
Interestingly, it is working here https://reactspectrum.blob.core.windows.net/reactspectrum/88c7f4ee5f959b6c3d0b5b1f877d3e63b6c88aca/storybook/index.html?path=/story/actiongroup--summary-icon&args=overflowMode:collapse;buttonLabelBehavior:hide;selectionMode:single&providerSwitcher-express=false
this seems to be because of the label as you pointed out, which is only hidden

It looks like the problem line is here

react-spectrum/packages/@adobe/spectrum-css-temp/components/button/index.css

Line 230 in 8577c4d

padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);

We can probably use some more classes/state to determine that we should indeed have padding-inline-end