From 2c29f955cb1b8e009e0f5477e8fd4aee46f9649d Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:07:38 -0800
Subject: [PATCH 1/6] chore: add autofill stories

---
 .../stories/Form.stories.tsx                  | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 packages/react-aria-components/stories/Form.stories.tsx

diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
new file mode 100644
index 00000000000..98ade1ec7ff
--- /dev/null
+++ b/packages/react-aria-components/stories/Form.stories.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import {Button, FileTrigger, Form, Input, Label, ListBox, ListBoxItem, Link, Popover, Select, SelectValue, TextField} from 'react-aria-components';
+import React from 'react';
+
+export default {
+  title: 'React Aria Components'
+};
+
+
+export const FormExample = () => {
+  return (
+    <Form
+      onSubmit={e => {
+        action('onSubmit')(Object.fromEntries(new FormData(e.target as HTMLFormElement).entries()));
+        e.preventDefault();
+    }}>
+      <TextField data-testid="textfield-example">
+        <Label>First name</Label>
+        <Input type="text" id="firstName" autoComplete='given-name'/>
+      </TextField>
+      <Select id="favoriteAnimal" autoComplete='on'>
+        <Label>Favorite Animal</Label>
+        <Button>
+          <SelectValue />
+          <span aria-hidden="true">▼</span>
+        </Button>
+        <Popover>
+          <ListBox>
+            <ListBoxItem>Aardvark</ListBoxItem>
+            <ListBoxItem>Cat</ListBoxItem>
+            <ListBoxItem>Dog</ListBoxItem>
+            <ListBoxItem>Kangaroo</ListBoxItem>
+            <ListBoxItem>Panda</ListBoxItem>
+            <ListBoxItem>Snake</ListBoxItem>
+          </ListBox>
+        </Popover>
+      </Select>
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+

From dbaefb133c422fd19a2b4065456fc62d47e4894c Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 4 Feb 2025 15:24:39 -0800
Subject: [PATCH 2/6] add more components to form stories

---
 .../stories/Form.stories.tsx                  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
index 98ade1ec7ff..5c26d814317 100644
--- a/packages/react-aria-components/stories/Form.stories.tsx
+++ b/packages/react-aria-components/stories/Form.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Button, FileTrigger, Form, Input, Label, ListBox, ListBoxItem, Link, Popover, Select, SelectValue, TextField} from 'react-aria-components';
+import {Button, FileTrigger, Form, Group, Input, Label, ListBox, ListBoxItem, Link, NumberField, Popover, Select, SelectValue, TextField} from 'react-aria-components';
 import React from 'react';
 
 export default {
@@ -28,9 +28,13 @@ export const FormExample = () => {
     }}>
       <TextField data-testid="textfield-example">
         <Label>First name</Label>
-        <Input type="text" id="firstName" autoComplete='given-name'/>
+        <Input name="firstName" type="text" id="firstName" autoComplete='given-name'/>
       </TextField>
-      <Select id="favoriteAnimal" autoComplete='on'>
+      <TextField data-testid="textfield-example">
+        <Label>Width</Label>
+        <Input name="width" type="text" id="width" autoComplete='on'/>
+      </TextField>
+      <Select name="favoriteAnimal" id="favoriteAnimal" autoComplete='animal'>
         <Label>Favorite Animal</Label>
         <Button>
           <SelectValue />
@@ -47,6 +51,15 @@ export const FormExample = () => {
           </ListBox>
         </Popover>
       </Select>
+      <NumberField name="width" id="width" minValue={0}>
+        <Label>Width</Label>
+        <Group>
+          <Button slot="decrement">-</Button>
+          <Input autoComplete='on'/>
+          <Button slot="increment">+</Button>
+        </Group>
+      </NumberField>
+      <input type="date" id="bday" name="bday" autoComplete="bday"/>
       <Button type="submit">Submit</Button>
     </Form>
   );

From ec10e2f85e51bca71c9861a1380d312b90dc2932 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 4 Feb 2025 17:53:14 -0800
Subject: [PATCH 3/6] make autocomplete form more realistic

---
 .../stories/Form.stories.tsx                  | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
index 5c26d814317..9e00dead300 100644
--- a/packages/react-aria-components/stories/Form.stories.tsx
+++ b/packages/react-aria-components/stories/Form.stories.tsx
@@ -22,44 +22,44 @@ export default {
 export const FormExample = () => {
   return (
     <Form
+      aria-label="Shipping information"
       onSubmit={e => {
         action('onSubmit')(Object.fromEntries(new FormData(e.target as HTMLFormElement).entries()));
         e.preventDefault();
     }}>
-      <TextField data-testid="textfield-example">
-        <Label>First name</Label>
-        <Input name="firstName" type="text" id="firstName" autoComplete='given-name'/>
+      <TextField>
+        <Label>Address</Label>
+        <Input name="streetAddress" type="text" id="streetAddress" autoComplete='shipping street-address'/>
       </TextField>
-      <TextField data-testid="textfield-example">
-        <Label>Width</Label>
-        <Input name="width" type="text" id="width" autoComplete='on'/>
+      <TextField>
+        <Label>City</Label>
+        <Input name="city" type="text" id="city" autoComplete='shipping address-level2'/>
       </TextField>
-      <Select name="favoriteAnimal" id="favoriteAnimal" autoComplete='animal'>
-        <Label>Favorite Animal</Label>
+      <TextField>
+        <Label>State</Label>
+        <Input name="state" type="text" id="state" autoComplete='shipping address-level1'/>
+      </TextField>
+      <TextField>
+        <Label>Zip</Label>
+        <Input name="city" type="text" id="city" autoComplete='shipping postal-code'/>
+      </TextField>
+      <Select name="country" id="country" autoComplete='shipping country'>
+        <Label>Country</Label>
         <Button>
           <SelectValue />
           <span aria-hidden="true">▼</span>
         </Button>
         <Popover>
           <ListBox>
-            <ListBoxItem>Aardvark</ListBoxItem>
-            <ListBoxItem>Cat</ListBoxItem>
-            <ListBoxItem>Dog</ListBoxItem>
-            <ListBoxItem>Kangaroo</ListBoxItem>
-            <ListBoxItem>Panda</ListBoxItem>
-            <ListBoxItem>Snake</ListBoxItem>
+            <ListBoxItem>Greece</ListBoxItem>
+            <ListBoxItem>Italy</ListBoxItem>
+            <ListBoxItem>Spain</ListBoxItem>
+            <ListBoxItem>Mexico</ListBoxItem>
+            <ListBoxItem>Canada</ListBoxItem>
+            <ListBoxItem>United States</ListBoxItem>
           </ListBox>
         </Popover>
       </Select>
-      <NumberField name="width" id="width" minValue={0}>
-        <Label>Width</Label>
-        <Group>
-          <Button slot="decrement">-</Button>
-          <Input autoComplete='on'/>
-          <Button slot="increment">+</Button>
-        </Group>
-      </NumberField>
-      <input type="date" id="bday" name="bday" autoComplete="bday"/>
       <Button type="submit">Submit</Button>
     </Form>
   );

From 997e74e63532a968d8277ccbd22c5c3fcbdcba1a Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 4 Feb 2025 17:53:38 -0800
Subject: [PATCH 4/6] rename story

---
 packages/react-aria-components/stories/Form.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
index 9e00dead300..48eaf126352 100644
--- a/packages/react-aria-components/stories/Form.stories.tsx
+++ b/packages/react-aria-components/stories/Form.stories.tsx
@@ -19,7 +19,7 @@ export default {
 };
 
 
-export const FormExample = () => {
+export const FormAutoFillExample = () => {
   return (
     <Form
       aria-label="Shipping information"

From df4ad8242241bf9959c9148d20b4be683ab320df Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 5 Feb 2025 10:33:50 -0800
Subject: [PATCH 5/6] fix lint

---
 .../react-aria-components/stories/Form.stories.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
index 48eaf126352..6af26826533 100644
--- a/packages/react-aria-components/stories/Form.stories.tsx
+++ b/packages/react-aria-components/stories/Form.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Button, FileTrigger, Form, Group, Input, Label, ListBox, ListBoxItem, Link, NumberField, Popover, Select, SelectValue, TextField} from 'react-aria-components';
+import {Button, Form, Input, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, TextField} from 'react-aria-components';
 import React from 'react';
 
 export default {
@@ -26,24 +26,24 @@ export const FormAutoFillExample = () => {
       onSubmit={e => {
         action('onSubmit')(Object.fromEntries(new FormData(e.target as HTMLFormElement).entries()));
         e.preventDefault();
-    }}>
+      }}>
       <TextField>
         <Label>Address</Label>
-        <Input name="streetAddress" type="text" id="streetAddress" autoComplete='shipping street-address'/>
+        <Input name="streetAddress" type="text" id="streetAddress" autoComplete="shipping street-address" />
       </TextField>
       <TextField>
         <Label>City</Label>
-        <Input name="city" type="text" id="city" autoComplete='shipping address-level2'/>
+        <Input name="city" type="text" id="city" autoComplete="shipping address-level2" />
       </TextField>
       <TextField>
         <Label>State</Label>
-        <Input name="state" type="text" id="state" autoComplete='shipping address-level1'/>
+        <Input name="state" type="text" id="state" autoComplete="shipping address-level1" />
       </TextField>
       <TextField>
         <Label>Zip</Label>
-        <Input name="city" type="text" id="city" autoComplete='shipping postal-code'/>
+        <Input name="city" type="text" id="city" autoComplete="shipping postal-code" />
       </TextField>
-      <Select name="country" id="country" autoComplete='shipping country'>
+      <Select name="country" id="country" autoComplete="shipping country">
         <Label>Country</Label>
         <Button>
           <SelectValue />

From 67fd9db2f0e1fbc40e05d85a46b52a8e60945104 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 5 Feb 2025 16:05:47 -0800
Subject: [PATCH 6/6] add picker to s2 form story

---
 packages/@react-spectrum/s2/stories/Form.stories.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/@react-spectrum/s2/stories/Form.stories.tsx b/packages/@react-spectrum/s2/stories/Form.stories.tsx
index 4d2e53e7a4a..2392c3c5b01 100644
--- a/packages/@react-spectrum/s2/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Form.stories.tsx
@@ -67,6 +67,12 @@ export const Example = (args: any) => (
     <TextField label="First Name" name="firstName" />
     <TextField label="Last Name" name="firstName" />
     <TextField label="Email" name="email" type="email" description="Enter an email" />
+    <Picker label="Country" name="country">
+      <PickerItem id="canada">Canada</PickerItem>
+      <PickerItem id="united-states">United States</PickerItem>
+      <PickerItem id="mexico">Mexico</PickerItem>
+      <PickerItem id="argentina">Argentina</PickerItem>
+    </Picker>
     <CheckboxGroup label="Favorite sports">
       <Checkbox value="soccer">Soccer</Checkbox>
       <Checkbox value="baseball">Baseball</Checkbox>