feat: Add isExpanded renderProp to Button

[LFDanLu]

As a alternative for isTriggerUpWhenOpen from #8971, we've decided to add isExpanded alongside isPressed so that users can decide style their ComboBox/DatePicker/Menu etc trigger button states to be independent of the open state.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Tests should cover this, but you can sanity check ComboBox/DatePicker/etc and make sure the RAC button has the proper data attribute for expanded. Additionally, double check the equivalent S2 components (and Picker/TabsPicker) and make sure the press state doesn't get stuck when opening the dropdowns/menus.

🧢 Your Project:

RSP

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[snowystinger]

can we run chromatic against this?

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[LFDanLu]

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1107, changes seem unrelated to my updates

[devongovett]

We should change lines like this (e.g. S2 ActionButton/Button) to use the isExpanded state instead:

// Retain hover styles when an overlay is open.
isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,

[devongovett]

Looks like the RAC starters should also be updated to use data-expanded. For example Select now loses it's darkened color when opened.

[devongovett]

Looks like this code is in S2 MenuTrigger too, so we should move that into RAC too I guess. The RAC Menu examples don't have any press scaling anymore.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[snowystinger]

Can a ToggleButton be expanded? it's now in the types

[LFDanLu]

@snowystinger oh good catch, I suppose not. I'll remove it for now and we can always readd it if people are using the toggle button for opening overlays

[devongovett]

I don't think this is right? This is changing the MenuItem styles, not the button. I think you need to change Button.css to add data-expanded that sets the background to match the pressed state.

[LFDanLu]

oh whoops, should've checked my bulk change here, I'll fix

[devongovett]

I don't think this is right either. On touch the menu doesn't open until press up, so now it has press scaling when it didn't before.

You need to add a new selector for data-expanded that just adds the background color change so that persists while the popover is open.

[LFDanLu]

ah yep, accidentally conflated the press scaling with the background color styles

[devongovett]

changes needed to tailwind starter as well

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

react-aria-components

/react-aria-components:ButtonRenderProps

 ButtonRenderProps {
   isDisabled: boolean
+  isExpanded?: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
   isPending: boolean
 }

---