diff --git a/.changeset/better-steaks-dress.md b/.changeset/better-steaks-dress.md new file mode 100644 index 00000000000..6179fc261ac --- /dev/null +++ b/.changeset/better-steaks-dress.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Removes `sx` prop from internal helper components which results in `sx` no longer being available on the TextInput.Label component diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx index 73cc704ffc1..bac52d497b3 100644 --- a/packages/react/src/Button/LinkButton.tsx +++ b/packages/react/src/Button/LinkButton.tsx @@ -3,7 +3,7 @@ import type {LinkButtonProps as BaseLinkButtonProps, ButtonProps} from './types' import {ButtonBase} from './ButtonBase' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -export type LinkButtonProps = Omit +export type LinkButtonProps = BaseLinkButtonProps & ButtonProps const LinkButton = forwardRef(({children, as: Component = 'a', ...props}, forwardedRef): JSX.Element => { return ( diff --git a/packages/react/src/FormControl/FormControlLabel.tsx b/packages/react/src/FormControl/FormControlLabel.tsx index ff2a3ffe97c..b9e14cbc23e 100644 --- a/packages/react/src/FormControl/FormControlLabel.tsx +++ b/packages/react/src/FormControl/FormControlLabel.tsx @@ -1,5 +1,4 @@ import type React from 'react' -import type {SxProp} from '../sx' import {useFormControlContext} from './_FormControlContext' import {InputLabel} from '../internal/components/InputLabel' @@ -13,11 +12,11 @@ export type Props = { id?: string className?: string style?: React.CSSProperties -} & SxProp +} const FormControlLabel: React.FC< React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps & Props> -> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, className, ...props}) => { +> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, className, ...props}) => { const {disabled, id: formControlId, required} = useFormControlContext() /** @@ -34,7 +33,6 @@ const FormControlLabel: React.FC< requiredText, requiredIndicator, disabled, - sx, ...props, } : { @@ -47,7 +45,6 @@ const FormControlLabel: React.FC< requiredText, requiredIndicator, disabled, - sx, ...props, } diff --git a/packages/react/src/FormControl/_FormControlValidation.tsx b/packages/react/src/FormControl/_FormControlValidation.tsx index 6678eaf8153..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' @@ -9,13 +8,12 @@ export type FormControlValidationProps = { id?: string className?: string style?: React.CSSProperties -} & SxProp +} const FormControlValidation: React.FC> = ({ children, className, variant, - sx, id, style, }) => { @@ -25,7 +23,6 @@ const FormControlValidation: React.FC {children} diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index 63e7bf86086..2eca1beda87 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -1,10 +1,8 @@ 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 @@ -35,16 +33,15 @@ function InputLabel({ requiredText, requiredIndicator, visuallyHidden, - sx, as = 'label', className, ...props }: Props) { + const Component = as + return ( // @ts-ignore weird typing issue with union for `as` prop - + ) } diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx index 22809a452fa..e013cab6948 100644 --- a/packages/react/src/internal/components/InputValidation.tsx +++ b/packages/react/src/internal/components/InputValidation.tsx @@ -2,7 +2,6 @@ import type {IconProps} from '@primer/octicons-react' import {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react' import type React from 'react' import Text from '../../Text' -import type {SxProp} from '../../sx' import type {FormValidationStatus} from '../../utils/types/FormValidationStatus' import classes from './InputValidation.module.css' import {clsx} from 'clsx' @@ -12,7 +11,7 @@ type Props = { id: string validationStatus?: FormValidationStatus style?: React.CSSProperties -} & SxProp +} const validationIconMap: Record< NonNullable,