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

…7482) * fix(PasswordInput): disable visibility toggle when input is disabled * test(PasswordInput): enable input
carbon-design-system · Jan 20, 2021 · 83ecc8d · 83ecc8d
1 parent 57017f0
commit 83ecc8d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>
     </>