diff --git a/.changeset/tricky-boats-visit.md b/.changeset/tricky-boats-visit.md new file mode 100644 index 00000000000..7df4f9844d3 --- /dev/null +++ b/.changeset/tricky-boats-visit.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Removes `sx` prop from VisuallyHidden component, and as a result also removes `sx` prop from CheckboxGroup.Label and RadioGroup.Label diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx index c75c27ca61e..30c4fb9b6d3 100644 --- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx +++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx @@ -10,7 +10,7 @@ import FormControl from '../FormControl' import Checkbox from '../Checkbox/Checkbox' import {CheckboxGroupContext} from './CheckboxGroupContext' -type CheckboxGroupProps = { +export type CheckboxGroupProps = { /** * An onChange handler that gets called when any of the checkboxes change */ diff --git a/packages/react/src/CheckboxGroup/index.ts b/packages/react/src/CheckboxGroup/index.ts index 4977110e742..f8a955a8284 100644 --- a/packages/react/src/CheckboxGroup/index.ts +++ b/packages/react/src/CheckboxGroup/index.ts @@ -1 +1 @@ -export {default, CheckboxGroupContext} from './CheckboxGroup' +export {default, CheckboxGroupContext, type CheckboxGroupProps} from './CheckboxGroup' diff --git a/packages/react/src/RadioGroup/RadioGroup.docs.json b/packages/react/src/RadioGroup/RadioGroup.docs.json index 9de11d0fe98..c7cdbed81f3 100644 --- a/packages/react/src/RadioGroup/RadioGroup.docs.json +++ b/packages/react/src/RadioGroup/RadioGroup.docs.json @@ -84,11 +84,6 @@ "type": "boolean", "defaultValue": "false", "description": "If true, the fieldset legend will be visually hidden" - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true } ] }, @@ -132,4 +127,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx index 1736a9f2221..64b32f593e3 100644 --- a/packages/react/src/_VisuallyHidden.tsx +++ b/packages/react/src/_VisuallyHidden.tsx @@ -1,18 +1,28 @@ import classes from './_VisuallyHidden.module.css' import {clsx} from 'clsx' -import {BoxWithFallback} from './internal/components/BoxWithFallback' -import type {SxProp} from './sx' +import type {PolymorphicProps} from './utils/modern-polymorphic' +import type {ElementType} from 'react' -interface Props extends React.ComponentPropsWithoutRef<'span'> { - isVisible?: boolean - as?: React.ElementType -} +type VisuallyHiddenProps = PolymorphicProps< + As, + 'span', + { + isVisible?: boolean + } +> -function VisuallyHidden({isVisible, children, as = 'span', className, ...rest}: Props & SxProp) { +function VisuallyHidden({ + isVisible, + children, + as, + className, + ...rest +}: VisuallyHiddenProps) { + const Component = as || 'span' return ( - + {children} - + ) } diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 687882eb2f1..f61edd54c03 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -51,6 +51,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] = "type ButtonProps", "Checkbox", "CheckboxGroup", + "type CheckboxGroupProps", "type CheckboxProps", "CircleBadge", "type CircleBadgeIconProps", diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 418e9308cfb..b74637985b3 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -85,6 +85,7 @@ export {default as ButtonGroup} from './ButtonGroup' export type {ButtonGroupProps} from './ButtonGroup' export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge' export {default as CheckboxGroup} from './CheckboxGroup' +export type {CheckboxGroupProps} from './CheckboxGroup' export {default as CircleBadge} from './CircleBadge' export {default as CounterLabel} from './CounterLabel' export type {CounterLabelProps} from './CounterLabel' diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx index 674850cda4b..8970f1ef61c 100644 --- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx +++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx @@ -1,6 +1,5 @@ import React from 'react' import VisuallyHidden from '../../../_VisuallyHidden' -import type {SxProp} from '../../../sx' import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext' import classes from './CheckboxOrRadioGroup.module.css' import {Stack} from '../../../Stack' @@ -13,13 +12,12 @@ export type CheckboxOrRadioGroupLabelProps = { * Whether to visually hide the fieldset legend */ visuallyHidden?: boolean -} & SxProp +} const CheckboxOrRadioGroupLabel: React.FC> = ({ children, className, visuallyHidden = false, - sx, }) => { const {required, disabled} = React.useContext(CheckboxOrRadioGroupContext) @@ -29,7 +27,6 @@ const CheckboxOrRadioGroupLabel: React.FC {required ? ( diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx index 3ba4839b0b7..26a3f1ad75f 100644 --- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx @@ -143,6 +143,11 @@ describe('@primer/react', () => { ) }) + test('CheckboxGroup.Label supports `sx` prop', () => { + const {container} = render() + expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') + }) + test('CircleBadge supports `sx` prop', () => { render() expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx new file mode 100644 index 00000000000..7af793f8403 --- /dev/null +++ b/packages/styled-react/src/components/CheckboxGroup.tsx @@ -0,0 +1,49 @@ +import { + Box, + CheckboxGroup as PrimerCheckboxGroup, + type CheckboxGroupProps as PrimerCheckboxGroupProps, +} from '@primer/react' +import React, {type PropsWithChildren} from 'react' +import type {SxProp} from '../sx' + +export type CheckboxGroupProps = PropsWithChildren & SxProp + +const CheckboxGroupImpl = (props: CheckboxGroupProps) => { + return +} + +// Define local types based on the internal component props +type CheckboxOrRadioGroupLabelProps = PropsWithChildren< + { + className?: string + visuallyHidden?: boolean + } & SxProp +> +const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => { + return +} + +type CheckboxOrRadioGroupCaptionProps = PropsWithChildren< + { + className?: string + } & SxProp +> +const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => { + return +} + +type CheckboxOrRadioGroupValidationProps = PropsWithChildren< + { + className?: string + variant: 'error' | 'success' + } & SxProp +> +const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => { + return +} + +export const CheckboxGroup = Object.assign(CheckboxGroupImpl, { + Label: CheckboxOrRadioGroupLabel, + Caption: CheckboxOrRadioGroupCaption, + Validation: CheckboxOrRadioGroupValidation, +}) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 830f612f911..d5dd28c2cb9 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -2,7 +2,6 @@ export {ActionList} from '@primer/react' export {Avatar} from '@primer/react' export {Box, type BoxProps} from './components/Box' export {Button} from '@primer/react' -export {CheckboxGroup} from '@primer/react' export {Details} from '@primer/react' export {IconButton} from '@primer/react' export {ProgressBar} from '@primer/react' @@ -25,6 +24,7 @@ export {ActionMenu} from './components/ActionMenu' export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete' export {Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbsItemProps} from './components/Breadcrumbs' export {Checkbox, type CheckboxProps} from './components/Checkbox' +export {CheckboxGroup, type CheckboxGroupProps} from './components/CheckboxGroup' export {CircleBadge} from './components/CircleBadge' export {CounterLabel, type CounterLabelProps} from './components/CounterLabel' export {Dialog, type DialogProps} from './components/Dialog'