diff --git a/.changeset/dirty-fans-tap.md b/.changeset/dirty-fans-tap.md new file mode 100644 index 00000000000..e524b12f1b3 --- /dev/null +++ b/.changeset/dirty-fans-tap.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update `Textarea` component to use CSS module diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css new file mode 100644 index 00000000000..6d73ca326f7 --- /dev/null +++ b/packages/react/src/Textarea/TextArea.module.css @@ -0,0 +1,34 @@ +.TextArea { + width: 100%; + font-family: inherit; + font-size: inherit; + color: inherit; + resize: both; + background-color: transparent; + border: 0; + appearance: none; +} + +.TextArea:focus { + outline: 0; +} + +.TextArea[resize='none'] { + resize: none; +} + +.TextArea[resize='both'] { + resize: both; +} + +.TextArea[resize='horizontal'] { + resize: horizontal; +} + +.TextArea[resize='vertical'] { + resize: vertical; +} + +.TextArea:disabled { + resize: none; +} diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx index ff39ed078b9..1e28d3dcdf8 100644 --- a/packages/react/src/Textarea/Textarea.tsx +++ b/packages/react/src/Textarea/Textarea.tsx @@ -5,6 +5,10 @@ import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper' import type {FormValidationStatus} from '../utils/types/FormValidationStatus' import type {SxProp} from '../sx' import sx from '../sx' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {clsx} from 'clsx' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './TextArea.module.css' export const DEFAULT_TEXTAREA_ROWS = 7 export const DEFAULT_TEXTAREA_COLS = 30 @@ -38,33 +42,39 @@ export type TextareaProps = { } & TextareaHTMLAttributes & SxProp -const StyledTextarea = styled.textarea` - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - resize: both; +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' - &:focus { - outline: 0; - } +const StyledTextarea = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'textarea', + styled.textarea` + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + resize: both; - ${props => - props.resize && - css` - resize: ${props.resize}; - `} + &:focus { + outline: 0; + } - ${props => - props.disabled && - css` - resize: none; - `} + ${props => + props.resize && + css` + resize: ${props.resize}; + `} + + ${props => + props.disabled && + css` + resize: none; + `} ${sx}; -` + `, +) /** * An accessible, native textarea component that supports validation states. @@ -88,6 +98,8 @@ const Textarea = React.forwardRef( }: TextareaProps, ref, ): ReactElement => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return ( ( disabled={disabled} rows={rows} cols={cols} + className={clsx(enabled && classes.TextArea, className)} {...rest} />