From 9c31f0745a7373da1c1c214b4ac6a6dc9ffea8d3 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Wed, 7 Sep 2022 09:22:30 -0700
Subject: [PATCH 1/2] Add screener tests for Field

---
 apps/vr-tests-react-components/package.json   |   1 +
 .../src/stories/Field.stories.tsx             | 123 ++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 apps/vr-tests-react-components/src/stories/Field.stories.tsx

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 1d8539ff65287..dfec01568ca74 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -24,6 +24,7 @@
     "@fluentui/react-card": "9.0.0-beta.24",
     "@fluentui/react-checkbox": "^9.0.4",
     "@fluentui/react-divider": "^9.0.4",
+    "@fluentui/react-field": "9.0.0-alpha.0",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/react-image": "^9.0.4",
     "@fluentui/react-input": "^9.0.4",
diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
new file mode 100644
index 0000000000000..a3879c0c7dbea
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -0,0 +1,123 @@
+import * as React from 'react';
+import Screener, { Steps } from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { Radio } from '@fluentui/react-radio';
+import {
+  CheckboxField,
+  ComboboxField,
+  InputField,
+  InputFieldProps,
+  RadioGroupField,
+  SelectField,
+  SliderField,
+  SpinButtonField,
+  SwitchField,
+  TextareaField,
+} from '@fluentui/react-field';
+import { SparkleFilled } from '@fluentui/react-icons';
+
+const AllFields = (
+  props: Pick<
+    InputFieldProps,
+    'orientation' | 'required' | 'label' | 'validationState' | 'validationMessage' | 'validationMessageIcon' | 'hint'
+  >,
+) => {
+  return (
+    <div style={{ display: 'grid', rowGap: '12px' }}>
+      <CheckboxField label="Checkbox" {...props} />
+      <ComboboxField label="Combo box field" {...props} />
+      <InputField label="Input field" {...props} />
+      <RadioGroupField label="Radio group field" {...props}>
+        <Radio label="Option one" />
+        <Radio label="Option two" />
+        <Radio label="Option three" />
+      </RadioGroupField>
+      <SelectField label="Select field" {...props}>
+        <option>Option</option>
+      </SelectField>
+      <SliderField label="Slider field" {...props} />
+      <SpinButtonField label="Spin button field" {...props} />
+      <SwitchField label="Switch field" {...props} />
+      <TextareaField label="Textarea field" {...props} />
+    </div>
+  );
+};
+
+const AllFieldsWithValidationMessage = (
+  props: Pick<InputFieldProps, 'orientation' | 'required' | 'label' | 'hint'>,
+) => {
+  type ValidationProps = Pick<InputFieldProps, 'validationState' | 'validationMessage' | 'validationMessageIcon'>;
+  const error: ValidationProps = { validationState: 'error', validationMessage: 'Error message' };
+  const warning: ValidationProps = { validationState: 'warning', validationMessage: 'Warning message' };
+  const success: ValidationProps = { validationState: 'success', validationMessage: 'Success message' };
+  const custom: ValidationProps = { validationMessage: 'Custom message', validationMessageIcon: <SparkleFilled /> };
+
+  return (
+    <div style={{ display: 'grid', rowGap: '12px' }}>
+      <CheckboxField label="Checkbox" {...error} {...props} />
+      <ComboboxField label="Combo box field" {...warning} {...props} />
+      <InputField label="Input field" {...success} {...props} />
+      <RadioGroupField label="Radio group field" {...custom} {...props}>
+        <Radio label="Option one" />
+        <Radio label="Option two" />
+        <Radio label="Option three" />
+      </RadioGroupField>
+      <SelectField label="Select field" {...error} {...props}>
+        <option>Option</option>
+      </SelectField>
+      <SliderField label="Slider field" {...warning} {...props} />
+      <SpinButtonField label="Spin button field" {...success} {...props} />
+      <SwitchField label="Switch field" {...custom} {...props} />
+      <TextareaField label="Textarea field" {...error} {...props} />
+    </div>
+  );
+};
+
+storiesOf('Field Converged', module)
+  .addDecorator(story => (
+    <div style={{ display: 'flex' }}>
+      <div className="testWrapper" style={{ padding: '10px', width: '480px' }}>
+        <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+      </div>
+    </div>
+  ))
+  .addStory('base', () => <AllFields />)
+  .addStory('required', () => <AllFields required />)
+  .addStory('validationMessage', () => <AllFieldsWithValidationMessage />)
+  .addStory('hint', () => <AllFields hint="Hint message" />)
+  .addStory('horizontal', () => <AllFields orientation="horizontal" />)
+  .addStory('horizontal+long-label', () => (
+    <AllFields
+      orientation="horizontal"
+      label="This is a very long label that should wrap around to be multiple lines in height"
+    />
+  ))
+  .addStory('Horizontal+validationMessage+hint', () => (
+    <AllFieldsWithValidationMessage orientation="horizontal" hint="Hint text" />
+  ))
+  .addStory('size=small', () => (
+    <div style={{ display: 'grid', rowGap: '12px' }}>
+      <ComboboxField label="Combo box field" size="small" />
+      <InputField label="Input field" size="small" />
+      <SelectField label="Select field" size="small">
+        <option>Option</option>
+      </SelectField>
+      <SliderField label="Slider field" size="small" />
+      <SpinButtonField label="Spin button field" size="small" />
+      <TextareaField label="Textarea field" size="small" />
+    </div>
+  ))
+  .addStory('size=large', () => (
+    <div style={{ display: 'grid', rowGap: '12px' }}>
+      <CheckboxField label="Checkbox" size="large" />
+      <ComboboxField label="Combo box field" size="large" />
+      <InputField label="Input field" size="large" />
+      <SelectField label="Select field" size="large">
+        <option>Option</option>
+      </SelectField>
+      <TextareaField label="Textarea field" size="large" />
+    </div>
+  ))
+  .addStory('CheckboxField+fieldLabel', () => (
+    <CheckboxField label="Label for the checkbox" fieldLabel="Field label" required />
+  ));

From ba197a085c76b63557a915a3c4ec6e053cb1aaf3 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Wed, 7 Sep 2022 17:38:36 -0700
Subject: [PATCH 2/2] Separate snapshot per validation state

---
 .../src/stories/Field.stories.tsx             | 47 +++++--------------
 1 file changed, 11 insertions(+), 36 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
index a3879c0c7dbea..827ba779dda75 100644
--- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -43,36 +43,6 @@ const AllFields = (
   );
 };
 
-const AllFieldsWithValidationMessage = (
-  props: Pick<InputFieldProps, 'orientation' | 'required' | 'label' | 'hint'>,
-) => {
-  type ValidationProps = Pick<InputFieldProps, 'validationState' | 'validationMessage' | 'validationMessageIcon'>;
-  const error: ValidationProps = { validationState: 'error', validationMessage: 'Error message' };
-  const warning: ValidationProps = { validationState: 'warning', validationMessage: 'Warning message' };
-  const success: ValidationProps = { validationState: 'success', validationMessage: 'Success message' };
-  const custom: ValidationProps = { validationMessage: 'Custom message', validationMessageIcon: <SparkleFilled /> };
-
-  return (
-    <div style={{ display: 'grid', rowGap: '12px' }}>
-      <CheckboxField label="Checkbox" {...error} {...props} />
-      <ComboboxField label="Combo box field" {...warning} {...props} />
-      <InputField label="Input field" {...success} {...props} />
-      <RadioGroupField label="Radio group field" {...custom} {...props}>
-        <Radio label="Option one" />
-        <Radio label="Option two" />
-        <Radio label="Option three" />
-      </RadioGroupField>
-      <SelectField label="Select field" {...error} {...props}>
-        <option>Option</option>
-      </SelectField>
-      <SliderField label="Slider field" {...warning} {...props} />
-      <SpinButtonField label="Spin button field" {...success} {...props} />
-      <SwitchField label="Switch field" {...custom} {...props} />
-      <TextareaField label="Textarea field" {...error} {...props} />
-    </div>
-  );
-};
-
 storiesOf('Field Converged', module)
   .addDecorator(story => (
     <div style={{ display: 'flex' }}>
@@ -83,19 +53,24 @@ storiesOf('Field Converged', module)
   ))
   .addStory('base', () => <AllFields />)
   .addStory('required', () => <AllFields required />)
-  .addStory('validationMessage', () => <AllFieldsWithValidationMessage />)
+  .addStory('validation:error', () => <AllFields validationState="error" validationMessage="Error message" />)
+  .addStory('validation:warning', () => <AllFields validationState="warning" validationMessage="Warning message" />)
+  .addStory('validation:success', () => <AllFields validationState="success" validationMessage="Success message" />)
+  .addStory('validation:custom', () => (
+    <AllFields validationMessageIcon={<SparkleFilled />} validationMessage="Custom message" />
+  ))
   .addStory('hint', () => <AllFields hint="Hint message" />)
   .addStory('horizontal', () => <AllFields orientation="horizontal" />)
-  .addStory('horizontal+long-label', () => (
+  .addStory('horizontal+label:multiline', () => (
     <AllFields
       orientation="horizontal"
       label="This is a very long label that should wrap around to be multiple lines in height"
     />
   ))
-  .addStory('Horizontal+validationMessage+hint', () => (
-    <AllFieldsWithValidationMessage orientation="horizontal" hint="Hint text" />
+  .addStory('horizontal+validation:error+hint', () => (
+    <AllFields orientation="horizontal" validationState="error" validationMessage="Error message" hint="Hint text" />
   ))
-  .addStory('size=small', () => (
+  .addStory('size:small', () => (
     <div style={{ display: 'grid', rowGap: '12px' }}>
       <ComboboxField label="Combo box field" size="small" />
       <InputField label="Input field" size="small" />
@@ -107,7 +82,7 @@ storiesOf('Field Converged', module)
       <TextareaField label="Textarea field" size="small" />
     </div>
   ))
-  .addStory('size=large', () => (
+  .addStory('size:large', () => (
     <div style={{ display: 'grid', rowGap: '12px' }}>
       <CheckboxField label="Checkbox" size="large" />
       <ComboboxField label="Combo box field" size="large" />