Skip to content

Commit f81f82c

Browse files
francineluccafrancinelucca
authored
Merge branch 'main' into revert-5464-css_modules_remove_select
2 parents a44115e + 43afd36 commit f81f82c

File tree

12 files changed

+140
-404
lines changed

12 files changed

+140
-404
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 & 134 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,62 +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-
sx={sx}
189-
className={clsx(className, {
190-
[classes.ControlVerticalLayout]: enabled,
191-
})}
188+
display="flex"
189+
flexDirection="column"
190+
alignItems="flex-start"
191+
sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}}
192+
className={className}
192193
>
193194
{slots.label}
194195
{React.isValidElement(InputComponent) &&
@@ -214,96 +215,13 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
214215
<ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
215216
) : null}
216217
{slots.caption}
217-
</StyledVerticalLayout>
218+
</Box>
218219
)}
219220
</FormControlContextProvider>
220221
)
221222
},
222223
)
223224

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