chore: GridListSection docs testing followup (#9475)

* chore: GridListSection docs testing follow-up

* fix listbox sections

Author: yihuiliao

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

@@ -564,8 +564,8 @@ import {GridListHeader, GridListSection, Text} from 'react-aria-components';
       </GridListItem>
     </GridListSection>
     <GridListSection>
-        <GridListHeader>Vegetables</GridListHeader>
-        <GridListItem textValue="Broccoli">
+      <GridListHeader>Vegetables</GridListHeader>
+      <GridListItem textValue="Broccoli">
         <img src="https://images.unsplash.com/photo-1685504445355-0e7bdf90d415?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
         <Text>Broccoli</Text>
         <Text slot="description">PNG • 5/30/2023</Text>

starters/docs/src/GridList.css

@@ -16,6 +16,10 @@
   box-sizing: border-box;
   --grid-item-size: 200px;
 
+  &:has(.react-aria-GridListSection) {
+    scroll-padding: 50px;
+  }
+
   &[data-layout=grid]:not(:has(.react-aria-GridListSection)) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, var(--grid-item-size)));
@@ -266,7 +270,7 @@
   font-size: var(--font-size-lg);
   font-weight: 500;
   background: var(--gray-100);
-  border-block: 0.5px solid var(--gray-400);
+  border: 0.5px solid var(--gray-400);
   cursor: default;
   user-select: none;
   box-shadow: inset 0px 1px 0px white, inset 0px -4px 8px var(--gray-200);

starters/docs/src/ListBox.css

@@ -12,6 +12,10 @@
   font: var(--font-size) system-ui;
   color: var(--text-color);
 
+  &:has(.react-aria-ListBoxSection){
+    scroll-padding: 24px;
+  }
+
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: -1px;

starters/docs/stories/ListBox.stories.tsx

@@ -1,4 +1,5 @@
-import {ListBox, ListBoxItem} from '../src/ListBox';
+import {ListBox, ListBoxItem, ListBoxSection} from '../src/ListBox';
+import {Header} from 'react-aria-components';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
@@ -26,3 +27,26 @@ Example.args = {
   onAction: undefined,
   selectionMode: 'single'
 };
+
+export const Sections: Story = (args) => (
+  <ListBox aria-label="Sandwich contents" selectionMode="multiple">
+  <ListBoxSection>
+    <Header>Veggies</Header>
+    <ListBoxItem id="lettuce">Lettuce</ListBoxItem>
+    <ListBoxItem id="tomato">Tomato</ListBoxItem>
+    <ListBoxItem id="onion">Onion</ListBoxItem>
+  </ListBoxSection>
+  <ListBoxSection>
+    <Header>Protein</Header>
+    <ListBoxItem id="ham">Ham</ListBoxItem>
+    <ListBoxItem id="tuna">Tuna</ListBoxItem>
+    <ListBoxItem id="tofu">Tofu</ListBoxItem>
+  </ListBoxSection>
+  <ListBoxSection>
+    <Header>Condiments</Header>
+    <ListBoxItem id="mayo">Mayonaise</ListBoxItem>
+    <ListBoxItem id="mustard">Mustard</ListBoxItem>
+    <ListBoxItem id="ranch">Ranch</ListBoxItem>
+  </ListBoxSection>
+</ListBox>
+)