diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss index 491b3791b9ac..26a544d3f06f 100644 --- a/packages/components/src/components/text-input/_text-input.scss +++ b/packages/components/src/components/text-input/_text-input.scss @@ -44,6 +44,14 @@ } } + .#{$prefix}--text-input--xl { + height: rem(48px); + } + + .#{$prefix}--text-input--sm { + height: rem(32px); + } + .#{$prefix}--password-input { padding-right: $carbon--spacing-08; } diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js index 5bea8e5cc0ae..2da5d32abcf9 100644 --- a/packages/react/src/components/TextInput/TextInput-story.js +++ b/packages/react/src/components/TextInput/TextInput-story.js @@ -19,6 +19,12 @@ const types = { 'For password (password)': 'password', }; +const sizes = { + 'Extra large size (xl)': 'xl', + 'Regular size (lg)': '', + 'Small size (sm)': 'sm', +}; + function ControlledPasswordInputApp(props) { const [type, setType] = useState('password'); const togglePasswordVisibility = () => { @@ -45,6 +51,7 @@ const props = { 'Default value (defaultValue)', 'This is not a default value' ), + size: select('Field size (size)', sizes, '') || undefined, labelText: text('Label text (labelText)', 'Text Input label'), placeholder: text('Placeholder text (placeholder)', 'Placeholder text'), light: boolean('Light variant (light)', false), diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js index a408a51da952..53ef98ad0ad7 100644 --- a/packages/react/src/components/TextInput/TextInput.js +++ b/packages/react/src/components/TextInput/TextInput.js @@ -29,6 +29,7 @@ const TextInput = React.forwardRef(function TextInput( invalidText, helperText, light, + size, ...other }, ref @@ -37,6 +38,7 @@ const TextInput = React.forwardRef(function TextInput( const textInputClasses = classNames(`${prefix}--text-input`, className, { [`${prefix}--text-input--light`]: light, [`${prefix}--text-input--invalid`]: invalid, + [`${prefix}--text-input--${size}`]: size, }); const sharedTextInputProps = { id, @@ -143,6 +145,11 @@ TextInput.propTypes = { */ placeholder: PropTypes.string, + /** + * Specify the size of the Text Input. Currently supports either `sm`, `lg` or `xl` as an option. + */ + size: PropTypes.string, + /** * Specify the type of the */ @@ -188,6 +195,7 @@ TextInput.defaultProps = { invalidText: '', helperText: '', light: false, + size: 'lg', }; export default TextInput;