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

24 files changed, 130 insertions, 143 deletions

diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index e927d244..2a7b8169 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -3,11 +3,11 @@
   padding-right: $spacer;
   padding-bottom: $spacer / 2;
   padding-left: $spacer;
-
-  // Buttons with SVGs and text expect
-  // text to be wrapped in a span element
-  svg + span {
-    margin-left: $spacer / 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  svg {
+    margin-right: $spacer / 4;
   }
   &:disabled {
     color: gray("600");
@@ -60,21 +60,23 @@
   }
 }
 
-// Datepicker and Password toggle buttons
-.input-action {
+// Icon only buttons
+.btn-icon-only svg {
+  margin-right: 0;
+}
+
+// Datepicker, clear search and Password toggle buttons
+.input-action-btn,
+.btn-datepicker {
   position: absolute;
   right: 0;
+  top: 0;
+  z-index: $zindex-dropdown + 1;
 }
-.input-action .btn-link,
+
+// Contain input buttons within input
+.btn-datepicker .dropdown-toggle,
 .input-action-btn {
-  position: absolute;
-  right: 1px;
-  top: 1px;
-  z-index: $zindex-dropdown + 1;
-  padding: 0;
-  width: 36px;
-  height: 35.8px;
-  svg {
-    vertical-align: sub;
-  }
+  padding: 7px;
+  margin: 1px;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss
index 641e4ed1..0307a6ce 100644
--- a/src/assets/styles/bmc/custom/_calendar.scss
+++ b/src/assets/styles/bmc/custom/_calendar.scss
@@ -5,4 +5,13 @@
       color: theme-color("dark");
     }
   }
+}
+
+.b-calendar-grid .btn {
+  display: inline-block;
+}
+
+// Date picker focus
+.b-calendar .b-calendar-grid {
+  padding: 6px 12px;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 464282c6..0451474b 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -127,6 +127,6 @@
 .form-control-with-button {
   &.is-invalid,
   &.is-valid {
-    background-position: right 3rem bottom 50%;
+    background-position: right 2.5rem bottom 50%;
   }
 }
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index fb50f5ec..6e893a33 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -124,6 +124,7 @@ svg {
 }
 
 .btn-link {
+  display: inline-block;
   width: 100%;
   text-align: left;
   text-decoration: none !important;
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index f3cb7f12..5d604503 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -1,6 +1,11 @@
 <template>
-  <b-button v-b-tooltip variant="link" class="btn-tooltip" :title="title">
-    <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
+  <b-button
+    v-b-tooltip
+    variant="link"
+    class="btn-tooltip btn-icon-only"
+    :title="title"
+    :aria-label="$t('global.ariaLabel.tooltip')"
+  >
     <icon-tooltip />
   </b-button>
 </template>
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'));
     },
   },
 };
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index c259df91..d472c0c9 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -23,10 +23,12 @@
         <b-button
           v-if="filter"
           variant="link"
+          class="btn-icon-only input-action-btn"
           :aria-label="$t('global.ariaLabel.clearSearch')"
+          :title="$t('global.ariaLabel.clearSearch')"
           @click="onClearSearch"
         >
-          <icon-close :title="$t('global.ariaLabel.clearSearch')" />
+          <icon-close />
         </b-button>
       </b-input-group>
     </b-form-group>
@@ -77,16 +79,4 @@ export default {
   z-index: 4;
   stroke: gray('400');
 }
-
-.btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 0.4rem 1rem;
-  z-index: 4;
-  svg {
-    margin-left: 0;
-    vertical-align: sub;
-  }
-}
 </style>
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index 73b2b832..00c04ab0 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -23,32 +23,26 @@
               {{ $t('global.form.dateMustBeBefore', { date: toDate }) }}
             </template>
           </b-form-invalid-feedback>
-          <template #append>
-            <b-form-datepicker
-              v-model="fromDate"
-              class="input-action"
-              button-only
-              right
-              :max="toDate"
-              :hide-header="true"
-              :locale="locale"
-              :label-help="
-                $t('global.calendar.useCursorKeysToNavigateCalendarDates')
-              "
-              button-variant="link"
-              aria-controls="input-from-date"
-            >
-              <template #button-content>
-                <icon-calendar
-                  :title="$t('global.calendar.openDatePicker')"
-                  aria-hidden="true"
-                />
-                <span class="sr-only">{{
-                  $t('global.calendar.openDatePicker')
-                }}</span>
-              </template>
-            </b-form-datepicker>
-          </template>
+          <b-form-datepicker
+            v-model="fromDate"
+            class="btn-datepicker btn-icon-only"
+            button-only
+            right
+            :max="toDate"
+            :hide-header="true"
+            :locale="locale"
+            :label-help="
+              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+            "
+            :aria-label="$t('global.calendar.selectDate')"
+            :title="$t('global.calendar.selectDate')"
+            button-variant="link"
+            aria-controls="input-from-date"
+          >
+            <template #button-content>
+              <icon-calendar />
+            </template>
+          </b-form-datepicker>
         </b-input-group>
       </b-form-group>
       <b-form-group
@@ -73,32 +67,26 @@
               {{ $t('global.form.dateMustBeAfter', { date: fromDate }) }}
             </template>
           </b-form-invalid-feedback>
-          <template #append>
-            <b-form-datepicker
-              v-model="toDate"
-              class="input-action"
-              button-only
-              right
-              :min="fromDate"
-              :hide-header="true"
-              :locale="locale"
-              :label-help="
-                $t('global.calendar.useCursorKeysToNavigateCalendarDates')
-              "
-              button-variant="link"
-              aria-controls="input-to-date"
-            >
-              <template #button-content>
-                <icon-calendar
-                  :title="$t('global.calendar.openDatePicker')"
-                  aria-hidden="true"
-                />
-                <span class="sr-only">{{
-                  $t('global.calendar.openDatePicker')
-                }}</span>
-              </template>
-            </b-form-datepicker>
-          </template>
+          <b-form-datepicker
+            v-model="toDate"
+            class="btn-datepicker btn-icon-only"
+            button-only
+            right
+            :min="fromDate"
+            :hide-header="true"
+            :locale="locale"
+            :label-help="
+              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+            "
+            :aria-label="$t('global.calendar.openDatePicker')"
+            :title="$t('global.calendar.openDatePicker')"
+            button-variant="link"
+            aria-controls="input-to-date"
+          >
+            <template #button-content>
+              <icon-calendar />
+            </template>
+          </b-form-datepicker>
         </b-input-group>
       </b-form-group>
     </b-col>
diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index a12ae801..94ef6ce4 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -2,7 +2,7 @@
   <span>
     <b-link
       v-if="value === 'export'"
-      class="align-bottom btn-link py-0"
+      class="align-bottom btn-icon-only py-0 btn-link"
       :download="download"
       :href="href"
       :title="title"
@@ -15,7 +15,7 @@
     <b-button
       v-else
       variant="link"
-      class="py-0"
+      class="btn-icon-only"
       :aria-label="title"
       :title="title"
       :disabled="!enabled"
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 571e7470..0c4dcd6d 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -26,7 +26,7 @@
       "progressBar": "Page loading progress bar"
     },
     "calendar": {
-      "openDatePicker": "Open date picker",
+      "selectDate": "Select date",
       "useCursorKeysToNavigateCalendarDates": "Use cursor keys to navigate calendar dates"
     },
     "fileUpload": {
diff --git a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
index da6b457c..a5dc4e74 100644
--- a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
+++ b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
@@ -237,7 +237,7 @@
                       placeholder=""
                     >
                       <template #add-button-text>
-                        {{ $t('global.action.add') }} <icon-add />
+                        <icon-add /> {{ $t('global.action.add') }}
                       </template>
                     </b-form-tags>
                   </b-form-group>
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index 79cdbc1e..d1d04539 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -73,25 +73,22 @@
                   </b-form-invalid-feedback>
                   <b-form-datepicker
                     v-model="form.manual.date"
-                    class="input-action"
+                    class="btn-datepicker btn-icon-only"
                     button-only
+                    right
                     :hide-header="true"
                     :locale="locale"
                     :label-help="
                       $t('global.calendar.useCursorKeysToNavigateCalendarDates')
                     "
+                    :aria-label="$t('global.calendar.selectDate')"
+                    :title="$t('global.calendar.selectDate')"
                     :disabled="form.configurationSelected === 'ntp'"
                     button-variant="link"
                     aria-controls="input-manual-date"
                   >
                     <template #button-content>
-                      <icon-calendar
-                        :title="$t('global.calendar.openDatePicker')"
-                        aria-hidden="true"
-                      />
-                      <span class="sr-only">
-                        {{ $t('global.calendar.openDatePicker') }}
-                      </span>
+                      <icon-calendar />
                     </template>
                   </b-form-datepicker>
                 </b-input-group>
diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index 7e9599fe..24ef33c8 100644
--- a/src/views/Configuration/Firmware/Firmware.vue
+++ b/src/views/Configuration/Firmware/Firmware.vue
@@ -367,7 +367,7 @@ export default {
   }
 }
 .card-footer {
-  height: 41px;
+  height: 40px;
 }
 .card-body {
   padding: 0.75rem 1.25rem;
diff --git a/src/views/Control/Kvm/Kvm.vue b/src/views/Control/Kvm/Kvm.vue
index 10322bde..1a41baaf 100644
--- a/src/views/Control/Kvm/Kvm.vue
+++ b/src/views/Control/Kvm/Kvm.vue
@@ -18,13 +18,6 @@ export default {
 </script>
 
 <style scoped>
-.button-launch > svg {
-  height: 25px;
-}
-.button-launch {
-  padding-left: 0px;
-}
-
 .terminal-container {
   width: 100%;
 }
diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue
index 43dc7271..0c545d0f 100644
--- a/src/views/Control/Kvm/KvmConsole.vue
+++ b/src/views/Control/Kvm/KvmConsole.vue
@@ -14,28 +14,24 @@
           </dl>
         </b-col>
 
-        <b-col class="d-flex justify-content-end">
+        <b-col class="d-flex justify-content-end pr-1">
           <b-button
             v-if="isConnected"
             variant="link"
             type="button"
-            class="pr-0 button-launch"
             @click="sendCtrlAltDel"
           >
-            <icon-arrow-down aria-hidden="true" />
+            <icon-arrow-down />
             {{ $t('pageKvm.buttonCtrlAltDelete') }}
           </b-button>
           <b-button
             v-if="!isFullWindow"
             variant="link"
             type="button"
-            class="pr-0 button-launch"
             @click="openConsoleWindow()"
           >
-            <icon-launch aria-hidden="true" />
-            <span class="d-none d-md-inline">
-              {{ $t('pageKvm.openNewTab') }}
-            </span>
+            <icon-launch />
+            {{ $t('pageKvm.openNewTab') }}
           </b-button>
         </b-col>
       </b-row>
diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
index 2b49562c..a0e47870 100644
--- a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
@@ -13,14 +13,8 @@
       </b-col>
 
       <b-col v-if="!isFullWindow" class="d-flex justify-content-end">
-        <b-button
-          variant="link"
-          type="button"
-          class="pr-0 button-launch"
-          @click="openConsoleWindow()"
-        >
-          <icon-launch aria-hidden="true" />
-
+        <b-button variant="link" type="button" @click="openConsoleWindow()">
+          <icon-launch />
           {{ $t('pageSerialOverLan.openNewTab') }}
         </b-button>
       </b-col>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 25436c8a..a6342089 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -14,9 +14,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index e629006f..4fdda506 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -14,9 +14,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandChassis"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 9e0c9f8b..a5953054 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -36,9 +36,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandDimms"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 4981d457..58b092da 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -36,9 +36,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandFans"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 4137f1bf..94f5774b 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -36,9 +36,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandPowerSupplies"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index da15b7a9..fcb8ef36 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -35,9 +35,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandProcessors"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
       <!-- Health -->
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index e2ba49ec..9cb1c6ae 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -14,9 +14,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandSystem"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 9c549da4..1330ca5e 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -37,7 +37,7 @@
         data-test-id="overviewQuickLinks-button-networkSettings"
         class="d-flex justify-content-between align-items-center"
       >
-        <span>{{ $t('pageOverview.quicklinks.editNetworkSettings') }}</span>
+        {{ $t('pageOverview.quicklinks.editNetworkSettings') }}
         <icon-arrow-right />
       </b-button>
     </div>
@@ -48,7 +48,7 @@
         data-test-id="overviewQuickLinks-button-solConsole"
         class="d-flex justify-content-between align-items-center"
       >
-        <span>{{ $t('pageOverview.quicklinks.solConsole') }}</span>
+        {{ $t('pageOverview.quicklinks.solConsole') }}
         <icon-arrow-right />
       </b-button>
     </div>