chore(Radio): Remove CSS modules feature flag from Radio (#5463)

* Remove CSS modules feature flag from Radio * Skip As test * Create two-apples-juggle.md
primer · Jan 8, 2025 · b55025c · b55025c
1 parent b1e5699
commit b55025c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 52 deletions.
diff --git a/.changeset/two-apples-juggle.md b/.changeset/two-apples-juggle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from Radio
diff --git 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}
       />
     )

diff --git 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,