From 646fffc434c327f4084826be94420b6bca92203b Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 18 Dec 2024 21:10:49 +0000
Subject: [PATCH 1/3] Remove css modules feature flag from Details

---
 packages/react/src/Details/Details.tsx | 40 ++++++++++----------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index bc2a4c30909..4a001484b8e 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -1,33 +1,13 @@
 import React, {useEffect, useState, type ComponentPropsWithoutRef, type ReactElement} from 'react'
-import styled from 'styled-components'
 import type {SxProp} from '../sx'
-import sx from '../sx'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 import classes from './Details.module.css'
 import {useMergedRefs} from '../internal/hooks/useMergedRefs'
-
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
-
-const StyledDetails = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'details',
-  styled.details<SxProp>`
-    & > summary {
-      list-style: none;
-    }
-    & > summary::-webkit-details-marker {
-      display: none;
-    }
-
-    ${sx};
-  `,
-)
+import {defaultSxProp} from '../utils/defaultSxProp'
+import Box from '../Box'
 
 const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
-  ({className, children, ...rest}, forwardRef): ReactElement => {
-    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  ({className, children, sx: sxProp = defaultSxProp, ...rest}, forwardRef): ReactElement => {
     const detailsRef = React.useRef<HTMLDetailsElement>(null)
     const ref = useMergedRefs(forwardRef, detailsRef)
     const [hasSummary, setHasSummary] = useState(false)
@@ -60,12 +40,22 @@ const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
       }
     }, [])
 
+    if (sxProp !== defaultSxProp) {
+      return (
+        <Box as={'details'} className={clsx(className, classes.Details)} {...rest} sx={sxProp} ref={ref}>
+          {/* Include default summary if summary is not provided */}
+          {!hasSummary && <Details.Summary data-default-summary>{'See Details'}</Details.Summary>}
+          {children}
+        </Box>
+      )
+    }
+
     return (
-      <StyledDetails className={clsx(className, {[classes.Details]: enabled})} {...rest} ref={ref}>
+      <details className={clsx(className, classes.Details)} {...rest} ref={ref}>
         {/* Include default summary if summary is not provided */}
         {!hasSummary && <Details.Summary data-default-summary>{'See Details'}</Details.Summary>}
         {children}
-      </StyledDetails>
+      </details>
     )
   },
 )

From f0917269f0e99232fface3a5342c79216383530c Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 19:38:48 +0000
Subject: [PATCH 2/3] Skip as test

---
 packages/react/src/Details/__tests__/Details.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index 28be85e0945..8be6801cae8 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -7,7 +7,7 @@ import {behavesAsComponent, checkExports} from '../../utils/testing'
 import axe from 'axe-core'
 
 describe('Details', () => {
-  behavesAsComponent({Component: Details})
+  behavesAsComponent({Component: Details, options: {skipAs: true}})
 
   checkExports('Details', {
     default: Details,

From 154b17a18452bb09e89f0d3cd00d2d95b36881e1 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 19:39:49 +0000
Subject: [PATCH 3/3] Create changeset

---
 .changeset/mean-plants-cover.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/mean-plants-cover.md

diff --git a/.changeset/mean-plants-cover.md b/.changeset/mean-plants-cover.md
new file mode 100644
index 00000000000..f28776936e4
--- /dev/null
+++ b/.changeset/mean-plants-cover.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from Details