fix: add note about exception based on source code

[travisrcory]

This PR attempts to add a note to the styling when using the tailwind plugin to help catch the gotchas in the source code for how some of the data attributes map onto to tailwind selectors. Thaknks!

Closes

✅ 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
• I understand every change in this PR and can explain why it's there.
• If AI-assisted, I followed our AI contribution guidance and pointed my assistant at CLAUDE.md.

📝 Test Instructions:

🧢 Your Project:

[snowystinger]

this is covered in the next section no?

[travisrcory]

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]

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

[travisrcory]

That sounds great, I'll make that update!

[travisrcory]

I made the update in 1374611.

Full disclosure, I used an LLM to double check the source code and ensure that I pulled in the correct states. The LLM used this file from the source code as evidence for the additional states I added. Looking at it, it seems correct. I worry it might be too much information, but I was erroring on the side of surfacing all potential states. I'm happy to update this to just use the initial states that might cause some confusion for users!

Thanks again, I'm really enjoying using react aria components and I appreciate the tooling you all have made available to the community!

[snowystinger]

Right idea, but it doesn't quite look right. I think we must not have support for that syntax just yet.

I think you can do something like this for now

import {StaticTable} from '../../src/StaticTable';

<StaticTable
  headers={['State', 'Tailwind class']}
  rows={[
    ['data-allows-removing', 'allows-removing:'],
    ['data-open', 'open:'],
    ['data-placement="left"', 'placement-left:']
  ]}
  codeColumns={[0, 1]}
/>

[snowystinger]

I'd just move these back together

[travisrcory]

ah crap, I removed your review @snowystinger when I committed your suggested change 🤦

Thanks again for reviewing this! :)