react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

feat: allow customizing behavior of pressed state

Open rothsandro opened this issue 2 months ago • 3 comments

Closes #8339

Several components like Dialog and Select set data-pressed="true" on the trigger while the corresponding overlay is open, which is often not desired for styling. As outlined in the issue, a new property has been added to these components to prevent this behavior. The default value is true, so the behavior remains unchanged by default.

Naming: A few names for the property were suggested in the issue. I used isPressedWhenOpen on trigger components (DialogTrigger, MenuTrigger), and isTriggerPressedWhenOpen for other components to make it clear that the property affects the trigger.

I think it's easier to understand than consideredPressedWhenOpen. And persistPressStateWhenOpen doesn't feel right for me for components like Menu which open the overlay on press start and therefore never have data-pressed=true with the new behavior.

Storybook: I added a new control to the corresponding RAC stories which already used Story controls. Most of them don't and I didn't add a separate Story for it. If I should add them, let me know.

Spectrum: I also updated the S2 components, I hope that's okay.

  • The new property is omitted in the S2 props interfaces, I don't think it makes sense to set this from outside. This could be a breaking change on type-level in some edge cases, if someone expects the S2 DialogTriggerProps to fully extend the RAC DialogTriggerProps (which was the case before). Is that ok?
  • The workarounds to prevent stuck scale effects (isPressed={false}) are removed.
  • Some components have a custom implementation for pressed state (as the scale effect wouldn't be triggered otherwise). This is still necessary and not removed. I also added this workaround to the TabsPicker component.

✅ Pull Request Checklist:

  • [x] Included link to corresponding React Spectrum GitHub Issue.
  • [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • [x] 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:

  1. Start Storybook yarn start
  2. Open the RAC Select Example
  3. Open the select
  4. Inspect the trigger button => data-pressed="true"
  5. Set the story control isTriggerPressedWhenOpen to false
  6. Inspect the trigger button => data-pressed is not set anymore

🧢 Your Project:

rothsandro avatar Oct 04 '25 16:10 rothsandro