fix(FormControl): update Caption to no longer use styled system props (…

…#4972)

* fix(FormControl): update Caption to no longer use styled system props

* chore: add changeset

* test(vrt): update snapshots

---------

Co-authored-by: Josh Black <[email protected]>

.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

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()
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })

packages/react/src/internal/components/InputCaption.tsx

@@ -14,7 +14,18 @@ type Props = {
 } & SxProp
 
 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={sx}>
+  <Text
+    color={disabled ? 'fg.subtle' : 'fg.muted'}
+    display="block"
+    fontSize={0}
+    id={id}
+    sx={{
+      color: disabled ? 'fg.subtle' : 'fg.muted',
+      display: 'block',
+      fontSize: 0,
+      ...sx,
+    }}
+  >
     {children}
   </Text>
 )