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

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

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
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 `sm`, `lg` or `xl` as an option.
+   */
+  size: PropTypes.string,
 };
 
 ControlledPasswordInput.defaultProps = {
@@ -229,6 +236,7 @@ ControlledPasswordInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: 'lg',
 };
 
 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 `sm`, `lg` or `xl` as an option.
+   */
+  size: PropTypes.string,
 };
 
 PasswordInput.defaultProps = {
@@ -234,4 +241,5 @@ PasswordInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: 'lg',
 };