diff --git a/.changeset/silly-weeks-clap.md b/.changeset/silly-weeks-clap.md new file mode 100644 index 00000000000..6bcf2c695b4 --- /dev/null +++ b/.changeset/silly-weeks-clap.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update issue where FormControl.Caption was rendering incorrectly when CSS Modules flags were enabled diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-colorblind-linux.png new file mode 100644 index 00000000000..83c5f7604ee Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-dimmed-linux.png new file mode 100644 index 00000000000..4fccd06bf37 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-high-contrast-linux.png new file mode 100644 index 00000000000..9d32810bfa4 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-linux.png new file mode 100644 index 00000000000..83c5f7604ee Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-tritanopia-linux.png new file mode 100644 index 00000000000..83c5f7604ee Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-colorblind-linux.png new file mode 100644 index 00000000000..4a247045fcc Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-high-contrast-linux.png new file mode 100644 index 00000000000..dbeae9532ee Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-linux.png new file mode 100644 index 00000000000..4a247045fcc Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-tritanopia-linux.png new file mode 100644 index 00000000000..4a247045fcc Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Default-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-colorblind-linux.png new file mode 100644 index 00000000000..3e887db27f3 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-dimmed-linux.png new file mode 100644 index 00000000000..5ae38d5d3db Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-high-contrast-linux.png new file mode 100644 index 00000000000..71129d50f41 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-linux.png new file mode 100644 index 00000000000..3e887db27f3 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3e887db27f3 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-colorblind-linux.png new file mode 100644 index 00000000000..25f7c24ae57 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-high-contrast-linux.png new file mode 100644 index 00000000000..7d582d39bd6 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-linux.png new file mode 100644 index 00000000000..25f7c24ae57 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-tritanopia-linux.png new file mode 100644 index 00000000000..25f7c24ae57 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Disabled-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-colorblind-linux.png new file mode 100644 index 00000000000..028c995d520 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-dimmed-linux.png new file mode 100644 index 00000000000..73c0decbeda Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-high-contrast-linux.png new file mode 100644 index 00000000000..5f804472e08 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-linux.png new file mode 100644 index 00000000000..028c995d520 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-tritanopia-linux.png new file mode 100644 index 00000000000..028c995d520 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-colorblind-linux.png new file mode 100644 index 00000000000..37b131a5e3c Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-high-contrast-linux.png new file mode 100644 index 00000000000..d88158ca714 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-linux.png new file mode 100644 index 00000000000..37b131a5e3c Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-tritanopia-linux.png new file mode 100644 index 00000000000..37b131a5e3c Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Indeterminate-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-colorblind-linux.png new file mode 100644 index 00000000000..d3f45d6caa4 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-dimmed-linux.png new file mode 100644 index 00000000000..e93c0f5d367 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-high-contrast-linux.png new file mode 100644 index 00000000000..8656b395c00 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-linux.png new file mode 100644 index 00000000000..d3f45d6caa4 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d3f45d6caa4 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-colorblind-linux.png new file mode 100644 index 00000000000..1aa6e5bcf9a Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-dimmed-linux.png new file mode 100644 index 00000000000..8f8929636a7 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0ab18864144 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-linux.png new file mode 100644 index 00000000000..1aa6e5bcf9a Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-tritanopia-linux.png new file mode 100644 index 00000000000..1aa6e5bcf9a Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-colorblind-linux.png new file mode 100644 index 00000000000..0fb97cf1114 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png new file mode 100644 index 00000000000..51a5f7c8ef7 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-linux.png new file mode 100644 index 00000000000..0fb97cf1114 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-tritanopia-linux.png new file mode 100644 index 00000000000..0fb97cf1114 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-colorblind-linux.png new file mode 100644 index 00000000000..09cecaa92bb Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-high-contrast-linux.png new file mode 100644 index 00000000000..6ad33f5bc87 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-linux.png new file mode 100644 index 00000000000..09cecaa92bb Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-tritanopia-linux.png new file mode 100644 index 00000000000..09cecaa92bb Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-colorblind-linux.png new file mode 100644 index 00000000000..783b5c3e531 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-dimmed-linux.png new file mode 100644 index 00000000000..e2ed1db4265 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-high-contrast-linux.png new file mode 100644 index 00000000000..3f287383340 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-linux.png new file mode 100644 index 00000000000..783b5c3e531 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-tritanopia-linux.png new file mode 100644 index 00000000000..783b5c3e531 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-colorblind-linux.png new file mode 100644 index 00000000000..1266a32f79e Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-high-contrast-linux.png new file mode 100644 index 00000000000..c12477eb788 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-linux.png new file mode 100644 index 00000000000..1266a32f79e Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-tritanopia-linux.png new file mode 100644 index 00000000000..1266a32f79e Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png new file mode 100644 index 00000000000..2540365e0b0 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png new file mode 100644 index 00000000000..bca89a29c2f Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png new file mode 100644 index 00000000000..d069b5e680d Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png new file mode 100644 index 00000000000..2540365e0b0 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2540365e0b0 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-colorblind-linux.png new file mode 100644 index 00000000000..ef488478326 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png new file mode 100644 index 00000000000..72460ab7a08 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-linux.png new file mode 100644 index 00000000000..ef488478326 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-tritanopia-linux.png new file mode 100644 index 00000000000..ef488478326 Binary files /dev/null and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-tritanopia-linux.png differ diff --git a/e2e/components/Checkbox.test.ts b/e2e/components/Checkbox.test.ts index c58e319d361..a3ae857d7ca 100644 --- a/e2e/components/Checkbox.test.ts +++ b/e2e/components/Checkbox.test.ts @@ -2,176 +2,116 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('Checkbox', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-checkbox--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Checkbox.Default.${theme}.png`) - }) +const stories = [ + { + title: 'Default', + id: 'components-checkbox--default', + }, + { + title: 'Disabled', + id: 'components-checkbox-features--disabled', + }, + { + title: 'With Caption', + id: 'components-checkbox-features--with-caption', + }, + { + title: 'With Leading Visual', + id: 'components-checkbox-features--with-leading-visual', + }, + { + title: 'Indeterminate', + id: 'components-checkbox-features--indeterminate', + }, + { + title: 'Visually Hidden', + id: 'components-checkbox--playground', + args: { + visuallyHidden: true, + }, + }, +] as const - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-checkbox--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, +test.describe('Checkbox', () => { + 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, + featureFlags: { + primer_react_css_modules_team: true, + }, }, - }, - }) - }) - }) - } - }) + args: 'args' in story ? story.args : {}, + }) - test.describe('Disabled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--disabled', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Checkbox.Disabled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--disabled', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, - }, - }, - }) - }) - }) - } - }) + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Checkbox.${story.title}.${theme}.png`, + ) - test.describe('With Caption', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--with-caption', - globals: { - colorScheme: theme, - }, + // Focus state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Checkbox.${story.title}.focus.${theme}.png`, + ) }) - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Checkbox.With Caption.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--with-caption', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, + test('default (styled-components) @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: false, + }, }, - }, - }) - }) - }) - } - }) - - test.describe('With Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--with-leading-visual', - globals: { - colorScheme: theme, - }, - }) + args: 'args' in story ? story.args : {}, + }) - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Checkbox.With Leading Visual.${theme}.png`, - ) - }) + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Checkbox.${story.title}.${theme}.png`, + ) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--with-leading-visual', - globals: { - colorScheme: theme, - }, + // Focus state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Checkbox.${story.title}.focus.${theme}.png`, + ) }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, - }, - }, - }) - }) - }) - } - }) - test.describe('Indeterminate', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--indeterminate', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: true, + }, + }, + args: 'args' in story ? story.args : {}, + }) + await expect(page).toHaveNoViolations() }) - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Checkbox.Indeterminate.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-checkbox-features--indeterminate', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, + test('axe (styled-components) @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: false, }, - }, + args: 'args' in story ? story.args : {}, + }) + await expect(page).toHaveNoViolations() }) }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/internal/components/InputCaption.tsx b/packages/react/src/internal/components/InputCaption.tsx index 5ad6a4a75a2..fb414a97516 100644 --- a/packages/react/src/internal/components/InputCaption.tsx +++ b/packages/react/src/internal/components/InputCaption.tsx @@ -14,7 +14,18 @@ type Props = { } & SxProp const InputCaption: React.FC> = ({children, disabled, id, sx}) => ( - + {children} )