Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with  form input buttons

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie28d7d7dd7303ab6bf1897d1fa569e1580cc2f9d

1 files changed, 10 insertions, 12 deletions

diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index bf3e4ca5..2119f8c6 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -2,22 +2,15 @@
   <div class="input-password-toggle-container">
     <slot></slot>
     <b-button
-      :aria-label="$t('global.ariaLabel.showPassword')"
+      :aria-label="togglePasswordLabel"
+      :title="togglePasswordLabel"
       variant="link"
-      class="input-action-btn"
+      class="input-action-btn btn-icon-only"
       :class="{ isVisible: isVisible }"
       @click="toggleVisibility"
     >
-      <icon-view-off
-        v-if="isVisible"
-        aria-hidden="true"
-        :title="$t('global.ariaLabel.hidePassword')"
-      />
-      <icon-view
-        v-else
-        aria-hidden="true"
-        :title="$t('global.ariaLabel.showPassword')"
-      />
+      <icon-view-off v-if="isVisible" />
+      <icon-view v-else />
     </b-button>
   </div>
 </template>
@@ -32,6 +25,7 @@ export default {
   data() {
     return {
       isVisible: false,
+      togglePasswordLabel: this.$t('global.ariaLabel.showPassword'),
     };
   },
   methods: {
@@ -44,6 +38,10 @@ export default {
       if (inputEl.nodeName === 'INPUT') {
         inputEl.type = this.isVisible ? 'text' : 'password';
       }
+
+      this.isVisible
+        ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword'))
+        : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword'));
     },
   },
 };