From 83ecc8df83f88f8a7cfaed8b44990f4e96d9d373 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Tue, 19 Jan 2021 18:00:57 -0800
Subject: [PATCH] fix(PasswordInput): disable visibility toggle when input is
 disabled (#7482)

* fix(PasswordInput): disable visibility toggle when input is disabled

* test(PasswordInput): enable input
---
 .../components/text-input/_text-input.scss    |  6 +++++-
 .../TextInput/PasswordInput-test.js           |  1 +
 .../src/components/TextInput/PasswordInput.js | 21 ++++++++++++-------
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
index 95e042c66e36..3c1cfe116989 100644
--- a/packages/components/src/components/text-input/_text-input.scss
+++ b/packages/components/src/components/text-input/_text-input.scss
@@ -151,7 +151,11 @@
     + .#{$prefix}--text-input--password__visibility__toggle
     svg {
     cursor: not-allowed;
-    opacity: 0.5;
+    fill: $disabled-02;
+
+    &:hover {
+      fill: $disabled-02;
+    }
   }
 
   //-----------------------------
diff --git a/packages/react/src/components/TextInput/PasswordInput-test.js b/packages/react/src/components/TextInput/PasswordInput-test.js
index 8b36df8da2d3..cfd9911f4b91 100644
--- a/packages/react/src/components/TextInput/PasswordInput-test.js
+++ b/packages/react/src/components/TextInput/PasswordInput-test.js
@@ -100,6 +100,7 @@ describe('PasswordInput', () => {
 
       it('should set password visibility toggle text as expected', () => {
         const { hidePasswordLabel, showPasswordLabel } = wrapper.props();
+        wrapper.setProps({ disabled: false });
         expect(
           wrapper.find('.bx--text-input--password__visibility__toggle').text()
         ).toEqual(showPasswordLabel);
diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
index 264b742f6e6b..718e15df4585 100644
--- a/packages/react/src/components/TextInput/PasswordInput.js
+++ b/packages/react/src/components/TextInput/PasswordInput.js
@@ -11,6 +11,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   {
     labelText,
     className,
+    disabled,
     id,
     placeholder,
     onChange,
@@ -46,12 +47,12 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   const sharedTextInputProps = {
     id,
     onChange: (evt) => {
-      if (!other.disabled) {
+      if (!disabled) {
         onChange(evt);
       }
     },
     onClick: (evt) => {
-      if (!other.disabled) {
+      if (!disabled) {
         onClick(evt);
       }
     },
@@ -63,10 +64,10 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   };
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: other.disabled,
+    [`${prefix}--label--disabled`]: disabled,
   });
   const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: other.disabled,
+    [`${prefix}--form__helper-text--disabled`]: disabled,
   });
   const label = labelText ? (
     <label htmlFor={id} className={labelClasses}>
@@ -86,10 +87,12 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   );
   const passwordVisibilityToggleClasses = classNames(
     `${prefix}--text-input--password__visibility__toggle`,
+    `${prefix}--btn`,
     `${prefix}--btn--icon-only`,
     `${prefix}--tooltip__trigger`,
     `${prefix}--tooltip--a11y`,
     {
+      [`${prefix}--btn--disabled`]: disabled,
       [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
       [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment,
     }
@@ -98,15 +101,19 @@ const PasswordInput = React.forwardRef(function PasswordInput(
     <>
       <input
         {...textInputProps({ invalid, sharedTextInputProps, errorId })}
+        disabled={disabled}
         data-toggle-password-visibility={inputType === 'password'}
       />
       <button
         type="button"
         className={passwordVisibilityToggleClasses}
+        disabled={disabled}
         onClick={togglePasswordVisibility}>
-        <span className={`${prefix}--assistive-text`}>
-          {passwordIsVisible ? hidePasswordLabel : showPasswordLabel}
-        </span>
+        {!disabled && (
+          <span className={`${prefix}--assistive-text`}>
+            {passwordIsVisible ? hidePasswordLabel : showPasswordLabel}
+          </span>
+        )}
         {passwordVisibilityIcon}
       </button>
     </>