react-spectrum
react-spectrum copied to clipboard
feat: allow customizing behavior of pressed state
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
DialogTriggerPropsto fully extend the RACDialogTriggerProps(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
TabsPickercomponent.
✅ 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:
- Start Storybook
yarn start - Open the RAC Select Example
- Open the select
- Inspect the trigger button =>
data-pressed="true" - Set the story control
isTriggerPressedWhenOpentofalse - Inspect the trigger button =>
data-pressedis not set anymore