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 & 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( disabled, name: nameProp, onChange, - sx: sxProp, + sx: sxProp = defaultSxProp, required, validationStatus, value, @@ -103,7 +62,6 @@ const Radio = React.forwardRef( ref, ): ReactElement => { const radioGroupContext = useContext(RadioGroupContext) - const enabled = useFeatureFlag('primer_react_css_modules_ga') const handleOnChange: ChangeEventHandler = e => { radioGroupContext?.onChange && radioGroupContext.onChange(e) onChange && onChange(e) @@ -117,8 +75,32 @@ const Radio = React.forwardRef( ) } + if (sxProp !== defaultSxProp) { + return ( + // eslint-disable-next-line github/a11y-role-supports-aria-props + + ) + } + return ( - ( 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} /> )