Skip to content

fix: add note about exception based on source code #10574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
travisrcory wants to merge 1 commit into
base: main
Choose a base branch
from
+9 −0
Open

fix: add note about exception based on source code #10574

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/dev/s2-docs/pages/react-aria/styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,15 @@ Non-boolean states follow the `{name}-{value}` pattern. For example, an element
</Tabs>
```

### Exceptions

@snowystinger snowystinger Sep 6, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is covered in the next section no?

@travisrcory travisrcory Sep 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kinda, the gotcha my team ran into was that "hovered" uses "hover" instead of "hovered" which would one might expect at first glance at the docs (unless I'm not reading them closely!).

@snowystinger snowystinger Sep 7, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see the confusion. I think it's covered by

and native CSS pseudo classes

which, native CSS doesn't have a hovered

though that

when the names conflict

I think is making it a little confusing

Instead of it being an exceptions section, we could put in a mapping of all the pseudo selectors and their data attribute equivalent in a Disclosure in the Modifier prefix section


There are a few exceptions to how states with the `data-` prefix are styled in Tailwind:

* `data-hovered` is styled with `hover:`
* `data-focused` is styled with `focus:`
* `data-readonly` is styled with `read-only:`
* `data-placeholder` is styled with `placeholder-shown:`

### Modifier prefix

By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS that automatically handles both React Aria Components and native CSS pseudo classes when the names conflict. If you prefer, you can optionally prefix all React Aria Components modifiers with a string of your choice.
Expand Down