Fixed icon password visibility in FluidPasswordInput (#16496)

* fix: fixed button floating wrong * fix: fixed password visibility postion * fix: added classes and colors to fix icon visibility * fix: added back class * fix: fixed percy * fix: fixed password postion * fix: fix error in invalid state --------- Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · May 21, 2024 · 36bd564 · 36bd564
1 parent 96ef1a3
commit 36bd564
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/react/src/components/TextInput/PasswordInput.tsx b/packages/react/src/components/TextInput/PasswordInput.tsx
@@ -300,6 +300,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   ) : (
     <View className={`${prefix}--icon-visibility-on`} />
   );
+
   const passwordVisibilityToggleClasses = classNames(
     `${prefix}--text-input--password__visibility__toggle`,
     `${prefix}--btn`,

diff --git a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
@@ -153,6 +153,24 @@
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--text-input--fluid .#{$prefix}--toggle-password-tooltip {
+    @include focus-outline('reset');
+
+    position: absolute;
+    block-size: convert.to-rem(64px);
+    cursor: pointer;
+    inline-size: convert.to-rem(48px);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    transition: outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--toggle-password-tooltip
+    .#{$prefix}--popover {
+    inset-inline-start: 0;
+  }
+
   .#{$prefix}--text-input--fluid
     .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
     block-size: convert.to-rem(32px);