From 371b41628cba9ce355e2de82cff5ff2436a48d44 Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Tue, 14 Sep 2021 15:53:34 -0700
Subject: [PATCH 1/7] fixing combobox to use useFormProps and adding more
 component to storybook/chromatic

---
 .../form/chromatic/Form.chromatic.tsx         | 22 ++++++
 .../form/stories/Form.stories.tsx             | 12 +++
 packages/@react-spectrum/label/package.json   |  1 +
 packages/@react-spectrum/label/src/Field.tsx  |  2 +
 .../numberfield/src/NumberField.tsx           |  2 -
 .../@react-spectrum/picker/src/Picker.tsx     |  2 -
 .../provider/chromatic/Provider.chromatic.tsx | 76 ++++++++++++++++++-
 .../provider/stories/Provider.stories.tsx     | 35 ++++++++-
 .../searchwithin/src/SearchWithin.tsx         |  3 -
 .../textfield/src/TextFieldBase.tsx           |  4 -
 10 files changed, 145 insertions(+), 14 deletions(-)

diff --git a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
index ba636bfa7a1..9158aa03e1a 100644
--- a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
+++ b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
@@ -11,12 +11,16 @@
  */
 
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ColorField} from '@react-spectrum/color';
+import {ComboBox} from '@react-spectrum/combobox';
 import {Form} from '../';
 import {Item, Picker} from '@react-spectrum/picker';
 import {Meta, Story} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '@react-spectrum/searchwithin';
 import {SpectrumFormProps} from '@react-types/form';
 import {TextArea, TextField} from '@react-spectrum/textfield';
 
@@ -50,6 +54,20 @@ const Template = (): Story<SpectrumFormProps> => (args) => (
       <Radio value="dragons">Dragons</Radio>
     </RadioGroup>
     <TextArea label="Comments" placeholder="How do you feel?" />
+    <ColorField label="Primary Color" />
+    <ComboBox label="More Animals">
+      <Item key="red panda">Red Panda</Item>
+      <Item key="aardvark">Aardvark</Item>
+      <Item key="kangaroo">Kangaroo</Item>
+      <Item key="snake">Snake</Item>
+    </ComboBox>
+    <SearchField label="Search" />
+    <SearchWithin label="Search">
+      <SearchField placeholder="Search" />
+      <Picker label="State" placeholder="Select a state" items={flatOptions}>
+        {item => <Item key={item.id}>{item.name}</Item>}
+      </Picker>
+    </SearchWithin>
   </Form>
 );
 
@@ -66,6 +84,10 @@ export const LabelAlignEnd = Template().bind({});
 LabelAlignEnd.storyName = 'label align: end';
 LabelAlignEnd.args = {...Default.args, labelAlign: 'end'};
 
+export const LabelAlignSideEnd = Template().bind({});
+LabelAlignSideEnd.storyName = 'label position: side, label align: end';
+LabelAlignSideEnd.args = {...Default.args, labelPosition: 'side', labelAlign: 'end'};
+
 export const Required = Template().bind({});
 Required.storyName = 'isRequired';
 Required.args = {...Default.args, isRequired: true};
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index ff721186322..9b669d25f75 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -14,6 +14,8 @@ import {action} from '@storybook/addon-actions';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ColorField} from '@react-spectrum/color';
+import {ComboBox} from '@react-spectrum/combobox';
 import {countries, states} from './data';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '../';
@@ -24,6 +26,7 @@ import React, {Key, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SearchWithin} from '@react-spectrum/searchwithin';
 import {storiesOf} from '@storybook/react';
+import {Switch} from '@react-spectrum/switch';
 import {TextArea, TextField} from '@react-spectrum/textfield';
 
 storiesOf('Form', module)
@@ -150,6 +153,13 @@ function render(props: any = {}) {
         <Checkbox value="cats">Cats</Checkbox>
         <Checkbox value="dragons">Dragons</Checkbox>
       </CheckboxGroup>
+      <ColorField label="Primary Color" />
+      <ComboBox label="More Animals">
+        <Item key="red panda">Red Panda</Item>
+        <Item key="aardvark">Aardvark</Item>
+        <Item key="kangaroo">Kangaroo</Item>
+        <Item key="snake">Snake</Item>
+      </ComboBox>
       <RadioGroup label="Favorite pet" name="favorite-pet-group">
         <Radio value="dogs">Dogs</Radio>
         <Radio value="cats">Cats</Radio>
@@ -164,12 +174,14 @@ function render(props: any = {}) {
         <Item>Purple</Item>
       </Picker>
       <TextArea label="Comments" placeholder="How do you feel?" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
+      <SearchField label="Search" />
       <SearchWithin label="Search">
         <SearchField placeholder="Search" />
         <Picker label="State" placeholder="Select a state" items={states}>
           {item => <Item key={item.abbr}>{item.name}</Item>}
         </Picker>
       </SearchWithin>
+      <Switch>Low power mode</Switch>
     </Form>
   );
 }
diff --git a/packages/@react-spectrum/label/package.json b/packages/@react-spectrum/label/package.json
index 2d85421baa2..1b1cd333e52 100644
--- a/packages/@react-spectrum/label/package.json
+++ b/packages/@react-spectrum/label/package.json
@@ -35,6 +35,7 @@
     "@react-aria/i18n": "^3.3.2",
     "@react-aria/label": "^3.2.0",
     "@react-aria/utils": "^3.9.0",
+    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/layout": "^3.2.1",
     "@react-spectrum/utils": "^3.6.2",
     "@react-types/label": "^3.5.0",
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
index b0d758281d0..9d2b19998b9 100644
--- a/packages/@react-spectrum/label/src/Field.tsx
+++ b/packages/@react-spectrum/label/src/Field.tsx
@@ -19,8 +19,10 @@ import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css
 import {mergeProps} from '@react-aria/utils';
 import React, {RefObject} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
+import {useFormProps} from '@react-spectrum/form';
 
 function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
+  props = useFormProps(props);
   let {
     label,
     labelPosition = 'top' as LabelPosition,
diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx
index 055ec301a87..183fb18bc0c 100644
--- a/packages/@react-spectrum/numberfield/src/NumberField.tsx
+++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx
@@ -21,7 +21,6 @@ import {SpectrumNumberFieldProps} from '@react-types/numberfield';
 import {StepButton} from './StepButton';
 import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
-import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useNumberField} from '@react-aria/numberfield';
@@ -30,7 +29,6 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
-  props = useFormProps(props);
   let provider = useProvider();
   let {
     isQuiet,
diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx
index 478c559be09..31b51174232 100644
--- a/packages/@react-spectrum/picker/src/Picker.tsx
+++ b/packages/@react-spectrum/picker/src/Picker.tsx
@@ -39,7 +39,6 @@ import React, {ReactElement, useCallback, useRef, useState} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';
 import {Text} from '@react-spectrum/text';
-import {useFormProps} from '@react-spectrum/form';
 import {useMessageFormatter} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSelectState} from '@react-stately/select';
@@ -47,7 +46,6 @@ import {useSelectState} from '@react-stately/select';
 function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useSlotProps(props, 'picker');
   props = useProviderProps(props);
-  props = useFormProps(props);
   let formatMessage = useMessageFormatter(intlMessages);
   let {
     isDisabled,
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
index c49e09c2367..a0cfbc1785b 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
@@ -11,15 +11,22 @@
  */
 
 import {Button} from '@react-spectrum/button';
-import {Checkbox} from '@react-spectrum/checkbox';
+import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ColorField} from '@react-spectrum/color';
+import {ComboBox} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
+import {Item, Picker} from '@react-spectrum/picker';
+import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '@react-spectrum/searchwithin';
+import {Slider} from '@react-spectrum/slider';
 import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -38,6 +45,48 @@ storiesOf('Provider', module)
   .add(
     'custom theme',
     () => render({theme: THEME})
+  )
+  .add(
+    'nested color schemes',
+    () => (
+      <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
+        <Button variant="primary">I am a dark button</Button>
+        <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
+          <Button variant="primary">I am a light button</Button>
+        </Provider>
+      </Provider>
+    )
+  )
+  .add(
+    'nested props',
+    () => (
+      <Provider isDisabled>
+        <Button variant="primary">I am disabled</Button>
+        <Provider isQuiet>
+          <Button variant="primary">I am disabled and quiet</Button>
+        </Provider>
+      </Provider>
+    )
+  )
+  .add(
+    'isQuiet',
+    () => render({isQuiet: true})
+  )
+  .add(
+    'isEmphasized',
+    () => render({isEmphasized: true})
+  )
+  .add(
+    'isDisabled',
+    () => render({isDisabled: true})
+  )
+  .add(
+    'isReadOnly',
+    () => render({isReadOnly: true})
+  )
+  .add(
+    'isRequired',
+    () => render({isRequired: true})
   );
 
 function render(props = {}) {
@@ -60,6 +109,31 @@ function render(props = {}) {
           <Radio value="cats">Cats</Radio>
           <Radio value="horses">Horses</Radio>
         </RadioGroup>
+        <CheckboxGroup defaultValue={['dragons']} label="Pets">
+          <Checkbox value="dogs">Dogs</Checkbox>
+          <Checkbox value="cats">Cats</Checkbox>
+          <Checkbox value="dragons">Dragons</Checkbox>
+        </CheckboxGroup>
+        <ColorField label="Primary Color" />
+        <ComboBox label="More Animals">
+          <Item key="red panda">Red Panda</Item>
+          <Item key="aardvark">Aardvark</Item>
+          <Item key="kangaroo">Kangaroo</Item>
+          <Item key="snake">Snake</Item>
+        </ComboBox>
+        <NumberField label="Years lived there" />
+        <SearchWithin label="Search">
+          <SearchField placeholder="Search" />
+          <Picker name="favorite-color3" label="Favorite color searchwithin">
+            <Item key="red">Red</Item>
+            <Item key="orange">Orange</Item>
+            <Item key="yellow">Yellow</Item>
+            <Item key="green">Green</Item>
+            <Item key="blue">Blue</Item>
+            <Item key="purple">Purple</Item>
+          </Picker>
+        </SearchWithin>
+        <Slider label="Cookies to buy" defaultValue={12} />
       </Form>
     </Provider>
   );
diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
index 8d362f5e331..1fc8b225a51 100644
--- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
@@ -11,15 +11,22 @@
  */
 
 import {Button} from '@react-spectrum/button';
-import {Checkbox} from '@react-spectrum/checkbox';
+import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
+import {ColorField} from '@react-spectrum/color';
+import {ComboBox} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
+import {Item, Picker} from '@react-spectrum/picker';
+import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '@react-spectrum/searchwithin';
+import {Slider} from '@react-spectrum/slider';
 import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -173,13 +180,37 @@ function render(props = {}) {
           placeholder="Something"
           marginTop="size-100"
           necessityIndicator="label" />
-        <Checkbox>Cats!</Checkbox>
+        <CheckboxGroup defaultValue={['dragons']} label="Pets">
+          <Checkbox value="dogs">Dogs</Checkbox>
+          <Checkbox value="cats">Cats</Checkbox>
+          <Checkbox value="dragons">Dragons</Checkbox>
+        </CheckboxGroup>
+        <ColorField label="Primary Color" />
+        <ComboBox label="More Animals">
+          <Item key="red panda">Red Panda</Item>
+          <Item key="aardvark">Aardvark</Item>
+          <Item key="kangaroo">Kangaroo</Item>
+          <Item key="snake">Snake</Item>
+        </ComboBox>
+        <NumberField label="Years lived there" />
         <Switch>Dogs!</Switch>
         <RadioGroup label="A radio group">
           <Radio value="dogs">Dogs</Radio>
           <Radio value="cats">Cats</Radio>
           <Radio value="horses">Horses</Radio>
         </RadioGroup>
+        <SearchWithin label="Search">
+          <SearchField placeholder="Search" />
+          <Picker name="favorite-color3" label="Favorite color searchwithin">
+            <Item key="red">Red</Item>
+            <Item key="orange">Orange</Item>
+            <Item key="yellow">Yellow</Item>
+            <Item key="green">Green</Item>
+            <Item key="blue">Blue</Item>
+            <Item key="purple">Purple</Item>
+          </Picker>
+        </SearchWithin>
+        <Slider label="Cookies to buy" defaultValue={12} />
       </Form>
     </Provider>
   );
diff --git a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
index 7a19a6dfe84..30641ffca93 100644
--- a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
+++ b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
@@ -16,13 +16,11 @@ import {FocusableRef} from '@react-types/shared';
 import React, {useCallback, useLayoutEffect, useRef, useState} from 'react';
 import {SpectrumSearchWithinProps} from '@react-types/searchwithin';
 import styles from '@adobe/spectrum-css-temp/components/searchwithin/vars.css';
-import {useFormProps} from '@react-spectrum/form';
 import {useLabel} from '@react-aria/label';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
-  props = useFormProps(props);
   let {styleProps} = useStyleProps(props);
   let {labelProps, fieldProps} = useLabel(props);
   let {
@@ -103,4 +101,3 @@ function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLEl
  */
 const _SearchWithin = React.forwardRef(SearchWithin);
 export {_SearchWithin as SearchWithin};
-
diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
index 8c0fbc7504e..ee48ec50349 100644
--- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
+++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
@@ -20,9 +20,7 @@ import {PressEvents} from '@react-types/shared';
 import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
-import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
-import {useProviderProps} from '@react-spectrum/provider';
 
 interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {
   wrapperChildren?: ReactElement | ReactElement[],
@@ -39,8 +37,6 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, P
 }
 
 function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
-  props = useProviderProps(props);
-  props = useFormProps(props);
   let {
     label,
     validationState,

From 7dbdef06766f576a8e4c20ec0017181b30c63093 Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Tue, 14 Sep 2021 16:15:31 -0700
Subject: [PATCH 2/7] updating package.json

---
 packages/@react-spectrum/numberfield/package.json  | 1 -
 packages/@react-spectrum/picker/package.json       | 1 -
 packages/@react-spectrum/searchwithin/package.json | 1 -
 packages/@react-spectrum/textfield/package.json    | 1 -
 4 files changed, 4 deletions(-)

diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json
index d7a2d1bfcf6..b670baff6fc 100644
--- a/packages/@react-spectrum/numberfield/package.json
+++ b/packages/@react-spectrum/numberfield/package.json
@@ -39,7 +39,6 @@
     "@react-aria/numberfield": "^3.1.0",
     "@react-aria/utils": "^3.9.0",
     "@react-spectrum/button": "^3.6.0",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/textfield": "^3.2.0",
     "@react-spectrum/utils": "^3.6.2",
diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json
index 670c5e06b55..e011496fc4b 100644
--- a/packages/@react-spectrum/picker/package.json
+++ b/packages/@react-spectrum/picker/package.json
@@ -39,7 +39,6 @@
     "@react-aria/select": "^3.5.0",
     "@react-aria/utils": "^3.9.0",
     "@react-spectrum/button": "^3.6.0",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/listbox": "^3.5.2",
     "@react-spectrum/overlays": "^3.4.4",
diff --git a/packages/@react-spectrum/searchwithin/package.json b/packages/@react-spectrum/searchwithin/package.json
index 72ef7d62720..e5685ef5ffb 100644
--- a/packages/@react-spectrum/searchwithin/package.json
+++ b/packages/@react-spectrum/searchwithin/package.json
@@ -35,7 +35,6 @@
     "@react-aria/label": "^3.1.3",
     "@react-aria/utils": "^3.8.2",
     "@react-spectrum/label": "^3.3.4",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/utils": "^3.6.2",
     "@react-types/searchwithin": "3.0.0-alpha.0",
     "@react-types/shared": "^3.8.0"
diff --git a/packages/@react-spectrum/textfield/package.json b/packages/@react-spectrum/textfield/package.json
index ddf5e6e651a..8ee819a441b 100644
--- a/packages/@react-spectrum/textfield/package.json
+++ b/packages/@react-spectrum/textfield/package.json
@@ -37,7 +37,6 @@
     "@react-aria/interactions": "^3.6.0",
     "@react-aria/textfield": "^3.4.0",
     "@react-aria/utils": "^3.9.0",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/utils": "^3.6.2",
     "@react-stately/utils": "^3.2.2",

From 87d42564b524e008cd7cdf050ce5cd53b7c0affc Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Tue, 14 Sep 2021 18:28:40 -0700
Subject: [PATCH 3/7] removed colorfield and slider from form and provider
 stories

---
 packages/@react-spectrum/form/chromatic/Form.chromatic.tsx     | 2 --
 packages/@react-spectrum/form/stories/Form.stories.tsx         | 2 --
 .../@react-spectrum/provider/chromatic/Provider.chromatic.tsx  | 3 +--
 packages/@react-spectrum/provider/stories/Provider.stories.tsx | 3 +--
 4 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
index 9158aa03e1a..e44d5ff20fc 100644
--- a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
+++ b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
@@ -11,7 +11,6 @@
  */
 
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
-import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import {Form} from '../';
 import {Item, Picker} from '@react-spectrum/picker';
@@ -54,7 +53,6 @@ const Template = (): Story<SpectrumFormProps> => (args) => (
       <Radio value="dragons">Dragons</Radio>
     </RadioGroup>
     <TextArea label="Comments" placeholder="How do you feel?" />
-    <ColorField label="Primary Color" />
     <ComboBox label="More Animals">
       <Item key="red panda">Red Panda</Item>
       <Item key="aardvark">Aardvark</Item>
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 9b669d25f75..22b0283883b 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -14,7 +14,6 @@ import {action} from '@storybook/addon-actions';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
-import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import {countries, states} from './data';
 import {Flex} from '@react-spectrum/layout';
@@ -153,7 +152,6 @@ function render(props: any = {}) {
         <Checkbox value="cats">Cats</Checkbox>
         <Checkbox value="dragons">Dragons</Checkbox>
       </CheckboxGroup>
-      <ColorField label="Primary Color" />
       <ComboBox label="More Animals">
         <Item key="red panda">Red Panda</Item>
         <Item key="aardvark">Aardvark</Item>
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
index a0cfbc1785b..d1c3515e2ea 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
@@ -26,7 +26,6 @@ import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SearchWithin} from '@react-spectrum/searchwithin';
-import {Slider} from '@react-spectrum/slider';
 import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -122,6 +121,7 @@ function render(props = {}) {
           <Item key="snake">Snake</Item>
         </ComboBox>
         <NumberField label="Years lived there" />
+        <SearchField label="Search" />
         <SearchWithin label="Search">
           <SearchField placeholder="Search" />
           <Picker name="favorite-color3" label="Favorite color searchwithin">
@@ -133,7 +133,6 @@ function render(props = {}) {
             <Item key="purple">Purple</Item>
           </Picker>
         </SearchWithin>
-        <Slider label="Cookies to buy" defaultValue={12} />
       </Form>
     </Provider>
   );
diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
index 1fc8b225a51..dc8834826aa 100644
--- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
@@ -26,7 +26,6 @@ import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SearchWithin} from '@react-spectrum/searchwithin';
-import {Slider} from '@react-spectrum/slider';
 import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -199,6 +198,7 @@ function render(props = {}) {
           <Radio value="cats">Cats</Radio>
           <Radio value="horses">Horses</Radio>
         </RadioGroup>
+        <SearchField label="Search" />
         <SearchWithin label="Search">
           <SearchField placeholder="Search" />
           <Picker name="favorite-color3" label="Favorite color searchwithin">
@@ -210,7 +210,6 @@ function render(props = {}) {
             <Item key="purple">Purple</Item>
           </Picker>
         </SearchWithin>
-        <Slider label="Cookies to buy" defaultValue={12} />
       </Form>
     </Provider>
   );

From bb12d5ac0459d135915126b2505e716c22a7d765 Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Fri, 17 Sep 2021 09:55:06 -0700
Subject: [PATCH 4/7] reordering chromatic form and provider components

---
 .../form/chromatic/Form.chromatic.tsx         |  22 +-
 .../provider/chromatic/Provider.chromatic.tsx | 214 +++++++++---------
 2 files changed, 123 insertions(+), 113 deletions(-)

diff --git a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
index e44d5ff20fc..6fee4d1e234 100644
--- a/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
+++ b/packages/@react-spectrum/form/chromatic/Form.chromatic.tsx
@@ -37,28 +37,26 @@ let flatOptions = [
 
 const Template = (): Story<SpectrumFormProps> => (args) => (
   <Form {...args}>
-    <TextField label="City" placeholder="San Francisco" />
-    <Picker label="Animals" placeholder="Choose an animal" items={flatOptions}>
-      {item => <Item key={item.id}>{item.name}</Item>}
-    </Picker>
-    <NumberField label="Test" />
     <CheckboxGroup defaultValue={['dragons']} label="Pets">
       <Checkbox value="dogs">Dogs</Checkbox>
       <Checkbox value="cats">Cats</Checkbox>
       <Checkbox value="dragons">Dragons</Checkbox>
     </CheckboxGroup>
-    <RadioGroup defaultValue="dragons" label="Favorite pet" name="favorite-pet-group">
-      <Radio value="dogs">Dogs</Radio>
-      <Radio value="cats">Cats</Radio>
-      <Radio value="dragons">Dragons</Radio>
-    </RadioGroup>
-    <TextArea label="Comments" placeholder="How do you feel?" />
     <ComboBox label="More Animals">
       <Item key="red panda">Red Panda</Item>
       <Item key="aardvark">Aardvark</Item>
       <Item key="kangaroo">Kangaroo</Item>
       <Item key="snake">Snake</Item>
     </ComboBox>
+    <NumberField label="Test" />
+    <Picker label="Animals" placeholder="Choose an animal" items={flatOptions}>
+      {item => <Item key={item.id}>{item.name}</Item>}
+    </Picker>
+    <RadioGroup defaultValue="dragons" label="Favorite pet" name="favorite-pet-group">
+      <Radio value="dogs">Dogs</Radio>
+      <Radio value="cats">Cats</Radio>
+      <Radio value="dragons">Dragons</Radio>
+    </RadioGroup>
     <SearchField label="Search" />
     <SearchWithin label="Search">
       <SearchField placeholder="Search" />
@@ -66,6 +64,8 @@ const Template = (): Story<SpectrumFormProps> => (args) => (
         {item => <Item key={item.id}>{item.name}</Item>}
       </Picker>
     </SearchWithin>
+    <TextArea label="Comments" placeholder="How do you feel?" />
+    <TextField label="City" placeholder="San Francisco" />
   </Form>
 );
 
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
index d1c3515e2ea..434f235ff58 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
@@ -12,12 +12,12 @@
 
 import {Button} from '@react-spectrum/button';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
-import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import {Item, Picker} from '@react-spectrum/picker';
+import {Meta, Story} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
@@ -26,7 +26,8 @@ import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SearchWithin} from '@react-spectrum/searchwithin';
-import {storiesOf} from '@storybook/react';
+import {ProviderProps} from '@react-types/provider';
+// import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
 
@@ -36,104 +37,113 @@ const THEME = {
   large: scaleLarge
 };
 
-storiesOf('Provider', module)
-  // don't need all the isEmphasized etc tests, the value being sent is tested in unit tests
-  // that the components look correctly with those values is being tested in those components chromatic tests
-
-  // keeping custom theme to show that the theme only changes expected things, in this case, the button, nothing else
-  .add(
-    'custom theme',
-    () => render({theme: THEME})
-  )
-  .add(
-    'nested color schemes',
-    () => (
-      <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
-        <Button variant="primary">I am a dark button</Button>
-        <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
-          <Button variant="primary">I am a light button</Button>
-        </Provider>
-      </Provider>
-    )
-  )
-  .add(
-    'nested props',
-    () => (
-      <Provider isDisabled>
-        <Button variant="primary">I am disabled</Button>
-        <Provider isQuiet>
-          <Button variant="primary">I am disabled and quiet</Button>
-        </Provider>
-      </Provider>
-    )
-  )
-  .add(
-    'isQuiet',
-    () => render({isQuiet: true})
-  )
-  .add(
-    'isEmphasized',
-    () => render({isEmphasized: true})
-  )
-  .add(
-    'isDisabled',
-    () => render({isDisabled: true})
-  )
-  .add(
-    'isReadOnly',
-    () => render({isReadOnly: true})
-  )
-  .add(
-    'isRequired',
-    () => render({isRequired: true})
-  );
-
-function render(props = {}) {
-  return (
-    <Provider {...props} UNSAFE_style={{padding: 50}}>
-      <Form>
-        <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
-          <Button variant="primary">I am a button</Button>
-        </Flex>
-        <TextField
-          label="A text field"
-          placeholder="Something"
-          marginTop="size-100"
-          necessityIndicator="label"
-          value="dummy value" />
-        <Checkbox isSelected>Cats!</Checkbox>
-        <Switch isSelected>Dogs!</Switch>
-        <RadioGroup value="dogs" label="A radio group">
-          <Radio value="dogs">Dogs</Radio>
-          <Radio value="cats">Cats</Radio>
-          <Radio value="horses">Horses</Radio>
-        </RadioGroup>
-        <CheckboxGroup defaultValue={['dragons']} label="Pets">
-          <Checkbox value="dogs">Dogs</Checkbox>
-          <Checkbox value="cats">Cats</Checkbox>
-          <Checkbox value="dragons">Dragons</Checkbox>
-        </CheckboxGroup>
-        <ColorField label="Primary Color" />
-        <ComboBox label="More Animals">
-          <Item key="red panda">Red Panda</Item>
-          <Item key="aardvark">Aardvark</Item>
-          <Item key="kangaroo">Kangaroo</Item>
-          <Item key="snake">Snake</Item>
-        </ComboBox>
-        <NumberField label="Years lived there" />
-        <SearchField label="Search" />
-        <SearchWithin label="Search">
-          <SearchField placeholder="Search" />
-          <Picker name="favorite-color3" label="Favorite color searchwithin">
-            <Item key="red">Red</Item>
-            <Item key="orange">Orange</Item>
-            <Item key="yellow">Yellow</Item>
-            <Item key="green">Green</Item>
-            <Item key="blue">Blue</Item>
-            <Item key="purple">Purple</Item>
-          </Picker>
-        </SearchWithin>
-      </Form>
+const meta: Meta<ProviderProps> = {
+  title: 'Provider'
+};
+
+export default meta;
+
+const Template = (): Story<ProviderProps> => (args) => (
+  <Provider {...args} UNSAFE_style={{padding: 50}}>
+    <Form>
+      <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
+        <Button variant="primary">I am a button</Button>
+      </Flex>
+      <Checkbox isSelected>Cats!</Checkbox>
+      <CheckboxGroup defaultValue={['dragons']} label="Pets">
+        <Checkbox value="dogs">Dogs</Checkbox>
+        <Checkbox value="cats">Cats</Checkbox>
+        <Checkbox value="dragons">Dragons</Checkbox>
+      </CheckboxGroup>
+      <ComboBox label="More Animals">
+        <Item key="red panda">Red Panda</Item>
+        <Item key="aardvark">Aardvark</Item>
+        <Item key="kangaroo">Kangaroo</Item>
+        <Item key="snake">Snake</Item>
+      </ComboBox>
+      <NumberField label="Years lived there" />
+      <RadioGroup value="dogs" label="A radio group">
+        <Radio value="dogs">Dogs</Radio>
+        <Radio value="cats">Cats</Radio>
+        <Radio value="horses">Horses</Radio>
+      </RadioGroup>
+      <SearchField label="Search" />
+      <SearchWithin label="Search">
+        <SearchField placeholder="Search" />
+        <Picker name="favorite-color3" label="Favorite color searchwithin">
+          <Item key="red">Red</Item>
+          <Item key="orange">Orange</Item>
+          <Item key="yellow">Yellow</Item>
+          <Item key="green">Green</Item>
+          <Item key="blue">Blue</Item>
+          <Item key="purple">Purple</Item>
+        </Picker>
+      </SearchWithin>
+      <Switch isSelected>Dogs!</Switch>
+      <TextField
+        label="A text field"
+        placeholder="Something"
+        marginTop="size-100"
+        necessityIndicator="label"
+        value="dummy value" />
+    </Form>
+  </Provider>
+);
+
+const NestedColorSchemeTemplate = (): Story<ProviderProps> => (args) => (
+  <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
+    <Button variant="primary">I am a dark button</Button>
+    <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
+      <Button variant="primary">I am a light button</Button>
     </Provider>
-  );
-}
+  </Provider>
+);
+
+const NestedPropTemplate = (): Story<ProviderProps> => (args) => (
+  <Provider isDisabled>
+    <Button variant="primary">I am disabled</Button>
+    <Provider isQuiet>
+      <Button variant="primary">I am disabled and quiet</Button>
+    </Provider>
+  </Provider>
+);
+
+export const Default = Template().bind({});
+Default.storyName = 'default';
+Default.args = {};
+
+// keeping custom theme to show that the theme only changes expected things, in this case, the button, nothing else
+export const CustomTheme = Template().bind({});
+CustomTheme.storyName = 'custom theme';
+CustomTheme.args = {theme: THEME};
+
+export const NestedColorScheme = NestedColorSchemeTemplate().bind({});
+NestedColorScheme.storyName = 'nested color schemes';
+NestedColorScheme.args = {};
+
+export const NestedProp = NestedPropTemplate().bind({});
+NestedProp.storyName = 'nested props';
+NestedProp.args = {};
+
+// Previous this weren't included because of unit tests and visual comparisions
+// in the individual components, but we should have this to confirm that components
+// are using usePRoviderProps correctly
+export const Quiet = Template().bind({});
+Quiet.storyName = 'isQuiet';
+Quiet.args = {isQuiet: true};
+
+export const Emphasized = Template().bind({});
+Emphasized.storyName = 'isEmphasized';
+Emphasized.args = {isEmphasized: true};
+
+export const Disabled = Template().bind({});
+Disabled.storyName = 'isDisabled';
+Disabled.args = {isDisabled: true};
+
+export const ReadOnly = Template().bind({});
+ReadOnly.storyName = 'isReadOnly';
+ReadOnly.args = {isReadOnly: true};
+
+export const Required = Template().bind({});
+Required.storyName = 'isRequired';
+Required.args = {isRequired: true};

From 695ca0bce4c3f6f706c5c8f194f7ba3ebfd1d956 Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Fri, 17 Sep 2021 14:57:39 -0700
Subject: [PATCH 5/7] alphabetizing form and provider stories

---
 .../form/stories/Form.stories.tsx             | 37 +++++++++----------
 .../provider/stories/Provider.stories.tsx     | 15 ++++----
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 22b0283883b..da37fe003d2 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -135,18 +135,6 @@ storiesOf('Form', module)
 function render(props: any = {}) {
   return (
     <Form {...props}>
-      <TextField label="First Name" placeholder="John" />
-      <TextField label="Last Name" placeholder="Smith" />
-      <TextField label="Street Address" placeholder="123 Any Street" description="Please include apartment or suite number." errorMessage="Please enter a valid street address." />
-      <TextField label="City" placeholder="San Francisco" />
-      <NumberField label="Years lived there" />
-      <Picker label="State" placeholder="Select a state" items={states}>
-        {item => <Item key={item.abbr}>{item.name}</Item>}
-      </Picker>
-      <TextField label="Zip code" placeholder="12345" description="Please enter a five-digit zip code." errorMessage="Please remove letters and special characters." />
-      <Picker label="Country" placeholder="Select a country" items={countries}>
-        {item => <Item key={item.name}>{item.name}</Item>}
-      </Picker>
       <CheckboxGroup defaultValue={['dragons']} label="Pets">
         <Checkbox value="dogs">Dogs</Checkbox>
         <Checkbox value="cats">Cats</Checkbox>
@@ -158,11 +146,13 @@ function render(props: any = {}) {
         <Item key="kangaroo">Kangaroo</Item>
         <Item key="snake">Snake</Item>
       </ComboBox>
-      <RadioGroup label="Favorite pet" name="favorite-pet-group">
-        <Radio value="dogs">Dogs</Radio>
-        <Radio value="cats">Cats</Radio>
-        <Radio value="dragons">Dragons</Radio>
-      </RadioGroup>
+      <NumberField label="Years lived there" />
+      <Picker label="State" placeholder="Select a state" items={states}>
+        {item => <Item key={item.abbr}>{item.name}</Item>}
+      </Picker>
+      <Picker label="Country" placeholder="Select a country" items={countries}>
+        {item => <Item key={item.name}>{item.name}</Item>}
+      </Picker>
       <Picker label="Favorite color" description="Select any color you like." errorMessage="Please select a nicer color.">
         <Item>Red</Item>
         <Item>Orange</Item>
@@ -171,15 +161,22 @@ function render(props: any = {}) {
         <Item>Blue</Item>
         <Item>Purple</Item>
       </Picker>
-      <TextArea label="Comments" placeholder="How do you feel?" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
+      <RadioGroup label="Favorite pet" name="favorite-pet-group">
+        <Radio value="dogs">Dogs</Radio>
+        <Radio value="cats">Cats</Radio>
+        <Radio value="dragons">Dragons</Radio>
+      </RadioGroup>
       <SearchField label="Search" />
-      <SearchWithin label="Search">
-        <SearchField placeholder="Search" />
+      <SearchWithin label="Search cities">
+        <SearchField placeholder="City" />
         <Picker label="State" placeholder="Select a state" items={states}>
           {item => <Item key={item.abbr}>{item.name}</Item>}
         </Picker>
       </SearchWithin>
       <Switch>Low power mode</Switch>
+      <TextArea label="Comments" placeholder="How do you feel?" description="Express yourself!" errorMessage="No wrong answers, except for this one." />
+      <TextField label="City" placeholder="San Francisco" />
+      <TextField label="Zip code" placeholder="12345" description="Please enter a five-digit zip code." errorMessage="Please remove letters and special characters." />
     </Form>
   );
 }
diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
index dc8834826aa..cd88ac4f395 100644
--- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
@@ -12,7 +12,6 @@
 
 import {Button} from '@react-spectrum/button';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
-import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
@@ -174,17 +173,11 @@ function render(props = {}) {
         <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
           <Button variant="primary">I am a button</Button>
         </Flex>
-        <TextField
-          label="A text field"
-          placeholder="Something"
-          marginTop="size-100"
-          necessityIndicator="label" />
         <CheckboxGroup defaultValue={['dragons']} label="Pets">
           <Checkbox value="dogs">Dogs</Checkbox>
           <Checkbox value="cats">Cats</Checkbox>
           <Checkbox value="dragons">Dragons</Checkbox>
         </CheckboxGroup>
-        <ColorField label="Primary Color" />
         <ComboBox label="More Animals">
           <Item key="red panda">Red Panda</Item>
           <Item key="aardvark">Aardvark</Item>
@@ -192,7 +185,6 @@ function render(props = {}) {
           <Item key="snake">Snake</Item>
         </ComboBox>
         <NumberField label="Years lived there" />
-        <Switch>Dogs!</Switch>
         <RadioGroup label="A radio group">
           <Radio value="dogs">Dogs</Radio>
           <Radio value="cats">Cats</Radio>
@@ -210,6 +202,13 @@ function render(props = {}) {
             <Item key="purple">Purple</Item>
           </Picker>
         </SearchWithin>
+        <Switch isSelected>Dogs!</Switch>
+        <TextField
+          label="A text field"
+          placeholder="Something"
+          marginTop="size-100"
+          necessityIndicator="label"
+          value="dummy value" />
       </Form>
     </Provider>
   );

From 5d4b2a98812b911f763dc1782c883949f6e55f7b Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Fri, 17 Sep 2021 15:21:02 -0700
Subject: [PATCH 6/7] removing the code changes to make this only chromatic and
 story updates

---
 packages/@react-spectrum/label/package.json                | 1 -
 packages/@react-spectrum/label/src/Field.tsx               | 2 --
 packages/@react-spectrum/numberfield/package.json          | 1 +
 packages/@react-spectrum/numberfield/src/NumberField.tsx   | 2 ++
 packages/@react-spectrum/picker/package.json               | 1 +
 packages/@react-spectrum/picker/src/Picker.tsx             | 2 ++
 packages/@react-spectrum/searchwithin/package.json         | 1 +
 packages/@react-spectrum/searchwithin/src/SearchWithin.tsx | 2 ++
 packages/@react-spectrum/textfield/package.json            | 1 +
 packages/@react-spectrum/textfield/src/TextFieldBase.tsx   | 4 ++++
 10 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/label/package.json b/packages/@react-spectrum/label/package.json
index 1b1cd333e52..2d85421baa2 100644
--- a/packages/@react-spectrum/label/package.json
+++ b/packages/@react-spectrum/label/package.json
@@ -35,7 +35,6 @@
     "@react-aria/i18n": "^3.3.2",
     "@react-aria/label": "^3.2.0",
     "@react-aria/utils": "^3.9.0",
-    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/layout": "^3.2.1",
     "@react-spectrum/utils": "^3.6.2",
     "@react-types/label": "^3.5.0",
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
index 9d2b19998b9..b0d758281d0 100644
--- a/packages/@react-spectrum/label/src/Field.tsx
+++ b/packages/@react-spectrum/label/src/Field.tsx
@@ -19,10 +19,8 @@ import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css
 import {mergeProps} from '@react-aria/utils';
 import React, {RefObject} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
-import {useFormProps} from '@react-spectrum/form';
 
 function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
-  props = useFormProps(props);
   let {
     label,
     labelPosition = 'top' as LabelPosition,
diff --git a/packages/@react-spectrum/numberfield/package.json b/packages/@react-spectrum/numberfield/package.json
index b670baff6fc..d7a2d1bfcf6 100644
--- a/packages/@react-spectrum/numberfield/package.json
+++ b/packages/@react-spectrum/numberfield/package.json
@@ -39,6 +39,7 @@
     "@react-aria/numberfield": "^3.1.0",
     "@react-aria/utils": "^3.9.0",
     "@react-spectrum/button": "^3.6.0",
+    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/textfield": "^3.2.0",
     "@react-spectrum/utils": "^3.6.2",
diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx
index 183fb18bc0c..055ec301a87 100644
--- a/packages/@react-spectrum/numberfield/src/NumberField.tsx
+++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx
@@ -21,6 +21,7 @@ import {SpectrumNumberFieldProps} from '@react-types/numberfield';
 import {StepButton} from './StepButton';
 import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
+import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useNumberField} from '@react-aria/numberfield';
@@ -29,6 +30,7 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let provider = useProvider();
   let {
     isQuiet,
diff --git a/packages/@react-spectrum/picker/package.json b/packages/@react-spectrum/picker/package.json
index e011496fc4b..670c5e06b55 100644
--- a/packages/@react-spectrum/picker/package.json
+++ b/packages/@react-spectrum/picker/package.json
@@ -39,6 +39,7 @@
     "@react-aria/select": "^3.5.0",
     "@react-aria/utils": "^3.9.0",
     "@react-spectrum/button": "^3.6.0",
+    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/listbox": "^3.5.2",
     "@react-spectrum/overlays": "^3.4.4",
diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx
index 31b51174232..478c559be09 100644
--- a/packages/@react-spectrum/picker/src/Picker.tsx
+++ b/packages/@react-spectrum/picker/src/Picker.tsx
@@ -39,6 +39,7 @@ import React, {ReactElement, useCallback, useRef, useState} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';
 import {Text} from '@react-spectrum/text';
+import {useFormProps} from '@react-spectrum/form';
 import {useMessageFormatter} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSelectState} from '@react-stately/select';
@@ -46,6 +47,7 @@ import {useSelectState} from '@react-stately/select';
 function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useSlotProps(props, 'picker');
   props = useProviderProps(props);
+  props = useFormProps(props);
   let formatMessage = useMessageFormatter(intlMessages);
   let {
     isDisabled,
diff --git a/packages/@react-spectrum/searchwithin/package.json b/packages/@react-spectrum/searchwithin/package.json
index e5685ef5ffb..72ef7d62720 100644
--- a/packages/@react-spectrum/searchwithin/package.json
+++ b/packages/@react-spectrum/searchwithin/package.json
@@ -35,6 +35,7 @@
     "@react-aria/label": "^3.1.3",
     "@react-aria/utils": "^3.8.2",
     "@react-spectrum/label": "^3.3.4",
+    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/utils": "^3.6.2",
     "@react-types/searchwithin": "3.0.0-alpha.0",
     "@react-types/shared": "^3.8.0"
diff --git a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
index 30641ffca93..b02938eaada 100644
--- a/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
+++ b/packages/@react-spectrum/searchwithin/src/SearchWithin.tsx
@@ -16,11 +16,13 @@ import {FocusableRef} from '@react-types/shared';
 import React, {useCallback, useLayoutEffect, useRef, useState} from 'react';
 import {SpectrumSearchWithinProps} from '@react-types/searchwithin';
 import styles from '@adobe/spectrum-css-temp/components/searchwithin/vars.css';
+import {useFormProps} from '@react-spectrum/form';
 import {useLabel} from '@react-aria/label';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 function SearchWithin(props: SpectrumSearchWithinProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
+  props = useFormProps(props);
   let {styleProps} = useStyleProps(props);
   let {labelProps, fieldProps} = useLabel(props);
   let {
diff --git a/packages/@react-spectrum/textfield/package.json b/packages/@react-spectrum/textfield/package.json
index 8ee819a441b..ddf5e6e651a 100644
--- a/packages/@react-spectrum/textfield/package.json
+++ b/packages/@react-spectrum/textfield/package.json
@@ -37,6 +37,7 @@
     "@react-aria/interactions": "^3.6.0",
     "@react-aria/textfield": "^3.4.0",
     "@react-aria/utils": "^3.9.0",
+    "@react-spectrum/form": "^3.2.3",
     "@react-spectrum/label": "^3.4.0",
     "@react-spectrum/utils": "^3.6.2",
     "@react-stately/utils": "^3.2.2",
diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
index ee48ec50349..8c0fbc7504e 100644
--- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
+++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
@@ -20,7 +20,9 @@ import {PressEvents} from '@react-types/shared';
 import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
+import {useFormProps} from '@react-spectrum/form';
 import {useHover} from '@react-aria/interactions';
+import {useProviderProps} from '@react-spectrum/provider';
 
 interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {
   wrapperChildren?: ReactElement | ReactElement[],
@@ -37,6 +39,8 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, P
 }
 
 function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
+  props = useProviderProps(props);
+  props = useFormProps(props);
   let {
     label,
     validationState,

From 98edead843238d7ab2890912822b944a0bccb2b3 Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Fri, 17 Sep 2021 15:41:00 -0700
Subject: [PATCH 7/7] lint cleanups

---
 .../provider/chromatic/Provider.chromatic.tsx              | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
index 434f235ff58..48c7023c460 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.chromatic.tsx
@@ -20,14 +20,13 @@ import {Item, Picker} from '@react-spectrum/picker';
 import {Meta, Story} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
+import {ProviderProps} from '@react-types/provider';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SearchWithin} from '@react-spectrum/searchwithin';
-import {ProviderProps} from '@react-types/provider';
-// import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
 
@@ -90,7 +89,7 @@ const Template = (): Story<ProviderProps> => (args) => (
   </Provider>
 );
 
-const NestedColorSchemeTemplate = (): Story<ProviderProps> => (args) => (
+const NestedColorSchemeTemplate = (): Story<ProviderProps> => () => (
   <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
     <Button variant="primary">I am a dark button</Button>
     <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
@@ -99,7 +98,7 @@ const NestedColorSchemeTemplate = (): Story<ProviderProps> => (args) => (
   </Provider>
 );
 
-const NestedPropTemplate = (): Story<ProviderProps> => (args) => (
+const NestedPropTemplate = (): Story<ProviderProps> => () => (
   <Provider isDisabled>
     <Button variant="primary">I am disabled</Button>
     <Provider isQuiet>