test(e2e): add tests for FormControl (#5201)

* test(e2e): add tests for FormControl * test: prefix describe with test * chore: update story id * test(vrt): update snapshots * fix(FormControl.Caption): update color when disabled * chore: add changeset * test(vrt): update snapshots * chore: remove unused imports --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Nov 1, 2024 · 29a9770 · 29a9770
1 parent d349cfc
commit 29a9770
Show file tree

Hide file tree

Showing 149 changed files with 157 additions and 16 deletions.
diff --git a/.changeset/nice-shoes-fail.md b/.changeset/nice-shoes-fail.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update the foreground color for FormControl.Caption to use the control tokens when disabled
diff --git a/...Control.test.ts-snapshots/FormControl-Custom-Required-dark-colorblind-linux.png b/...Control.test.ts-snapshots/FormControl-Custom-Required-dark-colorblind-linux.png
diff --git a/...FormControl.test.ts-snapshots/FormControl-Custom-Required-dark-dimmed-linux.png b/...FormControl.test.ts-snapshots/FormControl-Custom-Required-dark-dimmed-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-Custom-Required-dark-high-contrast-linux.png b/...trol.test.ts-snapshots/FormControl-Custom-Required-dark-high-contrast-linux.png
diff --git a/...onents/FormControl.test.ts-snapshots/FormControl-Custom-Required-dark-linux.png b/...onents/FormControl.test.ts-snapshots/FormControl-Custom-Required-dark-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-Custom-Required-dark-tritanopia-linux.png b/...Control.test.ts-snapshots/FormControl-Custom-Required-dark-tritanopia-linux.png
diff --git a/...ontrol.test.ts-snapshots/FormControl-Custom-Required-light-colorblind-linux.png b/...ontrol.test.ts-snapshots/FormControl-Custom-Required-light-colorblind-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-Custom-Required-light-high-contrast-linux.png b/...rol.test.ts-snapshots/FormControl-Custom-Required-light-high-contrast-linux.png
diff --git a/...nents/FormControl.test.ts-snapshots/FormControl-Custom-Required-light-linux.png b/...nents/FormControl.test.ts-snapshots/FormControl-Custom-Required-light-linux.png
diff --git a/...ontrol.test.ts-snapshots/FormControl-Custom-Required-light-tritanopia-linux.png b/...ontrol.test.ts-snapshots/FormControl-Custom-Required-light-tritanopia-linux.png
diff --git a/...nts/FormControl.test.ts-snapshots/FormControl-Default-dark-colorblind-linux.png b/...nts/FormControl.test.ts-snapshots/FormControl-Default-dark-colorblind-linux.png
diff --git a/...ponents/FormControl.test.ts-snapshots/FormControl-Default-dark-dimmed-linux.png b/...ponents/FormControl.test.ts-snapshots/FormControl-Default-dark-dimmed-linux.png
diff --git a/.../FormControl.test.ts-snapshots/FormControl-Default-dark-high-contrast-linux.png b/.../FormControl.test.ts-snapshots/FormControl-Default-dark-high-contrast-linux.png
diff --git a/...ots/components/FormControl.test.ts-snapshots/FormControl-Default-dark-linux.png b/...ots/components/FormControl.test.ts-snapshots/FormControl-Default-dark-linux.png
diff --git a/...nts/FormControl.test.ts-snapshots/FormControl-Default-dark-tritanopia-linux.png b/...nts/FormControl.test.ts-snapshots/FormControl-Default-dark-tritanopia-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-Default-light-colorblind-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-Default-light-colorblind-linux.png
diff --git a/...FormControl.test.ts-snapshots/FormControl-Default-light-high-contrast-linux.png b/...FormControl.test.ts-snapshots/FormControl-Default-light-high-contrast-linux.png
diff --git a/...ts/components/FormControl.test.ts-snapshots/FormControl-Default-light-linux.png b/...ts/components/FormControl.test.ts-snapshots/FormControl-Default-light-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-Default-light-tritanopia-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-Default-light-tritanopia-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-Disabled-Inputs-dark-colorblind-linux.png b/...Control.test.ts-snapshots/FormControl-Disabled-Inputs-dark-colorblind-linux.png
diff --git a/...FormControl.test.ts-snapshots/FormControl-Disabled-Inputs-dark-dimmed-linux.png b/...FormControl.test.ts-snapshots/FormControl-Disabled-Inputs-dark-dimmed-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-Disabled-Inputs-dark-high-contrast-linux.png b/...trol.test.ts-snapshots/FormControl-Disabled-Inputs-dark-high-contrast-linux.png
diff --git a/...onents/FormControl.test.ts-snapshots/FormControl-Disabled-Inputs-dark-linux.png b/...onents/FormControl.test.ts-snapshots/FormControl-Disabled-Inputs-dark-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-Disabled-Inputs-dark-tritanopia-linux.png b/...Control.test.ts-snapshots/FormControl-Disabled-Inputs-dark-tritanopia-linux.png
diff --git a/...ontrol.test.ts-snapshots/FormControl-Disabled-Inputs-light-colorblind-linux.png b/...ontrol.test.ts-snapshots/FormControl-Disabled-Inputs-light-colorblind-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-Disabled-Inputs-light-high-contrast-linux.png b/...rol.test.ts-snapshots/FormControl-Disabled-Inputs-light-high-contrast-linux.png
diff --git a/...nents/FormControl.test.ts-snapshots/FormControl-Disabled-Inputs-light-linux.png b/...nents/FormControl.test.ts-snapshots/FormControl-Disabled-Inputs-light-linux.png
diff --git a/...ontrol.test.ts-snapshots/FormControl-Disabled-Inputs-light-tritanopia-linux.png b/...ontrol.test.ts-snapshots/FormControl-Disabled-Inputs-light-tritanopia-linux.png
diff --git a/...-snapshots/FormControl-Form-Control-with-Custom-Input-dark-colorblind-linux.png b/...-snapshots/FormControl-Form-Control-with-Custom-Input-dark-colorblind-linux.png
diff --git a/...t.ts-snapshots/FormControl-Form-Control-with-Custom-Input-dark-dimmed-linux.png b/...t.ts-snapshots/FormControl-Form-Control-with-Custom-Input-dark-dimmed-linux.png
diff --git a/...apshots/FormControl-Form-Control-with-Custom-Input-dark-high-contrast-linux.png b/...apshots/FormControl-Form-Control-with-Custom-Input-dark-high-contrast-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-Form-Control-with-Custom-Input-dark-linux.png b/...rol.test.ts-snapshots/FormControl-Form-Control-with-Custom-Input-dark-linux.png
diff --git a/...-snapshots/FormControl-Form-Control-with-Custom-Input-dark-tritanopia-linux.png b/...-snapshots/FormControl-Form-Control-with-Custom-Input-dark-tritanopia-linux.png
diff --git a/...snapshots/FormControl-Form-Control-with-Custom-Input-light-colorblind-linux.png b/...snapshots/FormControl-Form-Control-with-Custom-Input-light-colorblind-linux.png
diff --git a/...pshots/FormControl-Form-Control-with-Custom-Input-light-high-contrast-linux.png b/...pshots/FormControl-Form-Control-with-Custom-Input-light-high-contrast-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-Form-Control-with-Custom-Input-light-linux.png b/...ol.test.ts-snapshots/FormControl-Form-Control-with-Custom-Input-light-linux.png
diff --git a/...snapshots/FormControl-Form-Control-with-Custom-Input-light-tritanopia-linux.png b/...snapshots/FormControl-Form-Control-with-Custom-Input-light-tritanopia-linux.png
diff --git a/...ormControl.test.ts-snapshots/FormControl-Single-Input-dark-colorblind-linux.png b/...ormControl.test.ts-snapshots/FormControl-Single-Input-dark-colorblind-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-Single-Input-dark-dimmed-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-Single-Input-dark-dimmed-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-Single-Input-dark-high-contrast-linux.png b/...Control.test.ts-snapshots/FormControl-Single-Input-dark-high-contrast-linux.png
diff --git a/...omponents/FormControl.test.ts-snapshots/FormControl-Single-Input-dark-linux.png b/...omponents/FormControl.test.ts-snapshots/FormControl-Single-Input-dark-linux.png
diff --git a/...ormControl.test.ts-snapshots/FormControl-Single-Input-dark-tritanopia-linux.png b/...ormControl.test.ts-snapshots/FormControl-Single-Input-dark-tritanopia-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-Single-Input-light-colorblind-linux.png b/...rmControl.test.ts-snapshots/FormControl-Single-Input-light-colorblind-linux.png
diff --git a/...ontrol.test.ts-snapshots/FormControl-Single-Input-light-high-contrast-linux.png b/...ontrol.test.ts-snapshots/FormControl-Single-Input-light-high-contrast-linux.png
diff --git a/...mponents/FormControl.test.ts-snapshots/FormControl-Single-Input-light-linux.png b/...mponents/FormControl.test.ts-snapshots/FormControl-Single-Input-light-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-Single-Input-light-tritanopia-linux.png b/...rmControl.test.ts-snapshots/FormControl-Single-Input-light-tritanopia-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-Validation-Example-dark-colorblind-linux.png b/...trol.test.ts-snapshots/FormControl-Validation-Example-dark-colorblind-linux.png
diff --git a/...mControl.test.ts-snapshots/FormControl-Validation-Example-dark-dimmed-linux.png b/...mControl.test.ts-snapshots/FormControl-Validation-Example-dark-dimmed-linux.png
diff --git a/...l.test.ts-snapshots/FormControl-Validation-Example-dark-high-contrast-linux.png b/...l.test.ts-snapshots/FormControl-Validation-Example-dark-high-contrast-linux.png
diff --git a/...nts/FormControl.test.ts-snapshots/FormControl-Validation-Example-dark-linux.png b/...nts/FormControl.test.ts-snapshots/FormControl-Validation-Example-dark-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-Validation-Example-dark-tritanopia-linux.png b/...trol.test.ts-snapshots/FormControl-Validation-Example-dark-tritanopia-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-Validation-Example-light-colorblind-linux.png b/...rol.test.ts-snapshots/FormControl-Validation-Example-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/FormControl-Validation-Example-light-high-contrast-linux.png b/....test.ts-snapshots/FormControl-Validation-Example-light-high-contrast-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-Validation-Example-light-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-Validation-Example-light-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-Validation-Example-light-tritanopia-linux.png b/...rol.test.ts-snapshots/FormControl-Validation-Example-light-tritanopia-linux.png
diff --git a/...st.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-colorblind-linux.png b/...st.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-colorblind-linux.png
diff --git a/...l.test.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-dimmed-linux.png b/...l.test.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-dimmed-linux.png
diff --git a/...ts-snapshots/FormControl-With-Caption-And-Disabled-dark-high-contrast-linux.png b/...ts-snapshots/FormControl-With-Caption-And-Disabled-dark-high-contrast-linux.png
diff --git a/...mControl.test.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-linux.png b/...mControl.test.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-linux.png
diff --git a/...st.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-tritanopia-linux.png b/...st.ts-snapshots/FormControl-With-Caption-And-Disabled-dark-tritanopia-linux.png
diff --git a/...t.ts-snapshots/FormControl-With-Caption-And-Disabled-light-colorblind-linux.png b/...t.ts-snapshots/FormControl-With-Caption-And-Disabled-light-colorblind-linux.png
diff --git a/...s-snapshots/FormControl-With-Caption-And-Disabled-light-high-contrast-linux.png b/...s-snapshots/FormControl-With-Caption-And-Disabled-light-high-contrast-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-With-Caption-And-Disabled-light-linux.png b/...Control.test.ts-snapshots/FormControl-With-Caption-And-Disabled-light-linux.png
diff --git a/...t.ts-snapshots/FormControl-With-Caption-And-Disabled-light-tritanopia-linux.png b/...t.ts-snapshots/FormControl-With-Caption-And-Disabled-light-tritanopia-linux.png
diff --git a/...ormControl.test.ts-snapshots/FormControl-With-Caption-dark-colorblind-linux.png b/...ormControl.test.ts-snapshots/FormControl-With-Caption-dark-colorblind-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-With-Caption-dark-dimmed-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-With-Caption-dark-dimmed-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-With-Caption-dark-high-contrast-linux.png b/...Control.test.ts-snapshots/FormControl-With-Caption-dark-high-contrast-linux.png
diff --git a/...omponents/FormControl.test.ts-snapshots/FormControl-With-Caption-dark-linux.png b/...omponents/FormControl.test.ts-snapshots/FormControl-With-Caption-dark-linux.png
diff --git a/...ormControl.test.ts-snapshots/FormControl-With-Caption-dark-tritanopia-linux.png b/...ormControl.test.ts-snapshots/FormControl-With-Caption-dark-tritanopia-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-With-Caption-light-colorblind-linux.png b/...rmControl.test.ts-snapshots/FormControl-With-Caption-light-colorblind-linux.png
diff --git a/...ontrol.test.ts-snapshots/FormControl-With-Caption-light-high-contrast-linux.png b/...ontrol.test.ts-snapshots/FormControl-With-Caption-light-high-contrast-linux.png
diff --git a/...mponents/FormControl.test.ts-snapshots/FormControl-With-Caption-light-linux.png b/...mponents/FormControl.test.ts-snapshots/FormControl-With-Caption-light-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-With-Caption-light-tritanopia-linux.png b/...rmControl.test.ts-snapshots/FormControl-With-Caption-light-tritanopia-linux.png
diff --git a/...-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-colorblind-linux.png b/...-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-colorblind-linux.png
diff --git a/...t.ts-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-dimmed-linux.png b/...t.ts-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-dimmed-linux.png
diff --git a/...apshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-high-contrast-linux.png b/...apshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-high-contrast-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-linux.png b/...rol.test.ts-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-linux.png
diff --git a/...-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-tritanopia-linux.png b/...-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-dark-tritanopia-linux.png
diff --git a/...snapshots/FormControl-With-Checkbox-And-Radio-Inputs-light-colorblind-linux.png b/...snapshots/FormControl-With-Checkbox-And-Radio-Inputs-light-colorblind-linux.png
diff --git a/...pshots/FormControl-With-Checkbox-And-Radio-Inputs-light-high-contrast-linux.png b/...pshots/FormControl-With-Checkbox-And-Radio-Inputs-light-high-contrast-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-light-linux.png b/...ol.test.ts-snapshots/FormControl-With-Checkbox-And-Radio-Inputs-light-linux.png
diff --git a/...snapshots/FormControl-With-Checkbox-And-Radio-Inputs-light-tritanopia-linux.png b/...snapshots/FormControl-With-Checkbox-And-Radio-Inputs-light-tritanopia-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-colorblind-linux.png b/...rol.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-colorblind-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-dimmed-linux.png b/...Control.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-dimmed-linux.png
diff --git a/....test.ts-snapshots/FormControl-With-Complex-Inputs-dark-high-contrast-linux.png b/....test.ts-snapshots/FormControl-With-Complex-Inputs-dark-high-contrast-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-tritanopia-linux.png b/...rol.test.ts-snapshots/FormControl-With-Complex-Inputs-dark-tritanopia-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Complex-Inputs-light-colorblind-linux.png b/...ol.test.ts-snapshots/FormControl-With-Complex-Inputs-light-colorblind-linux.png
diff --git a/...test.ts-snapshots/FormControl-With-Complex-Inputs-light-high-contrast-linux.png b/...test.ts-snapshots/FormControl-With-Complex-Inputs-light-high-contrast-linux.png
diff --git a/...s/FormControl.test.ts-snapshots/FormControl-With-Complex-Inputs-light-linux.png b/...s/FormControl.test.ts-snapshots/FormControl-With-Complex-Inputs-light-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Complex-Inputs-light-tritanopia-linux.png b/...ol.test.ts-snapshots/FormControl-With-Complex-Inputs-light-tritanopia-linux.png
diff --git a/...l.test.ts-snapshots/FormControl-With-Error-Validation-dark-colorblind-linux.png b/...l.test.ts-snapshots/FormControl-With-Error-Validation-dark-colorblind-linux.png
diff --git a/...ntrol.test.ts-snapshots/FormControl-With-Error-Validation-dark-dimmed-linux.png b/...ntrol.test.ts-snapshots/FormControl-With-Error-Validation-dark-dimmed-linux.png
diff --git a/...est.ts-snapshots/FormControl-With-Error-Validation-dark-high-contrast-linux.png b/...est.ts-snapshots/FormControl-With-Error-Validation-dark-high-contrast-linux.png
diff --git a/.../FormControl.test.ts-snapshots/FormControl-With-Error-Validation-dark-linux.png b/.../FormControl.test.ts-snapshots/FormControl-With-Error-Validation-dark-linux.png
diff --git a/...l.test.ts-snapshots/FormControl-With-Error-Validation-dark-tritanopia-linux.png b/...l.test.ts-snapshots/FormControl-With-Error-Validation-dark-tritanopia-linux.png
diff --git a/....test.ts-snapshots/FormControl-With-Error-Validation-light-colorblind-linux.png b/....test.ts-snapshots/FormControl-With-Error-Validation-light-colorblind-linux.png
diff --git a/...st.ts-snapshots/FormControl-With-Error-Validation-light-high-contrast-linux.png b/...st.ts-snapshots/FormControl-With-Error-Validation-light-high-contrast-linux.png
diff --git a/...FormControl.test.ts-snapshots/FormControl-With-Error-Validation-light-linux.png b/...FormControl.test.ts-snapshots/FormControl-With-Error-Validation-light-linux.png
diff --git a/....test.ts-snapshots/FormControl-With-Error-Validation-light-tritanopia-linux.png b/....test.ts-snapshots/FormControl-With-Error-Validation-light-tritanopia-linux.png
diff --git a/...ntrol.test.ts-snapshots/FormControl-With-Hidden-Label-dark-colorblind-linux.png b/...ntrol.test.ts-snapshots/FormControl-With-Hidden-Label-dark-colorblind-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-With-Hidden-Label-dark-dimmed-linux.png b/...rmControl.test.ts-snapshots/FormControl-With-Hidden-Label-dark-dimmed-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Hidden-Label-dark-high-contrast-linux.png b/...ol.test.ts-snapshots/FormControl-With-Hidden-Label-dark-high-contrast-linux.png
diff --git a/...ents/FormControl.test.ts-snapshots/FormControl-With-Hidden-Label-dark-linux.png b/...ents/FormControl.test.ts-snapshots/FormControl-With-Hidden-Label-dark-linux.png
diff --git a/...ntrol.test.ts-snapshots/FormControl-With-Hidden-Label-dark-tritanopia-linux.png b/...ntrol.test.ts-snapshots/FormControl-With-Hidden-Label-dark-tritanopia-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-With-Hidden-Label-light-colorblind-linux.png b/...trol.test.ts-snapshots/FormControl-With-Hidden-Label-light-colorblind-linux.png
diff --git a/...l.test.ts-snapshots/FormControl-With-Hidden-Label-light-high-contrast-linux.png b/...l.test.ts-snapshots/FormControl-With-Hidden-Label-light-high-contrast-linux.png
diff --git a/...nts/FormControl.test.ts-snapshots/FormControl-With-Hidden-Label-light-linux.png b/...nts/FormControl.test.ts-snapshots/FormControl-With-Hidden-Label-light-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-With-Hidden-Label-light-tritanopia-linux.png b/...trol.test.ts-snapshots/FormControl-With-Hidden-Label-light-tritanopia-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png b/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png
diff --git a/...Control.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png b/...Control.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png
diff --git a/....test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png b/....test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png
diff --git a/...ts/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png b/...ts/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png b/...rol.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png b/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png
diff --git a/...test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png b/...test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png
diff --git a/...s/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png b/...s/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png b/...ol.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/FormControl-With-Required-Indicator-dark-colorblind-linux.png b/...test.ts-snapshots/FormControl-With-Required-Indicator-dark-colorblind-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Required-Indicator-dark-dimmed-linux.png b/...rol.test.ts-snapshots/FormControl-With-Required-Indicator-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/FormControl-With-Required-Indicator-dark-high-contrast-linux.png b/...t.ts-snapshots/FormControl-With-Required-Indicator-dark-high-contrast-linux.png
diff --git a/...ormControl.test.ts-snapshots/FormControl-With-Required-Indicator-dark-linux.png b/...ormControl.test.ts-snapshots/FormControl-With-Required-Indicator-dark-linux.png
diff --git a/...test.ts-snapshots/FormControl-With-Required-Indicator-dark-tritanopia-linux.png b/...test.ts-snapshots/FormControl-With-Required-Indicator-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/FormControl-With-Required-Indicator-light-colorblind-linux.png b/...est.ts-snapshots/FormControl-With-Required-Indicator-light-colorblind-linux.png
diff --git a/....ts-snapshots/FormControl-With-Required-Indicator-light-high-contrast-linux.png b/....ts-snapshots/FormControl-With-Required-Indicator-light-high-contrast-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-With-Required-Indicator-light-linux.png b/...rmControl.test.ts-snapshots/FormControl-With-Required-Indicator-light-linux.png
diff --git a/...est.ts-snapshots/FormControl-With-Required-Indicator-light-tritanopia-linux.png b/...est.ts-snapshots/FormControl-With-Required-Indicator-light-tritanopia-linux.png
diff --git a/...ntrol.test.ts-snapshots/FormControl-With-Select-Panel-dark-colorblind-linux.png b/...ntrol.test.ts-snapshots/FormControl-With-Select-Panel-dark-colorblind-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-With-Select-Panel-dark-dimmed-linux.png b/...rmControl.test.ts-snapshots/FormControl-With-Select-Panel-dark-dimmed-linux.png
diff --git a/...ol.test.ts-snapshots/FormControl-With-Select-Panel-dark-high-contrast-linux.png b/...ol.test.ts-snapshots/FormControl-With-Select-Panel-dark-high-contrast-linux.png
diff --git a/...ents/FormControl.test.ts-snapshots/FormControl-With-Select-Panel-dark-linux.png b/...ents/FormControl.test.ts-snapshots/FormControl-With-Select-Panel-dark-linux.png
diff --git a/...ntrol.test.ts-snapshots/FormControl-With-Select-Panel-dark-tritanopia-linux.png b/...ntrol.test.ts-snapshots/FormControl-With-Select-Panel-dark-tritanopia-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-With-Select-Panel-light-colorblind-linux.png b/...trol.test.ts-snapshots/FormControl-With-Select-Panel-light-colorblind-linux.png
diff --git a/...l.test.ts-snapshots/FormControl-With-Select-Panel-light-high-contrast-linux.png b/...l.test.ts-snapshots/FormControl-With-Select-Panel-light-high-contrast-linux.png
diff --git a/...nts/FormControl.test.ts-snapshots/FormControl-With-Select-Panel-light-linux.png b/...nts/FormControl.test.ts-snapshots/FormControl-With-Select-Panel-light-linux.png
diff --git a/...trol.test.ts-snapshots/FormControl-With-Select-Panel-light-tritanopia-linux.png b/...trol.test.ts-snapshots/FormControl-With-Select-Panel-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/FormControl-With-Success-Validation-dark-colorblind-linux.png b/...test.ts-snapshots/FormControl-With-Success-Validation-dark-colorblind-linux.png
diff --git a/...rol.test.ts-snapshots/FormControl-With-Success-Validation-dark-dimmed-linux.png b/...rol.test.ts-snapshots/FormControl-With-Success-Validation-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/FormControl-With-Success-Validation-dark-high-contrast-linux.png b/...t.ts-snapshots/FormControl-With-Success-Validation-dark-high-contrast-linux.png
diff --git a/...ormControl.test.ts-snapshots/FormControl-With-Success-Validation-dark-linux.png b/...ormControl.test.ts-snapshots/FormControl-With-Success-Validation-dark-linux.png
diff --git a/...test.ts-snapshots/FormControl-With-Success-Validation-dark-tritanopia-linux.png b/...test.ts-snapshots/FormControl-With-Success-Validation-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/FormControl-With-Success-Validation-light-colorblind-linux.png b/...est.ts-snapshots/FormControl-With-Success-Validation-light-colorblind-linux.png
diff --git a/....ts-snapshots/FormControl-With-Success-Validation-light-high-contrast-linux.png b/....ts-snapshots/FormControl-With-Success-Validation-light-high-contrast-linux.png
diff --git a/...rmControl.test.ts-snapshots/FormControl-With-Success-Validation-light-linux.png b/...rmControl.test.ts-snapshots/FormControl-With-Success-Validation-light-linux.png
diff --git a/...est.ts-snapshots/FormControl-With-Success-Validation-light-tritanopia-linux.png b/...est.ts-snapshots/FormControl-With-Success-Validation-light-tritanopia-linux.png
diff --git a/e2e/components/FormControl.test.ts b/e2e/components/FormControl.test.ts
@@ -0,0 +1,104 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-formcontrol--default',
+  },
+  {
+    title: 'Custom Required',
+    id: 'components-formcontrol-features--custom-required',
+  },
+  {
+    title: 'Disabled Inputs',
+    id: 'components-formcontrol-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 Caption And Disabled',
+    id: 'components-formcontrol-features--with-caption-and-disabled',
+  },
+  {
+    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) {
+    test.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()
+          })
+        })
+      }
+    })
+  }
+})
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -407,3 +407,49 @@ 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 WithCaptionAndDisabled = () => (
+  <FormControl disabled>
+    <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>
+)
diff --git a/packages/react/src/FormControl/FormControl.stories.tsx b/packages/react/src/FormControl/FormControl.stories.tsx
@@ -1,21 +1,10 @@
 import React, {useState} from 'react'
 import type {Meta} from '@storybook/react'
-import {BaseStyles, Box, Checkbox, FormControl, TextInput, TextInputWithTokens, ThemeProvider, theme} from '..'
+import {Box, Checkbox, FormControl, TextInput, TextInputWithTokens} from '..'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 
 export default {
   title: 'Components/FormControl',
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider theme={theme}>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
   argTypes: {
     disabled: {
       type: 'boolean',

diff --git a/packages/react/src/internal/components/InputCaption.tsx b/packages/react/src/internal/components/InputCaption.tsx
@@ -15,12 +15,9 @@ type Props = {
 
 const InputCaption: React.FC<React.PropsWithChildren<Props>> = ({children, disabled, id, sx}) => (
   <Text
-    color={disabled ? 'fg.subtle' : 'fg.muted'}
-    display="block"
-    fontSize={0}
     id={id}
     sx={{
-      color: disabled ? 'fg.subtle' : 'fg.muted',
+      color: disabled ? 'var(--control-fgColor-disabled)' : 'var(--fgColor-muted)',
       display: 'block',
       fontSize: 0,
       ...sx,