Skip to content

Commit 29cbdd9

Browse files
francineluccafrancinelucca
authored
Revert "refactor(FormControl): update to CSS Modules behind feature flag (#5370)"
This reverts commit 204ded0.
1 parent 4bcf78b commit 29cbdd9

File tree

12 files changed

+140
-403
lines changed

12 files changed

+140
-403
lines changed

‎.changeset/gentle-stingrays-search.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 0 additions & 57 deletions
This file was deleted.

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

Lines changed: 52 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import {clsx} from 'clsx'
21
import React, {useContext} from 'react'
32
import Autocomplete from '../Autocomplete'
3+
import Box from '../Box'
44
import Checkbox from '../Checkbox'
55
import Radio from '../Radio'
66
import Select from '../Select/Select'
@@ -10,6 +10,7 @@ import TextInputWithTokens from '../TextInputWithTokens'
1010
import Textarea from '../Textarea'
1111
import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup'
1212
import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer'
13+
import {get} from '../constants'
1314
import {useSlots} from '../hooks/useSlots'
1415
import type {SxProp} from '../sx'
1516
import {useId} from '../hooks/useId'
@@ -19,12 +20,6 @@ import FormControlLeadingVisual from './FormControlLeadingVisual'
1920
import FormControlValidation from './_FormControlValidation'
2021
import {FormControlContextProvider} from './_FormControlContext'
2122
import {warning} from '../utils/warning'
22-
import styled from 'styled-components'
23-
import sx from '../sx'
24-
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
25-
import {cssModulesFlag} from './feature-flags'
26-
import {useFeatureFlag} from '../FeatureFlags'
27-
import classes from './FormControl.module.css'
2823

2924
export type FormControlProps = {
3025
children?: React.ReactNode
@@ -50,7 +45,6 @@ export type FormControlProps = {
5045

5146
const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
5247
({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => {
53-
const enabled = useFeatureFlag(cssModulesFlag)
5448
const [slots, childrenWithoutSlots] = useSlots(children, {
5549
caption: FormControlCaption,
5650
label: FormControlLabel,
@@ -133,61 +127,69 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
133127
}}
134128
>
135129
{isChoiceInput || layout === 'horizontal' ? (
136-
<StyledHorizontalLayout
130+
<Box
137131
ref={ref}
138-
data-has-leading-visual={slots.leadingVisual ? '' : undefined}
132+
display="flex"
133+
alignItems={slots.leadingVisual ? 'center' : undefined}
139134
sx={sx}
140-
className={clsx(className, {
141-
[classes.ControlHorizontalLayout]: enabled,
142-
})}
135+
className={className}
143136
>
144-
<StyledChoiceInputs className={classes.ControlChoiceInputs}>
145-
{React.isValidElement(InputComponent)
146-
? React.cloneElement(
147-
InputComponent as React.ReactElement<{
148-
id: string
149-
disabled: boolean
150-
required: boolean
151-
['aria-describedby']: string
152-
}>,
153-
{
154-
id,
155-
disabled,
156-
// allow checkboxes to be required
157-
required: required && !isRadioInput,
158-
['aria-describedby']: captionId as string,
159-
},
160-
)
161-
: null}
137+
<Box sx={{'> input': {marginLeft: 0, marginRight: 0}}}>
138+
{React.isValidElement(InputComponent) &&
139+
React.cloneElement(
140+
InputComponent as React.ReactElement<{
141+
id: string
142+
disabled: boolean
143+
required: boolean
144+
['aria-describedby']: string
145+
}>,
146+
{
147+
id,
148+
disabled,
149+
// allow checkboxes to be required
150+
required: required && !isRadioInput,
151+
['aria-describedby']: captionId as string,
152+
},
153+
)}
162154
{childrenWithoutSlots.filter(
163155
child =>
164156
React.isValidElement(child) &&
165157
![Checkbox, Radio].some(inputComponent => child.type === inputComponent),
166158
)}
167-
</StyledChoiceInputs>
168-
{slots.leadingVisual ? (
169-
<StyledLeadingVisual
170-
className={clsx({
171-
[classes.LeadingVisual]: enabled,
172-
})}
173-
data-disabled={disabled ? '' : undefined}
174-
data-has-caption={slots.caption ? '' : undefined}
159+
</Box>
160+
{slots.leadingVisual && (
161+
<Box
162+
color={disabled ? 'fg.muted' : 'fg.default'}
163+
sx={{
164+
'> *': {
165+
minWidth: slots.caption ? get('fontSizes.4') : get('fontSizes.2'),
166+
minHeight: slots.caption ? get('fontSizes.4') : get('fontSizes.2'),
167+
fill: 'currentColor',
168+
},
169+
}}
170+
ml={2}
175171
>
176172
{slots.leadingVisual}
177-
</StyledLeadingVisual>
178-
) : null}
179-
<StyledLabelContainer className={classes.LabelContainer}>
173+
</Box>
174+
)}
175+
<Box
176+
sx={{
177+
'> *': {paddingLeft: 'var(--stack-gap-condensed)'},
178+
'> label': {fontWeight: 'var(--base-text-weight-normal)'},
179+
}}
180+
>
180181
{slots.label}
181182
{slots.caption}
182-
</StyledLabelContainer>
183-
</StyledHorizontalLayout>
183+
</Box>
184+
</Box>
184185
) : (
185-
<StyledVerticalLayout
186+
<Box
186187
ref={ref}
187-
data-has-label={!isLabelHidden ? '' : undefined}
188-
className={clsx(className, {
189-
[classes.ControlVerticalLayout]: enabled,
190-
})}
188+
display="flex"
189+
flexDirection="column"
190+
alignItems="flex-start"
191+
sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}}
192+
className={className}
191193
>
192194
{slots.label}
193195
{React.isValidElement(InputComponent) &&
@@ -213,96 +215,13 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
213215
<ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
214216
) : null}
215217
{slots.caption}
216-
</StyledVerticalLayout>
218+
</Box>
217219
)}
218220
</FormControlContextProvider>
219221
)
220222
},
221223
)
222224

223-
const StyledHorizontalLayout = toggleStyledComponent(
224-
cssModulesFlag,
225-
'div',
226-
styled.div`
227-
display: flex;
228-
229-
&:where([data-has-leading-visual]) {
230-
align-items: center;
231-
}
232-
233-
${sx}
234-
`,
235-
)
236-
237-
const StyledChoiceInputs = toggleStyledComponent(
238-
cssModulesFlag,
239-
'div',
240-
styled.div`
241-
> input {
242-
margin-left: 0;
243-
margin-right: 0;
244-
}
245-
`,
246-
)
247-
248-
const StyledLabelContainer = toggleStyledComponent(
249-
cssModulesFlag,
250-
'div',
251-
styled.div`
252-
> * {
253-
padding-left: var(--stack-gap-condensed);
254-
}
255-
256-
> label {
257-
font-weight: var(--base-text-weight-normal);
258-
}
259-
`,
260-
)
261-
262-
const StyledVerticalLayout = toggleStyledComponent(
263-
cssModulesFlag,
264-
'div',
265-
styled.div`
266-
display: flex;
267-
flex-direction: column;
268-
align-items: flex-start;
269-
270-
& > *:not(label) + * {
271-
margin-top: var(--base-size-4);
272-
}
273-
274-
&:where([data-has-label]) > * + * {
275-
margin-top: var(--base-size-4);
276-
}
277-
278-
${sx}
279-
`,
280-
)
281-
282-
const StyledLeadingVisual = toggleStyledComponent(
283-
cssModulesFlag,
284-
'div',
285-
styled.div`
286-
color: var(--fgColor-default);
287-
margin-left: var(--base-size-8);
288-
289-
&:where([data-disabled]) {
290-
color: var(--fgColor-muted);
291-
}
292-
293-
> * {
294-
fill: currentColor;
295-
min-width: var(--text-body-size-large);
296-
min-height: var(--text-body-size-large);
297-
}
298-
299-
> *:where([data-has-caption]) {
300-
min-width: var(--base-size-24);
301-
min-height: var(--base-size-24);
302-
}
303-
`,
304-
)
305-
306225
export default Object.assign(FormControl, {
307226
Caption: FormControlCaption,
308227
Label: FormControlLabel,

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

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 17 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1-
import {clsx} from 'clsx'
21
import React from 'react'
3-
import styled from 'styled-components'
4-
import {cssModulesFlag} from './feature-flags'
5-
import {useFeatureFlag} from '../FeatureFlags'
6-
import Text from '../Text'
7-
import sx from '../sx'
82
import type {SxProp} from '../sx'
9-
import classes from './FormControlCaption.module.css'
103
import {useFormControlContext} from './_FormControlContext'
11-
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
4+
import Text from '../Text'
5+
import styled from 'styled-components'
6+
import {get} from '../constants'
7+
import sx from '../sx'
8+
9+
const StyledCaption = styled(Text)`
10+
color: var(--fgColor-muted);
11+
display: block;
12+
font-size: ${get('fontSizes.0')};
13+
14+
&:where([data-control-disabled]) {
15+
color: var(--control-fgColor-disabled);
16+
}
17+
18+
${sx}
19+
`
1220

1321
type FormControlCaptionProps = React.PropsWithChildren<
1422
{
@@ -17,36 +25,12 @@ type FormControlCaptionProps = React.PropsWithChildren<
1725
>
1826

1927
function FormControlCaption({id, children, sx}: FormControlCaptionProps) {
20-
const enabled = useFeatureFlag(cssModulesFlag)
2128
const {captionId, disabled} = useFormControlContext()
2229
return (
23-
<StyledCaption
24-
id={id ?? captionId}
25-
className={clsx({
26-
[classes.Caption]: enabled,
27-
})}
28-
data-control-disabled={disabled ? '' : undefined}
29-
sx={sx}
30-
>
30+
<StyledCaption id={id ?? captionId} data-control-disabled={disabled ? '' : undefined} sx={sx}>
3131
{children}
3232
</StyledCaption>
3333
)
3434
}
3535

36-
const StyledCaption = toggleStyledComponent(
37-
cssModulesFlag,
38-
Text,
39-
styled(Text)`
40-
color: var(--fgColor-muted);
41-
display: block;
42-
font-size: var(--text-body-size-small);
43-
44-
&:where([data-control-disabled]) {
45-
color: var(--control-fgColor-disabled);
46-
}
47-
48-
${sx}
49-
`,
50-
)
51-
5236
export {FormControlCaption}

0 commit comments

Comments
 (0)