fix(PasswordInput): tooltip issue in show password label or hide pass…

…word label (#17103) * fix: show warning if showPasswordLabel or hidePasswordLabel is blank * fix: show warning if showPasswordLabel or hidePasswordLabel is blank
carbon-design-system · Aug 5, 2024 · aa7b805 · aa7b805
1 parent 796f838
commit aa7b805
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/react/src/components/TextInput/PasswordInput.tsx b/packages/react/src/components/TextInput/PasswordInput.tsx
@@ -329,6 +329,11 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   if (tooltipPosition === 'right' || tooltipPosition === 'left') {
     align = tooltipPosition;
   }
+  if (!hidePasswordLabel || hidePasswordLabel.trim() === '') {
+    console.warn('Warning: The "hidePasswordLabel" should not be blank.');
+  } else if (!showPasswordLabel || showPasswordLabel.trim() === '') {
+    console.warn('Warning: The "showPasswordLabel" should not be blank.');
+  }
   const input = (
     <>
       <input
@@ -349,6 +354,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
         data-toggle-password-visibility={inputType === 'password'}
       />
       {isFluid && <hr className={`${prefix}--text-input__divider`} />}
+
       <Tooltip
         align={align}
         className={`${prefix}--toggle-password-tooltip`}

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
@@ -132,7 +132,11 @@
   }
 
   .#{$prefix}--toggle-password-tooltip .#{$prefix}--popover {
-    inset-inline-start: -(convert.to-rem(40px));
+    inset-inline-start: -($spacing-08);
+  }
+
+  .#{$prefix}--toggle-password-tooltip .#{$prefix}--popover-content {
+    min-inline-size: $spacing-08;
   }
 
   .#{$prefix}--text-input--sm