feat(Details): Convert Details to css module behind feature flag (#5167)

* Convert Details component to CSS modules behind team flag

* Update snapshot name

* Create clean-mails-accept.md

* test(vrt): update snapshots

* Fixing the type to not allow styled system

* Fix for sxProp

---------

Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>

.changeset/clean-mails-accept.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert Details to css module behind feature flag

e2e/components/Details.test.ts

@@ -2,43 +2,56 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Details', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-details--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories: Array<{title: string; id: string}> = [
+  {
+    title: 'Default',
+    id: 'components-details--default',
+  },
+  {
+    title: 'SX Prop Stress Test',
+    id: 'components-details-dev--sx-prop-stress-test',
+  },
+]
 
-          // Default state - closed
-          expect(await page.screenshot()).toMatchSnapshot(`Details.Default.${theme}.png`)
-          // Click the summary to open
-          await page.getByText('See Details').click()
-          await page.getByText('This is some content').waitFor()
-          // Open state
-          expect(await page.screenshot()).toMatchSnapshot(`Details.Default.${theme}.open.png`)
-        })
+test.describe('Details', () => {
+  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,
+              },
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-details--default',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state - closed
+            expect(await page.screenshot()).toMatchSnapshot(`Details.${story.title}.${theme}.png`)
+            // Click the summary to open
+            await page.getByText('See Details').click()
+            await page.getByText('This is some content').waitFor()
+            // Open state
+            expect(await page.screenshot()).toMatchSnapshot(`Details.${story.title}.${theme}.open.png`)
           })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: false,
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: false,
+                },
               },
-            },
+            })
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import type {StoryFn, Meta} from '@storybook/react'
+import Details from './Details'
+import {Button} from '../Button'
+import useDetails from '../hooks/useDetails'
+
+export default {
+  title: 'Components/Details/Dev',
+  component: Details,
+} as Meta<typeof Details>
+
+export const SxPropStressTest: StoryFn<typeof Details> = () => {
+  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+  return (
+    <Details
+      {...getDetailsProps()}
+      sx={{
+        backgroundColor: 'accent.emphasis',
+        color: 'accent.fg',
+        p: 4,
+      }}
+    >
+      <Button as="summary">See Details</Button>
+      This is some content
+    </Details>
+  )
+}

packages/react/src/Details/Details.module.css

@@ -0,0 +1,7 @@
+.Details > summary {
+  list-style: none;
+}
+
+.Details > summary::-webkit-details-marker {
+  display: none;
+}

packages/react/src/Details/Details.tsx

@@ -1,20 +1,41 @@
+import React, {type ComponentPropsWithoutRef, type ReactElement} from 'react'
 import styled from 'styled-components'
 import type {SxProp} from '../sx'
 import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
+import {clsx} from 'clsx'
+import classes from './Details.module.css'
 
-const Details = styled.details<SxProp>`
-  & > summary {
-    list-style: none;
-  }
-  & > summary::-webkit-details-marker {
-    display: none;
-  }
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
-  ${sx};
-`
+const StyledDetails = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'details',
+  styled.details<SxProp>`
+    & > summary {
+      list-style: none;
+    }
+    & > summary::-webkit-details-marker {
+      display: none;
+    }
+
+    ${sx};
+  `,
+)
+
+const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(
+  ({className, children, ...rest}, ref): ReactElement => {
+    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+    return (
+      <StyledDetails className={clsx(className, {[classes.Details]: enabled})} {...rest} ref={ref}>
+        {children}
+      </StyledDetails>
+    )
+  },
+)
 
 Details.displayName = 'Details'
 
-export type DetailsProps = ComponentProps<typeof Details>
+export type DetailsProps = ComponentPropsWithoutRef<'details'> & SxProp
 export default Details