diff --git a/.changeset/late-swans-knock.md b/.changeset/late-swans-knock.md new file mode 100644 index 00000000000..3541d391dc3 --- /dev/null +++ b/.changeset/late-swans-knock.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Convert UnstyledTextInput to use CSS Modules behing feature flag diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css new file mode 100644 index 00000000000..77f34f28978 --- /dev/null +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css @@ -0,0 +1,3 @@ +.UnstyledTextInput { + height: 100%; +} diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx index e2c97ac77f1..c81fb0d9b99 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -14,8 +14,11 @@ import type {TokenSizeKeys} from '../Token/TokenBase' import type {TextInputSizes} from '../internal/components/TextInputWrapper' import TextInputWrapper, {textInputHorizPadding} from '../internal/components/TextInputWrapper' -import UnstyledTextInput from '../internal/components/UnstyledTextInput' +import UnstyledTextInput, {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from '../internal/components/UnstyledTextInput' import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot' +import {useFeatureFlag} from '../FeatureFlags' + +import styles from './TextInputWithTokens.module.css' // eslint-disable-next-line @typescript-eslint/no-explicit-any type AnyReactComponent = React.ComponentType> @@ -250,6 +253,8 @@ function TextInputWithTokensInnerComponent diff --git a/packages/react/src/internal/components/UnstyledTextInput.module.css b/packages/react/src/internal/components/UnstyledTextInput.module.css new file mode 100644 index 00000000000..c0b100c57fa --- /dev/null +++ b/packages/react/src/internal/components/UnstyledTextInput.module.css @@ -0,0 +1,13 @@ +.Input { + width: 100%; + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: transparent; + border: 0; + appearance: none; + + &:focus { + outline: 0; + } +} diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx index 5e924e00a61..3c5cb598d3a 100644 --- a/packages/react/src/internal/components/UnstyledTextInput.tsx +++ b/packages/react/src/internal/components/UnstyledTextInput.tsx @@ -1,19 +1,42 @@ import styled from 'styled-components' -import sx from '../../sx' +import sx, {type SxProp} from '../../sx' +import {toggleStyledComponent} from '../utils/toggleStyledComponent' +import React from 'react' +import {useFeatureFlag} from '../../FeatureFlags' -const UnstyledTextInput = styled.input` - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - &:focus { - outline: 0; - } +import styles from './UnstyledTextInput.module.css' +import {clsx} from 'clsx' - ${sx}; -` +export const TEXT_INPUT_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + +type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & SxProp + +const ToggledUnstyledTextInput = toggleStyledComponent( + TEXT_INPUT_CSS_MODULES_FEATURE_FLAG, + 'input', + styled.input` + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + &:focus { + outline: 0; + } + + ${sx}; + `, +) + +const UnstyledTextInput = React.forwardRef(function UnstyledTextInput( + {className, ...rest}, + forwardRef, +) { + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + return +}) +UnstyledTextInput.displayName = 'UnstyledTextInput' export default UnstyledTextInput