diff --git a/.changeset/cyan-panthers-shop.md b/.changeset/cyan-panthers-shop.md new file mode 100644 index 00000000000..e3ce5f535c7 --- /dev/null +++ b/.changeset/cyan-panthers-shop.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +"@primer/styled-react": patch +--- + +chore: remove unnecessary sx prop migrations diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index 802418f6fc0..567d2a02abb 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -40,10 +40,11 @@ export type FormControlProps = { */ layout?: 'horizontal' | 'vertical' className?: string + style?: React.CSSProperties } const FormControl = React.forwardRef( - ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className}, ref) => { + ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className, style}, ref) => { const [slots, childrenWithoutSlots] = useSlots(children, { caption: FormControlCaption, label: FormControlLabel, @@ -170,6 +171,7 @@ const FormControl = React.forwardRef( ref={ref} data-has-leading-visual={slots.leadingVisual ? '' : undefined} className={clsx(className, classes.ControlHorizontalLayout)} + style={style} > {InputChildren} @@ -178,6 +180,7 @@ const FormControl = React.forwardRef( ref={ref} data-has-label={!isLabelHidden ? '' : undefined} className={clsx(className, classes.ControlVerticalLayout)} + style={style} > {slots.label} {React.isValidElement(InputComponent) && diff --git a/packages/react/src/FormControl/FormControlCaption.tsx b/packages/react/src/FormControl/FormControlCaption.tsx index d01b2bd710e..ac96260c2d0 100644 --- a/packages/react/src/FormControl/FormControlCaption.tsx +++ b/packages/react/src/FormControl/FormControlCaption.tsx @@ -7,9 +7,10 @@ import {useFormControlContext} from './_FormControlContext' export type FormControlCaptionProps = React.PropsWithChildren<{ id?: string className?: string + style?: React.CSSProperties }> -function FormControlCaption({id, children, className}: FormControlCaptionProps) { +function FormControlCaption({id, children, className, style}: FormControlCaptionProps) { const {captionId, disabled} = useFormControlContext() return ( @@ -17,6 +18,7 @@ function FormControlCaption({id, children, className}: FormControlCaptionProps) id={id ?? captionId} className={clsx(className, classes.Caption)} data-control-disabled={disabled ? '' : undefined} + style={style} > {children} diff --git a/packages/react/src/FormControl/FormControlLabel.tsx b/packages/react/src/FormControl/FormControlLabel.tsx index 59b6f4a5fcd..e35dc9bc1a0 100644 --- a/packages/react/src/FormControl/FormControlLabel.tsx +++ b/packages/react/src/FormControl/FormControlLabel.tsx @@ -11,11 +11,23 @@ export type Props = { requiredIndicator?: boolean id?: string className?: string + style?: React.CSSProperties } const FormControlLabel: React.FC< React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps & Props> -> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, className, ...props}) => { +> = ({ + as, + children, + htmlFor, + id, + visuallyHidden, + requiredIndicator = true, + requiredText, + className, + style, + ...props +}) => { const {disabled, id: formControlId, required} = useFormControlContext() /** @@ -27,6 +39,7 @@ const FormControlLabel: React.FC< as, id, className, + style, visuallyHidden, required, requiredText, @@ -38,6 +51,7 @@ const FormControlLabel: React.FC< as, id, className, + style, visuallyHidden, htmlFor: htmlFor || formControlId, required, diff --git a/packages/react/src/FormControl/FormControlLeadingVisual.tsx b/packages/react/src/FormControl/FormControlLeadingVisual.tsx index fa253d1aa4f..6f009e4b442 100644 --- a/packages/react/src/FormControl/FormControlLeadingVisual.tsx +++ b/packages/react/src/FormControl/FormControlLeadingVisual.tsx @@ -1,14 +1,19 @@ import type React from 'react' import {useFormControlContext} from './_FormControlContext' import classes from './FormControlLeadingVisual.module.css' +import type {HTMLAttributes} from 'react' -const FormControlLeadingVisual: React.FC = ({children}) => { +const FormControlLeadingVisual: React.FC & HTMLAttributes = ({ + children, + ...props +}) => { const {disabled, captionId} = useFormControlContext() return (
{children}
diff --git a/packages/react/src/FormControl/_FormControlValidation.tsx b/packages/react/src/FormControl/_FormControlValidation.tsx index 4c3610128ad..0c58021a400 100644 --- a/packages/react/src/FormControl/_FormControlValidation.tsx +++ b/packages/react/src/FormControl/_FormControlValidation.tsx @@ -1,6 +1,5 @@ import type React from 'react' import InputValidation from '../internal/components/InputValidation' -import type {SxProp} from '../sx' import type {FormValidationStatus} from '../utils/types/FormValidationStatus' import {useFormControlContext} from './_FormControlContext' @@ -8,18 +7,24 @@ export type FormControlValidationProps = { variant: FormValidationStatus id?: string className?: string -} & SxProp + style?: React.CSSProperties +} const FormControlValidation: React.FC> = ({ children, className, variant, - sx, id, + style, }) => { const {validationMessageId} = useFormControlContext() return ( - + {children} ) diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx index 34cc2c084cd..c42928622be 100644 --- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx +++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx @@ -1,22 +1,20 @@ import React from 'react' import InputValidation from '../InputValidation' -import type {SxProp} from '../../../sx' import type {FormValidationStatus} from '../../../utils/types/FormValidationStatus' import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext' export type CheckboxOrRadioGroupValidationProps = { /** Changes the visual style to match the validation status */ variant: FormValidationStatus -} & SxProp +} const CheckboxOrRadioGroupValidation: React.FC> = ({ children, variant, - sx, }) => { const {validationMessageId = ''} = React.useContext(CheckboxOrRadioGroupContext) return ( - + {children} ) diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index 63e7bf86086..d34a412ea6d 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -1,10 +1,9 @@ import {clsx} from 'clsx' import type React from 'react' -import {type SxProp} from '../../sx' import classes from './InputLabel.module.css' import {BoxWithFallback} from './BoxWithFallback' -type BaseProps = SxProp & { +type BaseProps = { disabled?: boolean required?: boolean requiredText?: string @@ -12,6 +11,7 @@ type BaseProps = SxProp & { visuallyHidden?: boolean id?: string className?: string + style?: React.CSSProperties } export type LabelProps = BaseProps & { @@ -35,16 +35,16 @@ function InputLabel({ requiredText, requiredIndicator, visuallyHidden, - sx, as = 'label', className, + style, ...props }: Props) { return ( // @ts-ignore weird typing issue with union for `as` prop , @@ -21,7 +21,13 @@ const validationIconMap: Record< error: AlertFillIcon, } -const InputValidation: React.FC> = ({children, className, id, validationStatus}) => { +const InputValidation: React.FC> = ({ + children, + className, + id, + validationStatus, + style: inlineStyle, +}) => { const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined // TODO: use `text-caption-lineHeight` token as a custom property when it's available @@ -31,7 +37,11 @@ const InputValidation: React.FC> = ({children, cl const iconBoxMinHeight = iconSize * captionLineHeight return ( - + {IconComponent ? (