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

carbon-design-system · Jan 21, 2020 · 7011d0b · 7011d0b
1 parent d36f6ba
commit 7011d0b
Show file tree

Hide file tree

Showing 5 changed files with 39 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--large {
+    height: rem(48px);
+  }
+
+  .#{$prefix}--text-input--small {
+    height: rem(32px);
+  }
+
   .#{$prefix}--password-input {
     padding-right: $carbon--spacing-08;
   }

diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -25,6 +25,7 @@ const ControlledPasswordInput = React.forwardRef(
       togglePasswordVisibility,
       tooltipPosition = 'bottom',
       tooltipAlignment = 'center',
+      size,
       ...other
     },
     ref
@@ -37,6 +38,7 @@ const ControlledPasswordInput = React.forwardRef(
       {
         [`${prefix}--text-input--light`]: light,
         [`${prefix}--text-input--invalid`]: invalid,
+        [`${prefix}--text-input--${size}`]: size,
       }
     );
     const sharedTextInputProps = {
@@ -218,6 +220,11 @@ ControlledPasswordInput.propTypes = {
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify the size of the Text Input. Currently supports either `small` or `large` as an option. If omitted, defaults to standard size
+   */
+  size: PropTypes.string,
 };
 
 ControlledPasswordInput.defaultProps = {
@@ -229,6 +236,7 @@ ControlledPasswordInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: '',
 };
 
 export default ControlledPasswordInput;
diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
@@ -23,6 +23,7 @@ export default function PasswordInput({
   tooltipAlignment = 'center',
   hidePasswordLabel = 'Hide password',
   showPasswordLabel = 'Show password',
+  size,
   ...other
 }) {
   const [inputType, setInputType] = useState('password');
@@ -36,6 +37,7 @@ export default function PasswordInput({
     {
       [`${prefix}--text-input--light`]: light,
       [`${prefix}--text-input--invalid`]: invalid,
+      [`${prefix}--text-input--${size}`]: size,
     }
   );
   const sharedTextInputProps = {
@@ -223,6 +225,11 @@ PasswordInput.propTypes = {
    * "Show password" tooltip text on password visibility toggle
    */
   showPasswordLabel: PropTypes.string,
+
+  /**
+   * Specify the size of the Text Input. Currently supports either `small` or `large` as an option. If omitted, defaults to standard size
+   */
+  size: PropTypes.string,
 };
 
 PasswordInput.defaultProps = {
@@ -234,4 +241,5 @@ PasswordInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: '',
 };
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 = {
+  Large: 'large',
+  Default: '',
+  Small: 'small',
+};
+
 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 `small` or `large` as an option. If omitted, defaults to standard size
+   */
+  size: PropTypes.string,
+
   /**
    * Specify the type of the <input>
    */
@@ -188,6 +195,7 @@ TextInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: '',
 };
 
 export default TextInput;