feat(text-input): add height variations to text input

carbon-design-system · Jan 16, 2020 · 023b69c · 023b69c
1 parent fb349c6
commit 023b69c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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 <input>
    */
@@ -188,6 +195,7 @@ TextInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: 'lg',
 };
 
 export default TextInput;