Merge c6b74fc into 8138dee

e2e/components/FormControl.test.ts

@@ -0,0 +1,100 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-form-control--default',
+  },
+  {
+    title: 'Custom Required',
+    id: 'components-form-control-features--custom-required',
+  },
+  {
+    title: 'Disabled Inputs',
+    id: 'components-form-control-features--disabled-inputs',
+  },
+  {
+    title: 'Form Control with Custom Input',
+    id: 'components-formcontrol-features--form-control-with-custom-input',
+  },
+  {
+    title: 'Single Input',
+    id: 'components-formcontrol-features--single-input',
+  },
+  {
+    title: 'Validation Example',
+    id: 'components-formcontrol-features--validation-example',
+  },
+  {
+    title: 'With Checkbox And Radio Inputs',
+    id: 'components-formcontrol-features--with-checkbox-and-radio-inputs',
+  },
+  {
+    title: 'With Complex Inputs',
+    id: 'components-formcontrol-features--with-complex-inputs',
+  },
+  {
+    title: 'With Leading Visual',
+    id: 'components-formcontrol-features--with-leading-visual',
+  },
+  {
+    title: 'With Select Panel',
+    id: 'components-formcontrol-features--with-select-panel',
+  },
+  {
+    title: 'With Caption',
+    id: 'components-formcontrol-features--with-caption',
+  },
+  {
+    title: 'With Hidden Label',
+    id: 'components-formcontrol-features--with-hidden-label',
+  },
+  {
+    title: 'With Required Indicator',
+    id: 'components-formcontrol-features--with-required-indicator',
+  },
+  {
+    title: 'With Success Validation',
+    id: 'components-formcontrol-features--with-success-validation',
+  },
+  {
+    title: 'With Error Validation',
+    id: 'components-formcontrol-features--with-error-validation',
+  },
+] as const
+
+test.describe('FormControl', () => {
+  for (const story of stories) {
+    describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `FormControl.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})

packages/react/src/FormControl/FormControl.features.stories.tsx

@@ -407,3 +407,41 @@ export const CustomRequired = () => (
     </FormControl>
   </Box>
 )
+
+export const WithCaption = () => (
+  <FormControl>
+    <FormControl.Label>Example label</FormControl.Label>
+    <TextInput />
+    <FormControl.Caption>Example caption</FormControl.Caption>
+  </FormControl>
+)
+
+export const WithHiddenLabel = () => (
+  <FormControl>
+    <FormControl.Label visuallyHidden>Example label</FormControl.Label>
+    <TextInput />
+  </FormControl>
+)
+
+export const WithRequiredIndicator = () => (
+  <FormControl required>
+    <FormControl.Label requiredIndicator>Example label</FormControl.Label>
+    <TextInput />
+  </FormControl>
+)
+
+export const WithSuccessValidation = () => (
+  <FormControl required>
+    <FormControl.Label requiredIndicator>Example label</FormControl.Label>
+    <TextInput defaultValue="Input value" />
+    <FormControl.Validation variant="success">Example success validation message</FormControl.Validation>
+  </FormControl>
+)
+
+export const WithErrorValidation = () => (
+  <FormControl required>
+    <FormControl.Label requiredIndicator>Example label</FormControl.Label>
+    <TextInput defaultValue="Input value" />
+    <FormControl.Validation variant="error">Example error validation message</FormControl.Validation>
+  </FormControl>
+)