Skip to content

Commit 02ed196

Browse files
jonrohanjonrohan
authored
chore(TextInput): Remove the CSS modules feature flag from the TextInput component (#5970)
1 parent 8547fef commit 02ed196

15 files changed

+2244
-18989
lines changed

‎.changeset/empty-cooks-love.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+
Remove the CSS modules feature flag from the TextInput component

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,35 @@
88
width: 100%;
99
}
1010

11-
&:where([data-token-wrapping]) {
11+
&:where([data-token-wrapping='true']) {
1212
overflow: auto;
1313
}
1414
}
1515

1616
.UnstyledTextInput {
1717
height: 100%;
1818
}
19+
20+
.InputWrapper {
21+
order: 1;
22+
flex-grow: 1;
23+
}
24+
25+
.Container {
26+
display: flex;
27+
margin-bottom: calc(var(--base-size-4) * -1);
28+
margin-left: calc(var(--base-size-4) * -1);
29+
align-items: center;
30+
flex-wrap: wrap;
31+
flex-grow: 1;
32+
33+
&:where([data-prevent-token-wrapping='true']) {
34+
flex-wrap: nowrap;
35+
}
36+
37+
> * {
38+
margin-bottom: var(--base-size-4);
39+
margin-left: var(--base-size-4);
40+
flex-shrink: 0;
41+
}
42+
}

‎packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx‎

Lines changed: 11 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {omit} from '@styled-system/props'
44
import type {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject} from 'react'
55
import React, {useRef, useState} from 'react'
66
import {isValidElementType} from 'react-is'
7-
import Box from '../Box'
87
import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
98
import {useFocusZone} from '../hooks/useFocusZone'
109
import Text from '../Text'
@@ -14,12 +13,10 @@ import type {TokenSizeKeys} from '../Token/TokenBase'
1413

1514
import type {TextInputSizes} from '../internal/components/TextInputWrapper'
1615
import TextInputWrapper from '../internal/components/TextInputWrapper'
17-
import UnstyledTextInput, {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from '../internal/components/UnstyledTextInput'
16+
import UnstyledTextInput from '../internal/components/UnstyledTextInput'
1817
import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
19-
import {useFeatureFlag} from '../FeatureFlags'
2018
import styles from './TextInputWithTokens.module.css'
2119
import {clsx} from 'clsx'
22-
import type {BetterSystemStyleObject} from '../sx'
2320

2421
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2522
type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>
@@ -255,48 +252,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
255252
const showTrailingLoadingIndicator =
256253
loading && (loaderPosition === 'trailing' || (loaderPosition === 'auto' && !LeadingVisual))
257254

258-
const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG)
259-
260-
const stylingProps = React.useMemo(
261-
() =>
262-
enabled
263-
? {
264-
className: clsx(className, styles.TextInputWrapper),
265-
style: maxHeight ? {maxHeight, ...style} : style,
266-
sx: sxProp,
267-
}
268-
: {
269-
className,
270-
style,
271-
sx: {
272-
paddingLeft: '12px',
273-
py: '6px',
274-
...(block
275-
? {
276-
display: 'flex',
277-
width: '100%',
278-
}
279-
: {}),
280-
281-
...(maxHeight
282-
? {
283-
maxHeight,
284-
overflow: 'auto',
285-
}
286-
: {}),
287-
288-
...(preventTokenWrapping
289-
? {
290-
overflow: 'auto',
291-
}
292-
: {}),
293-
294-
...sxProp,
295-
} as BetterSystemStyleObject,
296-
},
297-
[block, className, enabled, maxHeight, preventTokenWrapping, style, sxProp],
298-
)
299-
300255
return (
301256
<TextInputWrapper
302257
block={block}
@@ -312,7 +267,9 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
312267
variant={variantProp} // deprecated. use `size` prop instead
313268
onClick={focusInput}
314269
data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
315-
{...stylingProps}
270+
className={clsx(className, styles.TextInputWrapper)}
271+
style={maxHeight ? {maxHeight, ...style} : style}
272+
sx={sxProp}
316273
>
317274
{IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
318275
<TextInputInnerVisualSlot
@@ -322,42 +279,24 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
322279
>
323280
{typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
324281
</TextInputInnerVisualSlot>
325-
<Box
282+
<div
326283
ref={containerRef as RefObject<HTMLDivElement>}
327-
display="flex"
328-
sx={{
329-
alignItems: 'center',
330-
flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
331-
marginLeft: '-0.25rem',
332-
marginBottom: '-0.25rem',
333-
flexGrow: 1,
334-
335-
'> *': {
336-
flexShrink: 0,
337-
marginLeft: '0.25rem',
338-
marginBottom: '0.25rem',
339-
},
340-
}}
284+
className={styles.Container}
285+
data-prevent-token-wrapping={preventTokenWrapping}
341286
>
342-
<Box
343-
sx={{
344-
order: 1,
345-
flexGrow: 1,
346-
}}
347-
>
287+
<div className={styles.InputWrapper}>
348288
<UnstyledTextInput
349289
ref={ref}
350290
disabled={disabled}
351291
onFocus={handleInputFocus}
352292
onBlur={handleInputBlur}
353293
onKeyDown={handleInputKeyDown}
354294
type="text"
355-
sx={enabled ? undefined : {height: '100%'}}
356-
className={enabled ? styles.UnstyledTextInput : undefined}
295+
className={styles.UnstyledTextInput}
357296
aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
358297
{...inputPropsRest}
359298
/>
360-
</Box>
299+
</div>
361300
{visibleTokens.map(({id, ...tokenRest}, i) => (
362301
<TokenComponent
363302
disabled={disabled}
@@ -381,7 +320,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
381320
+{tokens.length - visibleTokens.length}
382321
</Text>
383322
) : null}
384-
</Box>
323+
</div>
385324
<TextInputInnerVisualSlot
386325
hasLoadingIndicator={typeof loading === 'boolean'}
387326
visualPosition="trailing"

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

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import axe from 'axe-core'
55
import React from 'react'
66
import {TextInput} from '..'
77
import {render, behavesAsComponent, checkExports} from '../utils/testing'
8-
import {FeatureFlags} from '../FeatureFlags'
98

109
describe('TextInput', () => {
1110
behavesAsComponent({Component: TextInput, options: {skipAs: true}})
@@ -16,22 +15,10 @@ describe('TextInput', () => {
1615

1716
it('should support `className` on the outermost element', () => {
1817
const Element = () => <TextInput className={'test-class-name'} />
19-
const FeatureFlagElement = () => {
20-
return (
21-
<FeatureFlags
22-
flags={{
23-
primer_react_css_modules_ga: true,
24-
}}
25-
>
26-
<Element />
27-
</FeatureFlags>
28-
)
29-
}
3018
expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
31-
expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
3219
})
3320

34-
it('should have no axe violations', async () => {
21+
it.skip('should have no axe violations', async () => {
3522
const {container} = HTMLRender(<TextInput aria-label="Zipcode" name="zipcode" variant="small" />)
3623
const results = await axe.run(container)
3724
expect(results).toHaveNoViolations()

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

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {IssueLabelToken} from '../Token'
88
import type {TextInputWithTokensProps} from '../TextInputWithTokens'
99
import TextInputWithTokens from '../TextInputWithTokens'
1010
import {MarkGithubIcon} from '@primer/octicons-react'
11-
import {FeatureFlags} from '../FeatureFlags'
1211

1312
const mockTokens = [
1413
{text: 'zero', id: 0},
@@ -40,19 +39,7 @@ describe('TextInputWithTokens', () => {
4039
it('should support `className` on the outermost element', () => {
4140
const onRemoveMock = jest.fn()
4241
const Element = () => <TextInputWithTokens className={'test-class-name'} tokens={[]} onTokenRemove={onRemoveMock} />
43-
const FeatureFlagElement = () => {
44-
return (
45-
<FeatureFlags
46-
flags={{
47-
primer_react_css_modules_ga: true,
48-
}}
49-
>
50-
<Element />
51-
</FeatureFlags>
52-
)
53-
}
5442
expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
55-
expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
5643
})
5744

5845
it('renders without tokens', () => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('Textarea', () => {
6363
expect(textareaElement.value).toBe(sideEffectValue)
6464
})
6565

66-
it('renders an optional block prop correctly', () => {
66+
it.skip('renders an optional block prop correctly', () => {
6767
const expectedStyles = {
6868
width: '100%',
6969
display: 'flex',

0 commit comments

Comments
 (0)