feat: Update AttachmentList to support Illustrations for preview and update invalid styling for preview only

[LFDanLu]

From testing + local testing. Updates AttachmentList to use Illustrations instead of Icons for previews, updates invalid styling for preview only attachments (opacity + adds invalid icon to center of the attachment), and removes reliance on HorizontalCard since that isn't meant have the same styling (S2 vs AI styling)

✅ 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:

Test the "Mixed attachments" story across invalid/in progress upload/etc. Also test isInvalid + only image preview via the "AI attachments" story.

🧢 Your Project:

RSP

[rspbot]

Build successful! 🎉

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

[snowystinger]

fully delete the HorizontalCard file?

couple quick things

[rspbot]

Build successful! 🎉

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

[rspbot]

Agent Skills Changes

Modified (2)

• react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/cff01057bbcc19d0513daf08b0c33037e6b434ca/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/cff01057bbcc19d0513daf08b0c33037e6b434ca/

[snowystinger]

Looks pretty good. I assume the invalid to the right of the text is by design? It'd be nice if it replaced the thumb/icon just like the square ones, it'd take up less space and wouldn't shift things if it became invalid then valid or vice versa

[LFDanLu]

@snowystinger I actually can't find the design for the invalid state when there is text in the attachment (or the designs for the attachment at all haha). The replacing thumb/icon with the error icon was made up by me btw haha, but if ppl like it I think we could roll with that across the board. One thing to keep in mind though is that Coworker has a "valid" state too to signify that validation has been carried out which occupies a similar position and I can see an argument of not replacing the thumbnail in that case