commit 30f11f818168c89126777b717ab37829e25e8378
author Dixsie Wolmers <dixsie@ibm.com> Tue Nov 10 16:07:56 2020 -0600
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Fri Nov 13 15:37:57 2020 +0000
tree 2bfea87a7f99cc1143df630fda3c908e8c02b6e7
parent 151dd2491c01e70ed69baf638c22624fae598361

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

src/views/Configuration/DateTimeSettings/DateTimeSettings.vue

diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index 79cdbc1..d1d0453 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>