docs: add GridListSection to the docs #9447

yihuiliao · 2026-01-07T21:28:55Z

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

📝 Test Instructions:

Go to React Aria docs and check under the Sections heading that the example is rendering correctly.

Also test the docs/tailwind starter. There should be a Section story under GridList.

🧢 Your Project:

rspbot · 2026-01-07T21:34:16Z

Build successful! 🎉

rspbot · 2026-01-07T21:41:39Z

Build successful! 🎉

rspbot · 2026-01-07T22:14:18Z

Build successful! 🎉

packages/dev/s2-docs/pages/react-aria/GridList.mdx

rspbot · 2026-01-08T16:02:36Z

Build successful! 🎉

rspbot · 2026-01-08T16:02:36Z

## API Changes

react-aria-components

/react-aria-components:ComboBox

 ComboBox <T extends {}> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<ComboBoxRenderProps>
   className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   form?: string
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: StyleOrFunction<ComboBoxRenderProps>
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:DatePicker

 DatePicker <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<DatePickerRenderProps>
   className?: ClassNameOrFunction<DatePickerRenderProps> = 'react-aria-DatePicker'
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   maxValue?: DateValue | null
   minValue?: DateValue | null
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: StyleOrFunction<DatePickerRenderProps>
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateRangePicker

 DateRangePicker <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<DateRangePickerRenderProps>
   className?: ClassNameOrFunction<DateRangePickerRenderProps> = 'react-aria-DateRangePicker'
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   endName?: string
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   startName?: string
   style?: StyleOrFunction<DateRangePickerRenderProps>
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

/react-aria-components:DialogTrigger

 DialogTrigger {
   children: ReactNode
   defaultOpen?: boolean
   isOpen?: boolean
-  isTriggerUpWhenOpen?: boolean
   onOpenChange?: (boolean) => void
 }

/react-aria-components:MenuTrigger

 MenuTrigger {
   children: ReactNode
   defaultOpen?: boolean
   isOpen?: boolean
-  isTriggerUpWhenOpen?: boolean
   onOpenChange?: (boolean) => void
   trigger?: MenuTriggerType = 'press'
 }

/react-aria-components:Select

 Select <M extends SelectionMode = 'single', T extends {} = {
   
 }> {
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SelectRenderProps>
   className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
   selectionMode?: SelectionMode = 'single'
   slot?: string | null
   style?: StyleOrFunction<SelectRenderProps>
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

/react-aria-components:ComboBoxProps

 ComboBoxProps <T extends {}> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<ComboBoxRenderProps>
   className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   form?: string
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: StyleOrFunction<ComboBoxRenderProps>
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:DatePickerProps

 DatePickerProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<DatePickerRenderProps>
   className?: ClassNameOrFunction<DatePickerRenderProps> = 'react-aria-DatePicker'
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   maxValue?: DateValue | null
   minValue?: DateValue | null
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   style?: StyleOrFunction<DatePickerRenderProps>
   validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: DateValue | null
 }

/react-aria-components:DateRangePickerProps

 DateRangePickerProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<DateRangePickerRenderProps>
   className?: ClassNameOrFunction<DateRangePickerRenderProps> = 'react-aria-DateRangePicker'
   defaultOpen?: boolean
   defaultValue?: RangeValue<DateValue> | null
   endName?: string
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
   shouldCloseOnSelect?: boolean | () => boolean = true
   shouldForceLeadingZeros?: boolean
   slot?: string | null
   startName?: string
   style?: StyleOrFunction<DateRangePickerRenderProps>
   validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: RangeValue<DateValue> | null
 }

/react-aria-components:DialogTriggerProps

 DialogTriggerProps {
   children: ReactNode
   defaultOpen?: boolean
   isOpen?: boolean
-  isTriggerUpWhenOpen?: boolean
   onOpenChange?: (boolean) => void
 }

/react-aria-components:MenuTriggerProps

 MenuTriggerProps {
   children: ReactNode
   defaultOpen?: boolean
   isOpen?: boolean
-  isTriggerUpWhenOpen?: boolean
   onOpenChange?: (boolean) => void
   trigger?: MenuTriggerType = 'press'
 }

/react-aria-components:SelectProps

 SelectProps <M extends SelectionMode = 'single', T extends {} = {
   
 }> {
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ChildrenOrFunction<SelectRenderProps>
   className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
   defaultOpen?: boolean
   defaultValue?: ValueType<SelectionMode>
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
-  isTriggerUpWhenOpen?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (ChangeValueType<SelectionMode>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   placeholder?: string = 'Select an item' (localized)
   selectionMode?: SelectionMode = 'single'
   slot?: string | null
   style?: StyleOrFunction<SelectRenderProps>
   validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
   value?: ValueType<SelectionMode>
 }

@react-spectrum/s2

/@react-spectrum/s2:DialogTrigger

 DialogTrigger {
-
+  children: ReactNode
+  defaultOpen?: boolean
+  isOpen?: boolean
+  onOpenChange?: (boolean) => void
 }

/@react-spectrum/s2:DialogTriggerProps

 DialogTriggerProps {
-  D: undefined
+  children: ReactNode
+  defaultOpen?: boolean
+  isOpen?: boolean
+  onOpenChange?: (boolean) => void
 }

snowystinger

Like where this is going, see if anyone else agrees about the heading size

snowystinger · 2026-01-09T00:24:05Z

packages/dev/s2-docs/pages/react-aria/GridList.mdx

+  layout="grid"
+  aria-label="Photos">
+    <GridListSection>
+      <GridListHeader>Fruit</GridListHeader>


Can we make the Header a larger size? it's a bit small compared to the cards and their titles

yihuiliao added 4 commits January 7, 2026 16:25

docs: add gridlist section to docs

926c3d1

add gridlist section to tailwind starter

eee020d

fix space

88495fb

fix css

4f75b13

yihuiliao added 2 commits January 7, 2026 16:58

fix gridlistheader prop table

77fb608

Merge branch 'main' into gridlist-section-docs

650ddf9

snowystinger reviewed Jan 7, 2026

View reviewed changes

packages/dev/s2-docs/pages/react-aria/GridList.mdx Outdated Show resolved Hide resolved

update css

5d49111

reidbarber approved these changes Jan 8, 2026

View reviewed changes

snowystinger approved these changes Jan 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: add GridListSection to the docs #9447

docs: add GridListSection to the docs #9447

yihuiliao commented Jan 7, 2026 •

edited

Loading

Uh oh!

rspbot commented Jan 7, 2026

Uh oh!

rspbot commented Jan 7, 2026

Uh oh!

rspbot commented Jan 7, 2026

Uh oh!

Uh oh!

rspbot commented Jan 8, 2026

Uh oh!

rspbot commented Jan 8, 2026

Uh oh!

snowystinger left a comment

Uh oh!

snowystinger Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

docs: add GridListSection to the docs #9447

Are you sure you want to change the base?

docs: add GridListSection to the docs #9447

Conversation

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

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Jan 7, 2026

Uh oh!

rspbot commented Jan 7, 2026

Uh oh!

rspbot commented Jan 7, 2026

Uh oh!

Uh oh!

rspbot commented Jan 8, 2026

Uh oh!

rspbot commented Jan 8, 2026

react-aria-components

/react-aria-components:ComboBox

/react-aria-components:DatePicker

/react-aria-components:DateRangePicker

/react-aria-components:DialogTrigger

/react-aria-components:MenuTrigger

/react-aria-components:Select

/react-aria-components:ComboBoxProps

/react-aria-components:DatePickerProps

/react-aria-components:DateRangePickerProps

/react-aria-components:DialogTriggerProps

/react-aria-components:MenuTriggerProps

/react-aria-components:SelectProps

@react-spectrum/s2

/@react-spectrum/s2:DialogTrigger

/@react-spectrum/s2:DialogTriggerProps

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

snowystinger Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

yihuiliao commented Jan 7, 2026 •

edited

Loading