feat(CheckBoxOrRadioGroup): Convert CheckBoxOrRadioGroup to CSS modules behind feature flag

.changeset/lovely-stingrays-jog.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Convert CheckBoxOrRadioGroup to CSS modules behind feature flag

e2e/components/CheckboxGroup.test.ts

@@ -2,176 +2,69 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('CheckboxGroup', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`CheckboxGroup.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: false,
-              },
-            },
-          })
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-checkboxgroup--default',
+  },
+  {
+    title: 'Caption',
+    id: 'components-checkboxgroup-features--caption',
+  },
+  {
+    title: 'Error',
+    id: 'components-checkboxgroup-features--error',
+  },
+  {
+    title: 'Success',
+    id: 'components-checkboxgroup-features--success',
+  },
+  {
+    title: 'Visually Hidden Label',
+    id: 'components-checkboxgroup-features--visually-hidden-label',
+  },
+  {
+    title: 'SX Props',
+    id: 'components-checkboxgroup-dev--sx-props',
+  },
+] as const
 
-  test.describe('Caption', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--caption',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`CheckboxGroup.Caption.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--caption',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: false,
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Error', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--error',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`CheckboxGroup.Error.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--error',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: false,
+test.describe('CheckboxGroup', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
-          })
-        })
-      })
-    }
-  })
+            })
 
-  test.describe('Success', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--success',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `CheckboxGroup.${story.title}.${theme}.png`,
+            )
           })
 
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`CheckboxGroup.Success.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--success',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: false,
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Visually Hidden Label', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--visually-hidden-label',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `CheckboxGroup.Visually Hidden Label.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-checkboxgroup-features--visually-hidden-label',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: false,
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: false,
+                },
               },
-            },
+            })
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })

packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {Checkbox, CheckboxGroup, FormControl} from '..'
+
+export default {
+  title: 'Components/CheckboxGroup/Dev',
+  component: CheckboxGroup,
+  parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange', 'sx']}},
+} as Meta
+
+export const SxProps = () => (
+  <CheckboxGroup
+    sx={{
+      color: 'var(--fgColor-default, var(--color-fg-default))',
+      my: '15px',
+    }}
+  >
+    <CheckboxGroup.Caption
+      sx={{
+        color: 'fg.muted',
+        fontSize: 0,
+        fontWeight: 400,
+      }}
+    >
+      Caption
+    </CheckboxGroup.Caption>
+    <CheckboxGroup.Label
+      sx={{
+        color: 'var(--fgColor-default, var(--color-fg-default))',
+        fontSize: ['14px'],
+        fontWeight: 600,
+      }}
+    >
+      Choices
+    </CheckboxGroup.Label>
+    <FormControl required>
+      <Checkbox value="one" defaultChecked />
+      <FormControl.Label>Choice one</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Checkbox value="two" defaultChecked />
+      <FormControl.Label>Choice two</FormControl.Label>
+    </FormControl>
+    <FormControl>
+      <Checkbox value="three" />
+      <FormControl.Label>Choice three</FormControl.Label>
+    </FormControl>
+  </CheckboxGroup>
+)

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css

@@ -0,0 +1,47 @@
+.Body {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  flex-direction: column;
+
+  & > * + * {
+    margin-top: var(--base-size-8);
+  }
+}
+
+.GroupFieldset {
+  padding: 0;
+  margin: 0;
+  border: none;
+
+  &:where([data-validation]) {
+    margin-bottom: var(--base-size-8);
+  }
+}
+
+.GroupLegend {
+  padding: 0;
+
+  &:where([data-legend-visible]) {
+    margin-bottom: var(--base-size-8);
+  }
+}
+
+.CheckboxOrRadioGroupCaption {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+}
+
+.RadioGroupLabel {
+  display: block;
+  font-size: var(--text-body-size-large);
+
+  &:where([data-label-disabled]) {
+    color: var(--fgColor-muted);
+  }
+}
+
+.GroupLabelChildren {
+  margin-right: var(--base-size-8);
+}