Skip to content

Commit 2703bc9

Browse files
francineluccamperrotti
francinelucca
and
mperrotti
authored
feat(FormControl): remove sx (#6951)
Co-authored-by: Mike Perrotti <mperrotti@users.noreply.github.com>
1 parent c49b278 commit 2703bc9

File tree

16 files changed

+102
-106
lines changed

16 files changed

+102
-106
lines changed

‎.changeset/grumpy-lobsters-obey.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
Update FormControl component to no longer support sx

‎packages/react/src/FormControl/FormControl.docs.json‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,6 @@
9898
"description": "Class name(s) for custom styling.",
9999
"defaultValue": ""
100100
},
101-
{
102-
"name": "sx",
103-
"type": "SystemStyleObject",
104-
"deprecated": true
105-
},
106101
{
107102
"name": "ref",
108103
"type": "React.RefObject<HTMLDivElement>"
@@ -152,11 +147,6 @@
152147
"type": "string",
153148
"description": "Class name(s) for custom styling.",
154149
"defaultValue": ""
155-
},
156-
{
157-
"name": "sx",
158-
"type": "SystemStyleObject",
159-
"deprecated": true
160150
}
161151
]
162152
},
@@ -174,11 +164,6 @@
174164
"type": "React.ReactNode",
175165
"defaultValue": "",
176166
"description": "The content (usually just text) that is rendered to give contextual info about the field"
177-
},
178-
{
179-
"name": "sx",
180-
"type": "SystemStyleObject",
181-
"deprecated": true
182167
}
183168
]
184169
},
@@ -203,11 +188,6 @@
203188
"type": "string",
204189
"description": "May be used to override the ID assigned by FormControl's React Context",
205190
"defaultValue": ""
206-
},
207-
{
208-
"name": "sx",
209-
"type": "SystemStyleObject",
210-
"deprecated": true
211191
}
212192
]
213193
},
@@ -219,13 +199,8 @@
219199
"type": "React.ReactNode",
220200
"defaultValue": "",
221201
"description": "The visual to render before the choice input's label"
222-
},
223-
{
224-
"name": "sx",
225-
"type": "SystemStyleObject",
226-
"deprecated": true
227202
}
228203
]
229204
}
230205
]
231-
}
206+
}

‎packages/react/src/FormControl/FormControl.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import Textarea from '../Textarea'
1111
import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup'
1212
import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer'
1313
import {useSlots} from '../hooks/useSlots'
14-
import type {SxProp} from '../sx'
1514
import {useId} from '../hooks/useId'
1615
import {FormControlCaption} from './FormControlCaption'
1716
import FormControlLabel from './FormControlLabel'
@@ -20,7 +19,6 @@ import FormControlValidation from './_FormControlValidation'
2019
import {FormControlContextProvider} from './_FormControlContext'
2120
import {warning} from '../utils/warning'
2221
import classes from './FormControl.module.css'
23-
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
2422
import {isSlot} from '../utils/is-slot'
2523

2624
export type FormControlProps = {
@@ -44,10 +42,10 @@ export type FormControlProps = {
4442
layout?: 'horizontal' | 'vertical'
4543
className?: string
4644
style?: React.CSSProperties
47-
} & SxProp
45+
}
4846

4947
const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
50-
({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className, style}, ref) => {
48+
({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className, style}, ref) => {
5149
const [slots, childrenWithoutSlots] = useSlots(children, {
5250
caption: FormControlCaption,
5351
label: FormControlLabel,
@@ -179,20 +177,18 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
179177
}}
180178
>
181179
{isChoiceInput || layout === 'horizontal' ? (
182-
<BoxWithFallback
180+
<div
183181
ref={ref}
184182
data-has-leading-visual={slots.leadingVisual ? '' : undefined}
185-
sx={sx}
186183
className={clsx(className, classes.ControlHorizontalLayout)}
187184
style={style}
188185
>
189186
{InputChildren}
190-
</BoxWithFallback>
187+
</div>
191188
) : (
192-
<BoxWithFallback
189+
<div
193190
ref={ref}
194191
data-has-label={!isLabelHidden ? '' : undefined}
195-
sx={sx}
196192
className={clsx(className, classes.ControlVerticalLayout)}
197193
style={style}
198194
>
@@ -222,7 +218,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
222218
<ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
223219
) : null}
224220
{slots.caption}
225-
</BoxWithFallback>
221+
</div>
226222
)}
227223
</FormControlContextProvider>
228224
)

‎packages/react/src/FormControl/FormControlCaption.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
import {clsx} from 'clsx'
22
import type React from 'react'
33
import Text from '../Text'
4-
import type {SxProp} from '../sx'
54
import classes from './FormControlCaption.module.css'
65
import {useFormControlContext} from './_FormControlContext'
7-
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
86

9-
type FormControlCaptionProps = React.PropsWithChildren<
10-
{
11-
id?: string
12-
className?: string
13-
style?: React.CSSProperties
14-
} & SxProp
15-
>
7+
export type FormControlCaptionProps = React.PropsWithChildren<{
8+
id?: string
9+
className?: string
10+
style?: React.CSSProperties
11+
}>
1612

17-
function FormControlCaption({id, children, sx, className, style}: FormControlCaptionProps) {
13+
function FormControlCaption({id, children, className, style}: FormControlCaptionProps) {
1814
const {captionId, disabled} = useFormControlContext()
1915

2016
return (
21-
<BoxWithFallback
22-
as={Text}
17+
<Text
2318
id={id ?? captionId}
2419
className={clsx(className, classes.Caption)}
2520
data-control-disabled={disabled ? '' : undefined}
26-
sx={sx}
2721
style={style}
2822
>
2923
{children}
30-
</BoxWithFallback>
24+
</Text>
3125
)
3226
}
3327

‎packages/react/src/FormControl/FormControlLabel.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type React from 'react'
2-
import type {SxProp} from '../sx'
32
import {useFormControlContext} from './_FormControlContext'
43
import {InputLabel} from '../internal/components/InputLabel'
54
import type {FCWithSlotMarker} from '../utils/types'
@@ -14,11 +13,11 @@ export type Props = {
1413
id?: string
1514
className?: string
1615
style?: React.CSSProperties
17-
} & SxProp
16+
}
1817

1918
const FormControlLabel: FCWithSlotMarker<
2019
React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps<typeof InputLabel> & Props>
21-
> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, className, ...props}) => {
20+
> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, className, ...props}) => {
2221
const {disabled, id: formControlId, required} = useFormControlContext()
2322

2423
/**
@@ -35,7 +34,6 @@ const FormControlLabel: FCWithSlotMarker<
3534
requiredText,
3635
requiredIndicator,
3736
disabled,
38-
sx,
3937
...props,
4038
}
4139
: {
@@ -48,7 +46,6 @@ const FormControlLabel: FCWithSlotMarker<
4846
requiredText,
4947
requiredIndicator,
5048
disabled,
51-
sx,
5249
...props,
5350
}
5451

‎packages/react/src/FormControl/FormControlLeadingVisual.module.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.LeadingVisual {
2+
--leadingVisual-size: 16px;
3+
4+
color: var(--fgColor-default);
5+
display: flex;
6+
align-items: center;
7+
8+
&:where([data-control-disabled]) {
9+
color: var(--control-fgColor-disabled);
10+
}
11+
12+
& > * {
13+
min-width: var(--leadingVisual-size);
14+
min-height: var(--leadingVisual-size);
15+
fill: currentColor;
16+
}
17+
18+
&:where([data-has-caption]) {
19+
--leadingVisual-size: 24px;
20+
}
21+
}

‎packages/react/src/FormControl/FormControlLeadingVisual.tsx‎

Lines changed: 5 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,25 @@
11
import type React from 'react'
2-
import type {SxProp} from '../sx'
32
import {useFormControlContext} from './_FormControlContext'
4-
import styled from 'styled-components'
5-
import sx from '../sx'
3+
import classes from './FormControlLeadingVisual.module.css'
64
import type {FCWithSlotMarker} from '../utils/types'
75

8-
const FormControlLeadingVisual: FCWithSlotMarker<React.PropsWithChildren<SxProp & {style?: React.CSSProperties}>> = ({
6+
const FormControlLeadingVisual: FCWithSlotMarker<React.PropsWithChildren<{style?: React.CSSProperties}>> = ({
97
children,
10-
sx,
118
style,
129
}) => {
1310
const {disabled, captionId} = useFormControlContext()
1411
return (
15-
<StyledLeadingVisual
12+
<div
13+
className={classes.LeadingVisual}
1614
data-control-disabled={disabled ? '' : undefined}
1715
style={style}
1816
data-has-caption={captionId ? '' : undefined}
19-
sx={sx}
2017
>
2118
{children}
22-
</StyledLeadingVisual>
19+
</div>
2320
)
2421
}
2522

26-
const StyledLeadingVisual = styled.div`
27-
--leadingVisual-size: var(--text-title-size-small);
28-
29-
color: var(--fgColor-default);
30-
31-
display: flex;
32-
align-items: center; /* Vertical alignment */
33-
34-
&:where([data-control-disabled]) {
35-
color: var(--control-fgColor-disabled);
36-
}
37-
38-
& > * {
39-
min-width: var(--leadingVisual-size);
40-
min-height: var(--leadingVisual-size);
41-
fill: currentColor;
42-
}
43-
44-
&:where([data-has-caption]) {
45-
--leadingVisual-size: var(--base-size-24);
46-
}
47-
48-
${sx}
49-
`
50-
5123
FormControlLeadingVisual.__SLOT__ = Symbol('FormControl.LeadingVisual')
5224

5325
export default FormControlLeadingVisual

‎packages/react/src/FormControl/_FormControlValidation.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type React from 'react'
22
import InputValidation from '../internal/components/InputValidation'
3-
import type {SxProp} from '../sx'
43
import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
54
import {useFormControlContext} from './_FormControlContext'
65
import type {FCWithSlotMarker} from '../utils/types'
@@ -10,13 +9,12 @@ export type FormControlValidationProps = {
109
id?: string
1110
className?: string
1211
style?: React.CSSProperties
13-
} & SxProp
12+
}
1413

1514
const FormControlValidation: FCWithSlotMarker<React.PropsWithChildren<FormControlValidationProps>> = ({
1615
children,
1716
className,
1817
variant,
19-
sx,
2018
id,
2119
style,
2220
}) => {
@@ -26,7 +24,6 @@ const FormControlValidation: FCWithSlotMarker<React.PropsWithChildren<FormContro
2624
className={className}
2725
validationStatus={variant}
2826
id={id || validationMessageId || ''}
29-
sx={sx}
3027
style={style}
3128
>
3229
{children}

‎packages/react/src/FormControl/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
export {useFormControlForwardedProps} from './_FormControlContext'
22
export {default} from './FormControl'
3+
export type {FormControlProps} from './FormControl'
4+
export type {FormControlCaptionProps} from './FormControlCaption'
5+
export type {Props as FormControlLabelProps} from './FormControlLabel'
6+
export type {FormControlValidationProps} from './_FormControlValidation'

‎packages/react/src/__tests__/__snapshots__/exports.test.ts.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
7474
"type FocusTrapHookSettings",
7575
"type FocusZoneHookSettings",
7676
"FormControl",
77+
"type FormControlCaptionProps",
78+
"type FormControlLabelProps",
79+
"type FormControlProps",
80+
"type FormControlValidationProps",
7781
"Header",
7882
"type HeaderItemProps",
7983
"type HeaderLinkProps",

0 commit comments

Comments
 (0)