From c53051f0d72bb89899a64f964eef221279809e9c Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 18 Dec 2024 23:38:51 +0000
Subject: [PATCH 1/3] Remove CSS modules feature flag from Radio

---
 packages/react/src/Radio/Radio.tsx | 80 +++++++++++-------------------
 1 file changed, 29 insertions(+), 51 deletions(-)

diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 33edae3fd17..be740965bc7 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -1,18 +1,13 @@
-import styled from 'styled-components'
 import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react'
 import React, {useContext} from 'react'
 import type {SxProp} from '../sx'
-import sx from '../sx'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import {RadioGroupContext} from '../RadioGroup/RadioGroup'
-import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
-import {get} from '../constants'
-import {sharedCheckboxAndRadioStyles} from '../internal/utils/sharedCheckboxAndRadioStyles'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 import classes from './Radio.module.css'
 import sharedClasses from '../Checkbox/shared.module.css'
+import {defaultSxProp} from '../utils/defaultSxProp'
+import Box from '../Box'
 
 export type RadioProps = {
   /**
@@ -47,42 +42,6 @@ export type RadioProps = {
 } & InputHTMLAttributes<HTMLInputElement> &
   SxProp
 
-const StyledRadio = toggleStyledComponent(
-  'primer_react_css_modules_ga',
-  'input',
-  styled.input`
-    ${sharedCheckboxAndRadioStyles};
-    border-radius: var(--borderRadius-full, 100vh);
-    transition:
-      background-color,
-      border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
-
-    &:checked {
-      border-width: var(--base-size-4, 4px);
-      border-color: var(
-        --control-checked-bgColor-rest,
-        ${get('colors.accent.fg')}
-      ); /* using bgColor here to avoid a border change in dark high contrast */
-      background-color: var(--control-checked-fgColor-rest, ${get('colors.fg.onEmphasis')});
-
-      &:disabled {
-        cursor: not-allowed;
-        border-color: ${get('colors.fg.muted')};
-        background-color: ${get('colors.fg.muted')};
-      }
-    }
-
-    ${getGlobalFocusStyles()};
-
-    @media (forced-colors: active) {
-      background-color: canvastext;
-      border-color: canvastext;
-    }
-
-    ${sx}
-  `,
-)
-
 /**
  * An accessible, native radio component for selecting one option from a list.
  */
@@ -93,7 +52,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       disabled,
       name: nameProp,
       onChange,
-      sx: sxProp,
+      sx: sxProp = defaultSxProp,
       required,
       validationStatus,
       value,
@@ -103,7 +62,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     ref,
   ): ReactElement => {
     const radioGroupContext = useContext(RadioGroupContext)
-    const enabled = useFeatureFlag('primer_react_css_modules_ga')
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
       radioGroupContext?.onChange && radioGroupContext.onChange(e)
       onChange && onChange(e)
@@ -117,8 +75,32 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       )
     }
 
+    if (sxProp !== defaultSxProp) {
+      return (
+        // eslint-disable-next-line github/a11y-role-supports-aria-props
+        <Box
+          as="input"
+          sx={sxProp}
+          type="radio"
+          value={value}
+          name={name}
+          ref={ref}
+          disabled={disabled}
+          checked={checked}
+          aria-checked={checked ? 'true' : 'false'}
+          required={required}
+          aria-required={required ? 'true' : 'false'}
+          aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
+          onChange={handleOnChange}
+          className={clsx(className, sharedClasses.Input, classes.Radio)}
+          {...rest}
+        />
+      )
+    }
+
     return (
-      <StyledRadio
+      // eslint-disable-next-line github/a11y-role-supports-aria-props
+      <input
         type="radio"
         value={value}
         name={name}
@@ -129,12 +111,8 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         required={required}
         aria-required={required ? 'true' : 'false'}
         aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
-        sx={sxProp}
         onChange={handleOnChange}
-        className={clsx(className, {
-          [sharedClasses.Input]: enabled,
-          [classes.Radio]: enabled,
-        })}
+        className={clsx(className, sharedClasses.Input, classes.Radio)}
         {...rest}
       />
     )

From d322dacd17abed53333efff3d3eca4228f3e6a47 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 18:52:43 +0000
Subject: [PATCH 2/3] Skip As test

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

diff --git a/packages/react/src/__tests__/Radio.test.tsx b/packages/react/src/__tests__/Radio.test.tsx
index 7fdad2d5e83..310329b71b8 100644
--- a/packages/react/src/__tests__/Radio.test.tsx
+++ b/packages/react/src/__tests__/Radio.test.tsx
@@ -14,7 +14,7 @@ describe('Radio', () => {
     jest.resetAllMocks()
   })
 
-  behavesAsComponent({Component: Radio, toRender: () => <Radio {...defaultProps} />})
+  behavesAsComponent({options: {skipAs: true}, Component: Radio, toRender: () => <Radio {...defaultProps} />})
 
   checkExports('Radio', {
     default: Radio,

From c86476c518ad81474a5dc07efe26e3bce5c7035d Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 11:35:11 -0800
Subject: [PATCH 3/3] Create two-apples-juggle.md

---
 .changeset/two-apples-juggle.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-apples-juggle.md

diff --git a/.changeset/two-apples-juggle.md b/.changeset/two-apples-juggle.md
new file mode 100644
index 00000000000..dfa6dca0054
--- /dev/null
+++ b/.changeset/two-apples-juggle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from Radio