feat(PasswordInput): sync input type prop and state (#8368)

* fix(text-input): realign inline text input elements * feat(PasswordInput): sync input type prop and state * chore: deprecate ControlledPasswordInput * chore: update snapshots * Revert "fix(text-input): realign inline text input elements" This reverts commit f3294fd. Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 13, 2021 · 4a35ad5 · 4a35ad5
1 parent 8abc81e
commit 4a35ad5
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 222 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5677,6 +5677,9 @@ Map {
         "onClick": Object {
           "type": "func",
         },
+        "onTogglePasswordVisibility": Object {
+          "type": "func",
+        },
         "placeholder": Object {
           "type": "string",
         },
@@ -5707,6 +5710,15 @@ Map {
           ],
           "type": "oneOf",
         },
+        "type": Object {
+          "args": Array [
+            Array [
+              "password",
+              "text",
+            ],
+          ],
+          "type": "oneOf",
+        },
         "value": Object {
           "args": Array [
             Array [

diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput-test.js b/packages/react/src/components/TextInput/ControlledPasswordInput-test.js
diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -4,9 +4,12 @@ import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
 import { View16, ViewOff16, WarningFilled16 } from '@carbon/icons-react';
 import { textInputProps } from './util';
+import { warning } from '../../internal/warning';
 
 const { prefix } = settings;
 
+let didWarnAboutDeprecation = false;
+
 const ControlledPasswordInput = React.forwardRef(
   function ControlledPasswordInput(
     {
@@ -34,6 +37,14 @@ const ControlledPasswordInput = React.forwardRef(
     },
     ref
   ) {
+    if (__DEV__) {
+      warning(
+        didWarnAboutDeprecation,
+        '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`'
+      );
+      didWarnAboutDeprecation = true;
+    }
+
     const errorId = id + '-error-msg';
     const textInputClasses = classNames(
       `${prefix}--text-input`,

diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
@@ -30,18 +30,22 @@ const PasswordInput = React.forwardRef(function PasswordInput(
     light,
     tooltipPosition = 'bottom',
     tooltipAlignment = 'center',
+    type = 'password',
     hidePasswordLabel = 'Hide password',
     showPasswordLabel = 'Show password',
     size,
+    onTogglePasswordVisibility,
     warn,
     warnText,
     ...other
   },
   ref
 ) {
-  const [inputType, setInputType] = useState('password');
-  const togglePasswordVisibility = () =>
+  const [inputType, setInputType] = useState(type);
+  const handleTogglePasswordVisibility = (event) => {
     setInputType(inputType === 'password' ? 'text' : 'password');
+    onTogglePasswordVisibility && onTogglePasswordVisibility(event);
+  };
   const errorId = id + '-error-msg';
   const warnId = id + '-warn-msg';
   const textInputClasses = classNames(
@@ -159,7 +163,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
         type="button"
         className={passwordVisibilityToggleClasses}
         disabled={disabled}
-        onClick={togglePasswordVisibility}>
+        onClick={handleTogglePasswordVisibility}>
         {!disabled && (
           <span className={`${prefix}--assistive-text`}>
             {passwordIsVisible ? hidePasswordLabel : showPasswordLabel}
@@ -175,6 +179,10 @@ const PasswordInput = React.forwardRef(function PasswordInput(
 
   const { isFluid } = useContext(FormContext);
 
+  useEffect(() => {
+    setInputType(type);
+  }, [type]);
+
   return (
     <div className={inputWrapperClasses}>
       {!inline ? (
@@ -282,6 +290,12 @@ PasswordInput.propTypes = {
    */
   onClick: PropTypes.func,
 
+  /**
+   * Callback function that is called whenever the toggle password visibility
+   * button is clicked
+   */
+  onTogglePasswordVisibility: PropTypes.func,
+
   /**
    * Specify the placeholder attribute for the `<input>`
    */
@@ -309,6 +323,11 @@ PasswordInput.propTypes = {
    */
   tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 
+  /**
+   * The input type, either password or text
+   */
+  type: PropTypes.oneOf(['password', 'text']),
+
   /**
    * Provide the current value of the `<input>`
    */

diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
@@ -34,7 +34,7 @@ const ControlledPasswordInputApp = React.forwardRef(
     };
     return (
       <>
-        <TextInput.ControlledPasswordInput
+        <TextInput.PasswordInput
           type={type}
           togglePasswordVisibility={togglePasswordVisibility}
           ref={ref}
@@ -115,7 +115,7 @@ export default {
     },
     subcomponents: {
       TextInputSkeleton,
-      'TextInput.ControlledPasswordInput': TextInput.ControlledPasswordInput,
+      'TextInput.PasswordInput': TextInput.PasswordInput,
     },
   },
 };