Skip to content

Radio: Remove the sx prop #5697

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.

Sign up for GitHub

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

Closed
TylerJDev wants to merge 4 commits into from
Closed

Radio: Remove the sx prop #5697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee5d593
Remove the sx!
TylerJDev Feb 14, 2025
06cfd67
Remove dev story
TylerJDev Feb 14, 2025
c7eef8d
Remove unneeded test
TylerJDev Feb 14, 2025
6966a82
Merge branch 'main' into tylerjdev/remove-sx-from-radio
TylerJDev Mar 11, 2025
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
18 changes: 0 additions & 18 deletions packages/react/src/Radio/Radio.dev.stories.tsx
View file
Open in desktop

This file was deleted.

50 changes: 2 additions & 48 deletions packages/react/src/Radio/Radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react'
import React, {useContext} from 'react'
import type {SxProp} from '../sx'
import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
import {RadioGroupContext} from '../RadioGroup/RadioGroup'
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 @@ -35,30 +31,14 @@ export type RadioProps = {
* Indicates whether the radio button must be checked before the form can be submitted
*/
required?: boolean
/**
* Only used to inform ARIA attributes. Individual radio inputs do not have validation styles.
*/
validationStatus?: FormValidationStatus
} & InputHTMLAttributes<HTMLInputElement> &
SxProp
} & InputHTMLAttributes<HTMLInputElement>

/**
* An accessible, native radio component for selecting one option from a list.
*/
const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
(
{
checked,
disabled,
name: nameProp,
onChange,
sx: sxProp = defaultSxProp,
required,
validationStatus,
value,
className,
...rest
}: RadioProps,
{checked, disabled, name: nameProp, onChange, required, value, className, ...rest}: RadioProps,
ref,
): ReactElement => {
const radioGroupContext = useContext(RadioGroupContext)
Expand All @@ -75,31 +55,7 @@ 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 (
// eslint-disable-next-line github/a11y-role-supports-aria-props
<input
type="radio"
value={value}
Expand All @@ -109,8 +65,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
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}
Expand Down
17 changes: 0 additions & 17 deletions packages/react/src/__tests__/Radio.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,23 +151,6 @@ describe('Radio', () => {
expect(radio).toHaveAttribute('aria-checked', 'true')
})

it('renders an invalid aria state when validation prop indicates an error', () => {
const handleChange = jest.fn()
const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)

const radio = getByRole('radio') as HTMLInputElement

expect(radio).toHaveAttribute('aria-invalid', 'false')

rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="success" />)

expect(radio).toHaveAttribute('aria-invalid', 'false')

rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="error" />)

expect(radio).toHaveAttribute('aria-invalid', 'true')
})

it('renders an aria state indicating the field is required', () => {
const handleChange = jest.fn()
const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)
Expand Down