Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/two-apples-juggle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": minor
---

Remove CSS modules feature flag from Radio
80 changes: 29 additions & 51 deletions packages/react/src/Radio/Radio.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
/**
Expand Down Expand Up @@ -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.
*/
Expand All @@ -93,7 +52,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
disabled,
name: nameProp,
onChange,
sx: sxProp,
sx: sxProp = defaultSxProp,
required,
validationStatus,
value,
Expand All @@ -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)
Expand All @@ -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}
Expand All @@ -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}
/>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/__tests__/Radio.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading