From b763ecd69c8f024feaaabdc31d8805dd50007736 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 8 Jan 2025 15:23:38 -0800 Subject: [PATCH 1/4] chore(Details): Remove CSS modules feature flag from Details (#5458) * Remove css modules feature flag from Details * Skip as test * Create changeset --- .changeset/mean-plants-cover.md | 5 +++ packages/react/src/Details/Details.tsx | 40 +++++++------------ .../src/Details/__tests__/Details.test.tsx | 2 +- 3 files changed, 21 insertions(+), 26 deletions(-) create mode 100644 .changeset/mean-plants-cover.md diff --git a/.changeset/mean-plants-cover.md b/.changeset/mean-plants-cover.md new file mode 100644 index 00000000000..f28776936e4 --- /dev/null +++ b/.changeset/mean-plants-cover.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove CSS modules feature flag from Details diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx index bc2a4c30909..4a001484b8e 100644 --- a/packages/react/src/Details/Details.tsx +++ b/packages/react/src/Details/Details.tsx @@ -1,33 +1,13 @@ import React, {useEffect, useState, type ComponentPropsWithoutRef, type ReactElement} from 'react' -import styled from 'styled-components' import type {SxProp} from '../sx' -import sx from '../sx' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' -import {useFeatureFlag} from '../FeatureFlags' import {clsx} from 'clsx' import classes from './Details.module.css' import {useMergedRefs} from '../internal/hooks/useMergedRefs' - -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' - -const StyledDetails = toggleStyledComponent( - CSS_MODULES_FEATURE_FLAG, - 'details', - styled.details` - & > summary { - list-style: none; - } - & > summary::-webkit-details-marker { - display: none; - } - - ${sx}; - `, -) +import {defaultSxProp} from '../utils/defaultSxProp' +import Box from '../Box' const Root = React.forwardRef( - ({className, children, ...rest}, forwardRef): ReactElement => { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + ({className, children, sx: sxProp = defaultSxProp, ...rest}, forwardRef): ReactElement => { const detailsRef = React.useRef(null) const ref = useMergedRefs(forwardRef, detailsRef) const [hasSummary, setHasSummary] = useState(false) @@ -60,12 +40,22 @@ const Root = React.forwardRef( } }, []) + if (sxProp !== defaultSxProp) { + return ( + + {/* Include default summary if summary is not provided */} + {!hasSummary && {'See Details'}} + {children} + + ) + } + return ( - +
{/* Include default summary if summary is not provided */} {!hasSummary && {'See Details'}} {children} - +
) }, ) diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx index 28be85e0945..8be6801cae8 100644 --- a/packages/react/src/Details/__tests__/Details.test.tsx +++ b/packages/react/src/Details/__tests__/Details.test.tsx @@ -7,7 +7,7 @@ import {behavesAsComponent, checkExports} from '../../utils/testing' import axe from 'axe-core' describe('Details', () => { - behavesAsComponent({Component: Details}) + behavesAsComponent({Component: Details, options: {skipAs: true}}) checkExports('Details', { default: Details, From 8b8ec3c64fce6f113b81f4169fe9460d1cef1967 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 8 Jan 2025 15:24:22 -0800 Subject: [PATCH 2/4] chore(Pagehead): Remove the CSS module feature flag from Pagehead (#5462) * Remove the CSS module feature flag from Pagehead * Support as for Pagehead * Adjust failing type checks * Create two-jokes-compete.md --- .changeset/two-jokes-compete.md | 5 +++ .../react/src/Pagehead/Pagehead.stories.tsx | 18 -------- packages/react/src/Pagehead/Pagehead.test.tsx | 3 +- packages/react/src/Pagehead/Pagehead.tsx | 44 +++++-------------- .../src/Pagehead/Pagehead.types.test.tsx | 4 -- 5 files changed, 18 insertions(+), 56 deletions(-) create mode 100644 .changeset/two-jokes-compete.md diff --git a/.changeset/two-jokes-compete.md b/.changeset/two-jokes-compete.md new file mode 100644 index 00000000000..aa9ef5878cf --- /dev/null +++ b/.changeset/two-jokes-compete.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove the CSS module feature flag from Pagehead diff --git a/packages/react/src/Pagehead/Pagehead.stories.tsx b/packages/react/src/Pagehead/Pagehead.stories.tsx index ceea390c631..7213dbf414e 100644 --- a/packages/react/src/Pagehead/Pagehead.stories.tsx +++ b/packages/react/src/Pagehead/Pagehead.stories.tsx @@ -35,22 +35,4 @@ Playground.argTypes = { options: ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], }, }, - forwardedAs: { - controls: false, - table: { - disable: true, - }, - }, - ref: { - controls: false, - table: { - disable: true, - }, - }, - theme: { - controls: false, - table: { - disable: true, - }, - }, } diff --git a/packages/react/src/Pagehead/Pagehead.test.tsx b/packages/react/src/Pagehead/Pagehead.test.tsx index 0c1fc8bad2b..d4844cdc75a 100644 --- a/packages/react/src/Pagehead/Pagehead.test.tsx +++ b/packages/react/src/Pagehead/Pagehead.test.tsx @@ -1,6 +1,5 @@ import React from 'react' import Pagehead from '../Pagehead' -import theme from '../theme' import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' import axe from 'axe-core' @@ -13,7 +12,7 @@ describe('Pagehead', () => { }) it('should have no axe violations', async () => { - const {container} = HTMLRender(Pagehead) + const {container} = HTMLRender(Pagehead) const results = await axe.run(container) expect(results).toHaveNoViolations() }) diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx index 3aeb74dcfaf..7f762bf1883 100644 --- a/packages/react/src/Pagehead/Pagehead.tsx +++ b/packages/react/src/Pagehead/Pagehead.tsx @@ -1,42 +1,22 @@ -import styled from 'styled-components' -import React, {type ComponentProps} from 'react' +import React from 'react' import {clsx} from 'clsx' -import {get} from '../constants' -import sx, {type SxProp} from '../sx' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {type SxProp} from '../sx' import classes from './Pagehead.module.css' -import {useFeatureFlag} from '../FeatureFlags' +import {defaultSxProp} from '../utils/defaultSxProp' +import Box from '../Box' -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' - -/** - * @deprecated - */ -const StyledComponentPagehead = toggleStyledComponent( - CSS_MODULES_FEATURE_FLAG, - 'div', - styled.div` - position: relative; - padding-top: ${get('space.4')}; - padding-bottom: ${get('space.4')}; - margin-bottom: ${get('space.4')}; - border-bottom: 1px solid ${get('colors.border.default')}; - ${sx}; - `, -) - -const Pagehead = ({className, ...rest}: PageheadProps) => { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - - if (enabled) { - return +const Pagehead = ({className, sx: sxProp = defaultSxProp, ...rest}: PageheadProps) => { + if (sxProp !== defaultSxProp || rest.as) { + return } - - return + return
} /** * @deprecated */ -export type PageheadProps = ComponentProps & SxProp +export type PageheadProps = SxProp & + React.ComponentPropsWithoutRef<'div'> & { + as?: React.ElementType + } export default Pagehead diff --git a/packages/react/src/Pagehead/Pagehead.types.test.tsx b/packages/react/src/Pagehead/Pagehead.types.test.tsx index df691989646..d4d46581f1c 100644 --- a/packages/react/src/Pagehead/Pagehead.types.test.tsx +++ b/packages/react/src/Pagehead/Pagehead.types.test.tsx @@ -4,7 +4,3 @@ import Pagehead from '../Pagehead' export function shouldAcceptCallWithNoProps() { return } - -export function shouldNotAcceptSystemProps() { - return -} From b1e56994d460ee088508445d28150abc902781a8 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 8 Jan 2025 15:31:55 -0800 Subject: [PATCH 3/4] chore(ButtonGroup): Remove CSS modules feature flag from ButtonGroup (#5457) * Remove CSS modules feature flag from ButtonGroup * test(vrt): update snapshots * Revert Avatar snapshot change * Create lemon-files-complain.md --------- Co-authored-by: jonrohan --- .changeset/lemon-files-complain.md | 5 + ...tonGroup-SX-Prop-dark-colorblind-linux.png | Bin 0 -> 6877 bytes .../ButtonGroup-SX-Prop-dark-dimmed-linux.png | Bin 0 -> 6924 bytes ...Group-SX-Prop-dark-high-contrast-linux.png | Bin 0 -> 6912 bytes .../ButtonGroup-SX-Prop-dark-linux.png | Bin 0 -> 6877 bytes ...tonGroup-SX-Prop-dark-tritanopia-linux.png | Bin 0 -> 6877 bytes ...onGroup-SX-Prop-light-colorblind-linux.png | Bin 0 -> 6968 bytes ...roup-SX-Prop-light-high-contrast-linux.png | Bin 0 -> 7050 bytes .../ButtonGroup-SX-Prop-light-linux.png | Bin 0 -> 6968 bytes ...onGroup-SX-Prop-light-tritanopia-linux.png | Bin 0 -> 6968 bytes e2e/components/ButtonGroup.test.ts | 28 ++++ .../ButtonGroup/ButtonGroup.dev.stories.tsx | 8 ++ .../react/src/ButtonGroup/ButtonGroup.tsx | 127 +++--------------- 13 files changed, 63 insertions(+), 105 deletions(-) create mode 100644 .changeset/lemon-files-complain.md create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png diff --git a/.changeset/lemon-files-complain.md b/.changeset/lemon-files-complain.md new file mode 100644 index 00000000000..2fcaf67849e --- /dev/null +++ b/.changeset/lemon-files-complain.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove CSS modules feature flag from ButtonGroup diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0d98488a13beb4b71f4abc1ba83e874e6af46c89 GIT binary patch literal 6877 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c1aa5490e028d85ef866894661af62d3e6b851ce GIT binary patch literal 6924 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bcf4048a588e0fa3e12ebc841ea9c1ffa15a1d09 GIT binary patch literal 6912 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 B3~c}a literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0d98488a13beb4b71f4abc1ba83e874e6af46c89 GIT binary patch literal 6877 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0d98488a13beb4b71f4abc1ba83e874e6af46c89 GIT binary patch literal 6877 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0a4942ddf8953802063e1e7f3d0e6a087d2e52d6 GIT binary patch literal 6968 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 WKP{T^H~)MBP6UM>uRnVByT1X4+L_A$ literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2359588a9c53c133db960391330b263c7626ca15 GIT binary patch literal 7050 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 WKP{T^H~)MBP6UM>uRnVByT1X4+L_A$ literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0a4942ddf8953802063e1e7f3d0e6a087d2e52d6 GIT binary patch literal 6968 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 WKP{T^H~)MBP6UM>uRnVByT1X4+L_A$ literal 0 HcmV?d00001 diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index 243f070df7f..38c79d95c69 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -142,4 +142,32 @@ test.describe('ButtonGroup', () => { }) } }) + + test.describe('SX Prop', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--sx-prop', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.SX Prop.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--sx-prop', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) }) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx index c0d2f2645b7..6dc85d48472 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx @@ -63,3 +63,11 @@ export const LinkButtonWithIconButtons = () => ( ) + +export const SxProp = () => ( + + + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index e3cc3e0632a..0869e1e1b92 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -1,109 +1,25 @@ -import styled from 'styled-components' -import React from 'react' -import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import React, {type PropsWithChildren} from 'react' +import {type SxProp} from '../sx' import classes from './ButtonGroup.module.css' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import {clsx} from 'clsx' -import {useFeatureFlag} from '../FeatureFlags' import {FocusKeys, useFocusZone} from '../hooks/useFocusZone' import {useProvidedRefOrCreate} from '../hooks' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import Box from '../Box' +import {defaultSxProp} from '../utils/defaultSxProp' -const StyledButtonGroup = toggleStyledComponent( - 'primer_react_css_modules_ga', - 'div', - styled.div` - display: inline-flex; - vertical-align: middle; - isolation: isolate; - - & > *:not([data-loading-wrapper]) { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-end: -1px; - position: relative; - - /* reset border-radius */ - button, - a { - border-radius: 0; - } - - &:first-child { - button, - a { - border-top-left-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); - } - } - - &:last-child { - button, - a { - border-top-right-radius: var(--borderRadius-medium); - border-bottom-right-radius: var(--borderRadius-medium); - } - } - - &:focus, - &:active, - &:hover { - z-index: 1; - } - } - - /* this is a workaround until portal based tooltips are fully removed from dotcom */ - &:has(div:last-child:empty) { - button, - a { - border-radius: var(--borderRadius-medium); - } - } - - /* if child is loading button */ - & > *[data-loading-wrapper] { - /* stylelint-disable-next-line primer/spacing */ - margin-inline-end: -1px; - position: relative; - /* reset border-radius */ - button, - a { - border-radius: 0; - } - - &:focus, - &:active, - &:hover { - z-index: 1; - } - &:first-child { - button, - a { - border-top-left-radius: var(--borderRadius-medium); - border-bottom-left-radius: var(--borderRadius-medium); - } - } - - &:last-child { - button, - a { - border-top-right-radius: var(--borderRadius-medium); - border-bottom-right-radius: var(--borderRadius-medium); - } - } - } - - ${sx}; - `, -) - -export type ButtonGroupProps = ComponentProps +export type ButtonGroupProps = { + /** The role of the group */ + role?: string + /** className passed in for styling */ + className?: string +} & PropsWithChildren & + SxProp const ButtonGroup = React.forwardRef(function ButtonGroup( - {children, className, role, ...rest}, + {children, className, role, sx, ...rest}, forwardRef, ) { - const enabled = useFeatureFlag('primer_react_css_modules_ga') const buttons = React.Children.map(children, (child, index) =>
{child}
) const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject) @@ -114,17 +30,18 @@ const ButtonGroup = React.forwardRef(function But focusOutBehavior: 'wrap', }) + if (sx !== defaultSxProp) { + return ( + + {buttons} + + ) + } + return ( - +
{buttons} - +
) }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps> From b55025cf2bf7f349cecb856449508bf822507c6d Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 8 Jan 2025 15:32:03 -0800 Subject: [PATCH 4/4] 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 --- .changeset/two-apples-juggle.md | 5 ++ packages/react/src/Radio/Radio.tsx | 80 ++++++++------------- packages/react/src/__tests__/Radio.test.tsx | 2 +- 3 files changed, 35 insertions(+), 52 deletions(-) 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 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} /> ) 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: () => }) + behavesAsComponent({options: {skipAs: true}, Component: Radio, toRender: () => }) checkExports('Radio', { default: Radio,