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

bump on this, still missing a description. Mind adding some docs for this as well? Can just go under the ai-components docs

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! 🎉

LFDanLu

Looks pretty good, just a couple of small comments

LFDanLu · 2026-09-24T18:26:30Z

+  overflowY: 'auto',
+  overflowX: 'clip',
+  boxSizing: 'border-box',
+  ...focusRing()


doesn't seem like this focus ring is appearing on the grid, maybe getting clipped or something?

I figured out what was happening, it was being clipped and even when I added some offset it needed some padding so that it didn't overlap with the grid items.

LFDanLu · 2026-09-24T18:27:33Z

+    }
+  },
+  gap: 8,
+  maxHeight: 240,


is this height defined explicitly in the design or should it be customizable by the user?

So in the designs a bunch of the examples had a maxHeight of 240, but one of them was 190. I swapped it to inherit, that probably makes more sense.

LFDanLu · 2026-09-24T18:29:53Z

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


bump on this, still missing a description. Mind adding some docs for this as well? Can just go under the ai-components docs

rspbot · 2026-09-24T19:25:08Z

Build successful! 🎉

yihuiliao · 2026-09-24T21:19:16Z

+  overflowY: 'auto',
+  overflowX: 'clip',
+  boxSizing: 'border-box',
+  ...focusRing(),


nit: should the focus ring have rounded borders? dunno, feel like everything in S2 is rounded so 🤷‍♀️

ik there aren't designs for this so probably fine to leave it as is

yihuiliao · 2026-09-24T21:20:44Z

+/**
+ * An AttachmentGrid displays file attachments as a wrapping, vertically-scrolling grid of
+ * thumbnails. Unlike AttachmentList, it is display-only and does not support selection or removal.
+ * Every attachment is disabled, so the grid itself becomes the sole tab stop, keeping the


do we need this part (aka "every attachment is disabled...")? i feel like it's sorta implied?

yihuiliao · 2026-09-24T21:23:19Z


+#### AttachmentGrid
+
+Use `AttachmentGrid` to display file attachments as a wrapping, vertically-scrolling grid of


wonder if we should have an example of this in a user message somewhere

Yeah I originally had it as part of the UserMessage's story but wasn't sure if that was a good place.

rspbot · 2026-09-24T23:42:17Z

Build successful! 🎉

rspbot · 2026-09-24T23:42:18Z

## 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-24T23:42:20Z

Agent Skills Changes

Modified (13)

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}$
react-aria/agent-skills/react-aria/references/guides/styling.md $\color{red}{-64}$
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/components/Menu.md $\color{red}{-2}$
s2/agent-skills/react-spectrum-s2/references/components/icons.md $\color{red}{-1}$
s2/agent-skills/react-spectrum-s2/references/guides/ai-components.md $\color{green}{+43}$ $\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/react-spectrum-s2/references/react-aria/guides/styling.md $\color{red}{-64}$
s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/8d1c968a9661f4bc012de91d00e4e03062bf5efb/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/8d1c968a9661f4bc012de91d00e4e03062bf5efb/

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

LFDanLu added this to RSP Component Milestones Sep 22, 2026

github-project-automation Bot moved this to 🩺 To Triage in RSP Component Milestones Sep 22, 2026

yihuiliao added the release label Sep 22, 2026

LFDanLu assigned DPandyan Sep 22, 2026

LFDanLu moved this from 🩺 To Triage to 👀 In Review in RSP Component Milestones Sep 22, 2026

LFDanLu added the ready for review label Sep 24, 2026

LFDanLu reviewed Sep 24, 2026

View reviewed changes

add: docs entry, swap to inherit for maxHeight, fix focusRing clipping

2a39f77

github-actions Bot added the S2 label Sep 24, 2026

yihuiliao reviewed Sep 24, 2026

View reviewed changes

fix: update comment + add border radius so focusRing is rounded

8d1c968


		#### AttachmentGrid

		Use `AttachmentGrid` to display file attachments as a wrapping, vertically-scrolling grid of

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!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 9, 2026

Uh oh!

rspbot commented Sep 11, 2026

Uh oh!

LFDanLu left a comment

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 24, 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!

yihuiliao Sep 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 24, 2026

Uh oh!

rspbot commented Sep 24, 2026

@react-spectrum/ai

/@react-spectrum/ai:AttachmentGrid

/@react-spectrum/ai:AttachmentGridItem

/@react-spectrum/ai:AttachmentGridProps

yihuiliao Sep 24, 2026 •

edited

Loading