From 2be09fa262cb45e849730f2325147603a49ebd6e Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Mon, 11 Feb 2019 14:26:43 -0600
Subject: [PATCH] fix(text-input): position experimental password visibility
 toggle (#1735)

* fix(text-input): style experimental password toggle

* fix(text-input): add prefix to password visibility toggle SVGs

* refactor(text-input): avoid data attribute selector
---
 src/components/text-input/_text-input.scss | 42 ++++++++++++++++++++++
 src/components/text-input/text-input.hbs   | 14 ++++----
 src/components/text-input/text-input.js    |  4 +--
 tests/spec/text-input_spec.js              |  4 +--
 4 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index 88b3963d3974..d0494f098d5d 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -143,6 +143,36 @@
     &:active {
       @include focus-outline('outline');
     }
+
+    &-wrapper svg[hidden] {
+      display: none;
+    }
+
+    &[type='text'] + .#{$prefix}--text-input--password__visibility,
+    &[type='password'] + .#{$prefix}--text-input--password__visibility {
+      top: rem(-28px);
+      right: rem(12px);
+      display: flex;
+      justify-content: center;
+      align-self: flex-end;
+      align-items: center;
+      height: rem(16px);
+      width: rem(16px);
+      padding: 0;
+      margin-bottom: -1rem;
+      border: 0;
+      background: none;
+      cursor: pointer;
+      outline: inherit;
+
+      svg {
+        fill: $brand-01;
+
+        &:hover {
+          fill: $hover-primary;
+        }
+      }
+    }
   }
 
   .#{$prefix}--text-input::-webkit-input-placeholder {
@@ -161,6 +191,18 @@
     background-position: right 8px bottom 50%;
   }
 
+  .#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility svg {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility,
+  .#{$prefix}--text-input[data-invalid] + .#{$prefix}--text-input--password__visibility,
+  .#{$prefix}--text-input:invalid + .#{$prefix}--text-input--password__visibility,
+  .#{$prefix}--text-input[data-loading] + .#{$prefix}--text-input--password__visibility {
+    right: rem(32px);
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------
diff --git a/src/components/text-input/text-input.hbs b/src/components/text-input/text-input.hbs
index b0b694782d21..e5e48b609bf1 100644
--- a/src/components/text-input/text-input.hbs
+++ b/src/components/text-input/text-input.hbs
@@ -14,13 +14,13 @@
     placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
     {{#if @root.featureFlags.componentsX}}
-      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
+      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
       {{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
     {{else}}
-      <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
+      <svg class="{{@root.prefix}}--icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
         <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
       </svg>
-      <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
+      <svg class="{{@root.prefix}}--icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
         <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
         <path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
       </svg>
@@ -39,7 +39,7 @@
     placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
     {{#if @root.featureFlags.componentsX}}
-      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
+      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
       {{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
     {{else}}
       <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
@@ -69,7 +69,7 @@
     placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
     {{#if @root.featureFlags.componentsX}}
-      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
+      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
       {{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
     {{else}}
       <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
@@ -96,7 +96,7 @@
     placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
     {{#if @root.featureFlags.componentsX}}
-      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
+      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
       {{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
     {{else}}
       <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
@@ -121,7 +121,7 @@
     placeholder="Placeholder text" data-toggle-password-visibility disabled>
   <button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
     {{#if @root.featureFlags.componentsX}}
-      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
+      {{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
       {{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
     {{else}}
       <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
diff --git a/src/components/text-input/text-input.js b/src/components/text-input/text-input.js
index 66f8be0539f3..249d7925bcd4 100644
--- a/src/components/text-input/text-input.js
+++ b/src/components/text-input/text-input.js
@@ -96,8 +96,8 @@ export default class TextInput extends mixin(createComponent, initComponentBySea
       selectorPasswordField: `.${prefix}--text-input[data-toggle-password-visibility]`,
       selectorPasswordVisibilityButton: `.${prefix}--text-input--password__visibility`,
       passwordIsVisible: `${prefix}--text-input--password-visible`,
-      svgIconVisibilityOn: 'svg.icon--visibility-on',
-      svgIconVisibilityOff: 'svg.icon--visibility-off',
+      svgIconVisibilityOn: `svg.${prefix}--icon--visibility-on`,
+      svgIconVisibilityOff: `svg.${prefix}--icon--visibility-off`,
     };
   }
 
diff --git a/tests/spec/text-input_spec.js b/tests/spec/text-input_spec.js
index 872551ddcf99..b3f3b5ba1b37 100644
--- a/tests/spec/text-input_spec.js
+++ b/tests/spec/text-input_spec.js
@@ -32,8 +32,8 @@ describe('Test text input', () => {
         selectorPasswordField: `.bx--text-input[data-toggle-password-visibility]`,
         selectorPasswordVisibilityButton: `.bx--text-input--password__visibility`,
         passwordIsVisible: `bx--text-input--password-visible`,
-        svgIconVisibilityOn: 'svg.icon--visibility-on',
-        svgIconVisibilityOff: 'svg.icon--visibility-off',
+        svgIconVisibilityOn: 'svg.bx--icon--visibility-on',
+        svgIconVisibilityOff: 'svg.bx--icon--visibility-off',
       });
     });