Skip to content

Commit a812a86

Browse files
jamiesharkfrancinelucca
jamieshark
and
francinelucca
authored
Remove the CSS modules feature flag from the FormControl component (#5851)
Co-authored-by: francinelucca <[email protected]>
1 parent c177e5e commit a812a86

File tree

8 files changed

+105
-271
lines changed

8 files changed

+105
-271
lines changed

‎.changeset/hungry-pumas-poke.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Removes feature flag for FormControl

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

Lines changed: 61 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,8 @@ import FormControlLeadingVisual from './FormControlLeadingVisual'
2020
import FormControlValidation from './_FormControlValidation'
2121
import {FormControlContextProvider} from './_FormControlContext'
2222
import {warning} from '../utils/warning'
23-
import styled from 'styled-components'
24-
import sx from '../sx'
25-
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
26-
import {cssModulesFlag} from './feature-flags'
27-
import {useFeatureFlag} from '../FeatureFlags'
2823
import classes from './FormControl.module.css'
24+
import {defaultSxProp} from '../utils/defaultSxProp'
2925

3026
export type FormControlProps = {
3127
children?: React.ReactNode
@@ -51,7 +47,6 @@ export type FormControlProps = {
5147

5248
const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
5349
({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => {
54-
const enabled = useFeatureFlag(cssModulesFlag)
5550
const [slots, childrenWithoutSlots] = useSlots(children, {
5651
caption: FormControlCaption,
5752
label: FormControlLabel,
@@ -122,6 +117,46 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
122117
}
123118

124119
const isLabelHidden = slots.label?.props.visuallyHidden
120+
const InputChildren = (
121+
<>
122+
<div className={classes.ControlChoiceInputs}>
123+
{React.isValidElement(InputComponent)
124+
? React.cloneElement(
125+
InputComponent as React.ReactElement<{
126+
id: string
127+
disabled: boolean
128+
required: boolean
129+
['aria-describedby']: string
130+
}>,
131+
{
132+
id,
133+
disabled,
134+
// allow checkboxes to be required
135+
required: required && !isRadioInput,
136+
['aria-describedby']: captionId as string,
137+
},
138+
)
139+
: null}
140+
{childrenWithoutSlots.filter(
141+
child =>
142+
React.isValidElement(child) && ![Checkbox, Radio].some(inputComponent => child.type === inputComponent),
143+
)}
144+
</div>
145+
{slots.leadingVisual ? (
146+
<div
147+
className={classes.LeadingVisual}
148+
data-disabled={disabled ? '' : undefined}
149+
data-has-caption={slots.caption ? '' : undefined}
150+
>
151+
{slots.leadingVisual}
152+
</div>
153+
) : null}
154+
<div className={classes.LabelContainer}>
155+
{slots.label}
156+
{slots.caption}
157+
</div>
158+
</>
159+
)
125160

126161
return (
127162
<FormControlContextProvider
@@ -134,69 +169,33 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
134169
}}
135170
>
136171
{isChoiceInput || layout === 'horizontal' ? (
137-
<StyledHorizontalLayout
138-
ref={ref}
139-
data-has-leading-visual={slots.leadingVisual ? '' : undefined}
140-
sx={sx}
141-
className={clsx(className, {
142-
[classes.ControlHorizontalLayout]: enabled,
143-
})}
144-
>
145-
<StyledChoiceInputs className={classes.ControlChoiceInputs}>
146-
{React.isValidElement(InputComponent)
147-
? React.cloneElement(
148-
InputComponent as React.ReactElement<{
149-
id: string
150-
disabled: boolean
151-
required: boolean
152-
['aria-describedby']: string
153-
}>,
154-
{
155-
id,
156-
disabled,
157-
// allow checkboxes to be required
158-
required: required && !isRadioInput,
159-
['aria-describedby']: captionId as string,
160-
},
161-
)
162-
: null}
163-
{childrenWithoutSlots.filter(
164-
child =>
165-
React.isValidElement(child) &&
166-
![Checkbox, Radio].some(inputComponent => child.type === inputComponent),
167-
)}
168-
</StyledChoiceInputs>
169-
{slots.leadingVisual ? (
170-
<StyledLeadingVisual
171-
className={clsx({
172-
[classes.LeadingVisual]: enabled,
173-
})}
174-
data-disabled={disabled ? '' : undefined}
175-
data-has-caption={slots.caption ? '' : undefined}
176-
>
177-
{slots.leadingVisual}
178-
</StyledLeadingVisual>
179-
) : null}
180-
<StyledLabelContainer className={classes.LabelContainer}>
181-
{slots.label}
182-
{slots.caption}
183-
</StyledLabelContainer>
184-
</StyledHorizontalLayout>
172+
sx !== defaultSxProp ? (
173+
<Box
174+
ref={ref}
175+
data-has-leading-visual={slots.leadingVisual ? '' : undefined}
176+
sx={sx}
177+
className={clsx(className, classes.ControlHorizontalLayout)}
178+
>
179+
{InputChildren}
180+
</Box>
181+
) : (
182+
<div
183+
ref={ref}
184+
data-has-leading-visual={slots.leadingVisual ? '' : undefined}
185+
className={clsx(className, classes.ControlHorizontalLayout)}
186+
>
187+
{InputChildren}
188+
</div>
189+
)
185190
) : (
186191
<Box
187192
ref={ref}
188193
data-has-label={!isLabelHidden ? '' : undefined}
189194
display="flex"
190195
flexDirection="column"
191196
alignItems="flex-start"
192-
sx={
193-
enabled
194-
? sx
195-
: {...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}
196-
}
197-
className={clsx(className, {
198-
[classes.ControlVerticalLayout]: enabled,
199-
})}
197+
sx={sx}
198+
className={clsx(className, classes.ControlVerticalLayout)}
200199
>
201200
{slots.label}
202201
{React.isValidElement(InputComponent) &&
@@ -229,69 +228,6 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
229228
},
230229
)
231230

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

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

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import {clsx} from 'clsx'
22
import React from 'react'
3-
import styled from 'styled-components'
4-
import {cssModulesFlag} from './feature-flags'
5-
import {useFeatureFlag} from '../FeatureFlags'
63
import Text from '../Text'
7-
import sx from '../sx'
84
import type {SxProp} from '../sx'
95
import classes from './FormControlCaption.module.css'
106
import {useFormControlContext} from './_FormControlContext'
11-
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
7+
import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
128

139
type FormControlCaptionProps = React.PropsWithChildren<
1410
{
@@ -17,37 +13,21 @@ type FormControlCaptionProps = React.PropsWithChildren<
1713
} & SxProp
1814
>
1915

16+
const Caption = toggleSxComponent({}, Text) as React.ComponentType<FormControlCaptionProps>
17+
2018
function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
21-
const enabled = useFeatureFlag(cssModulesFlag)
2219
const {captionId, disabled} = useFormControlContext()
20+
2321
return (
24-
<StyledCaption
22+
<Caption
2523
id={id ?? captionId}
26-
className={clsx(className, {
27-
[classes.Caption]: enabled,
28-
})}
24+
className={clsx(className, classes.Caption)}
2925
data-control-disabled={disabled ? '' : undefined}
3026
sx={sx}
3127
>
3228
{children}
33-
</StyledCaption>
29+
</Caption>
3430
)
3531
}
3632

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

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,25 @@ import {
1212
TextInput,
1313
TextInputWithTokens,
1414
} from '../..'
15+
import {behavesAsComponent} from '../../utils/testing'
1516
import {MarkGithubIcon} from '@primer/octicons-react'
1617

1718
const LABEL_TEXT = 'Form control'
1819
const CAPTION_TEXT = 'Hint text'
1920
const ERROR_TEXT = 'This field is invalid'
2021

2122
describe('FormControl', () => {
23+
behavesAsComponent({
24+
Component: FormControl,
25+
options: {skipAs: true, skipDisplayName: true},
26+
toRender: () => (
27+
<FormControl>
28+
<FormControl.Label>{LABEL_TEXT}</FormControl.Label>
29+
<TextInput />
30+
</FormControl>
31+
),
32+
})
33+
2234
describe('vertically stacked layout (default)', () => {
2335
describe('rendering', () => {
2436
it('renders with a hidden label', () => {

‎packages/react/src/FormControl/feature-flags.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)