feat: add AttachmentGrid component by DPandyan · Pull Request #10561 · adobe/react-spectrum

DPandyan · 2026-09-03T16:59:13Z

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:

Adobe

rspbot · 2026-09-03T17:05:13Z

Build successful! 🎉

rspbot · 2026-09-03T17:38:55Z

Build successful! 🎉

DPandyan · 2026-09-03T17:17:20Z

+  ...focusRing()
+});
+
+const gridGap = css('gap: 6px;');


I can swap this out for 8px, Figma had 6, wasn't sure.

you can use custom values in a style macro like so
gap: '[6px]'
or if it needs to respond to font size or scaling, you can make use of size() or space()
https://react-spectrum.adobe.com/style-macro#space

is it really a static 6px at all sizes? Feels like the scale should change the gap size

DPandyan · 2026-09-03T17:32:09Z

  )
 };

+export const WithAttachmentGrid: Story = {


Thought this would be a useful story, can remove.

DPandyan · 2026-09-03T17:46:16Z

+export const Overflow: Story = {
+  name: 'Overflow (vertical scroll fade)',
+  render: args => (
+    <div style={{width: 320, resize: 'horizontal', overflow: 'hidden'}}>


maybe this needs padding

rspbot · 2026-09-03T17:52:17Z

Build successful! 🎉

LFDanLu · 2026-09-03T20:08:20Z

+  ...focusRing()
+});
+
+const gridGap = css('gap: 6px;');


is it really a static 6px at all sizes? Feels like the scale should change the gap size

LFDanLu · 2026-09-03T20:12:26Z

+  let domRef = useDOMRef(ref);
+
+  return (
+    <ListBox


should the container have a focus ring? Or are the items focusable its hard to tell

I don't think the individual items should be focusable/interactable but perhaps the grid/container itself should have a focus ring. You are supposed to be able to scroll it with keyboard when focused.

snowystinger · 2026-09-03T20:10:33Z

+const hasContent = ':has([data-slot=content])';
+
+const gridStyles = style({
+  display: 'grid',


Can there be a mix of cards that are thumbnails and cards that have the description?

no, the card types can't be mixed (at least following AttachmentList)

snowystinger · 2026-09-03T20:15:25Z

+const gridStyles = style({
+  display: 'grid',
+  gridTemplateColumns: {
+    default: 'repeat(auto-fill, minmax(64px, 1fr))',


If the container is wide and there aren't enough thumbs to fill it in the first row, i think they'll end up spaced apart
I think you just want

default: 'repeat(auto-fill, minmax(64px, auto))'

though that only matters if the attachments can be varying sizes, if they can't, then you could just do

default: 'repeat(auto-fill, 64px)'

We had a discussion about this in one of our team meetings. We're unsure if it should be justified space around as you have it here, or left justified... or what, can you follow up with the designer?

snowystinger · 2026-09-03T20:17:48Z

+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
+  /** Whether the attachment has an error. */
+  isInvalid?: boolean;
+  uploadProgress?: number;


missing description

snowystinger · 2026-09-03T20:19:17Z

+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      aria-describedby={ariaDescribedby}


these and id are all just getting passed straight through, we can use filterDOMProps with labeling set to true
then we can just spread the result of that

rspbot · 2026-09-09T17:39:06Z

Build successful! 🎉

rspbot · 2026-09-11T17:05:44Z

Build successful! 🎉

rspbot · 2026-09-11T17:05:45Z

## API Changes

@react-spectrum/ai

/@react-spectrum/ai:AttachmentGrid

+AttachmentGrid <T> {
+  align?: 'start' | 'center' | 'end' = 'start'
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | (T) => ReactNode
+  dependencies?: ReadonlyArray<any>
+  id?: string
+  items?: Iterable<T>
+  styles?: StyleString
+}

/@react-spectrum/ai:AttachmentGridItem

+AttachmentGridItem {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  id?: Key
+  isInvalid?: boolean
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL'
+  styles?: StyleString
+  textValue?: string
+  uploadProgress?: number
+}

/@react-spectrum/ai:AttachmentGridProps

+AttachmentGridProps <T> {
+  align?: 'start' | 'center' | 'end' = 'start'
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | (T) => ReactNode
+  dependencies?: ReadonlyArray<any>
+  id?: string
+  items?: Iterable<T>
+  styles?: StyleString
+}

/@react-spectrum/ai:AttachmentGridItemProps

+AttachmentGridItemProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  id?: Key
+  isInvalid?: boolean
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL'
+  styles?: StyleString
+  textValue?: string
+  uploadProgress?: number
+}

rspbot · 2026-09-11T17:05:46Z

Agent Skills Changes

Modified (9)

react-aria/agent-skills/index.json $\color{green}{+1}$ $\color{red}{-1}$
react-aria/agent-skills/react-aria.tar.gz
react-aria/agent-skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
s2/agent-skills/index.json $\color{green}{+3}$ $\color{red}{-3}$
s2/agent-skills/migrate-react-spectrum-v3-to-s2.tar.gz
s2/agent-skills/react-spectrum-s2.tar.gz
s2/agent-skills/react-spectrum-s2/references/guides/ai-components.md $\color{red}{-17}$
s2/agent-skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/6edbbf89beef6c20b802e06ef9ec322298e813e2/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/6edbbf89beef6c20b802e06ef9ec322298e813e2/

github-actions Bot added AttachmentList AI labels Sep 3, 2026

DPandyan changed the title ~~add: AttachmentGrid component~~ feat: add AttachmentGrid component Sep 3, 2026

DPandyan commented Sep 3, 2026

View reviewed changes

LFDanLu added the release label Sep 3, 2026

DPandyan marked this pull request as ready for review September 3, 2026 17:55

LFDanLu reviewed Sep 3, 2026

View reviewed changes

snowystinger reviewed Sep 3, 2026

View reviewed changes

LFDanLu removed the release label Sep 3, 2026

Daniel Pandyan added 7 commits September 10, 2026 15:08

add: AttachmentGrid component

6c15536

fix: remove extra focus

a130824

fix: remove padding on story

230b313

fix: add scrollbar + try gap fixes

a9f231b

fix: lint + remove custom scroll bars

aea82f2

fix: align + remove UserMessage story

c9651b5

fix: remove renderprops

6edbbf8

DPandyan force-pushed the attachmentgrid branch from eeb779f to 6edbbf8 Compare September 11, 2026 16:58

Uh oh!

Conversation

DPandyan commented Sep 3, 2026

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Sep 3, 2026

Uh oh!

rspbot commented Sep 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 9, 2026

Uh oh!

rspbot commented Sep 11, 2026

Uh oh!

rspbot commented Sep 11, 2026

@react-spectrum/ai

/@react-spectrum/ai:AttachmentGrid

/@react-spectrum/ai:AttachmentGridItem

/@react-spectrum/ai:AttachmentGridProps

/@react-spectrum/ai:AttachmentGridItemProps

Uh oh!

rspbot commented Sep 11, 2026

Agent Skills Changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants