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
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index f3cb7f1..5d60450 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 bf3e4ca..2119f8c 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 @@
data() {
return {
isVisible: false,
+ togglePasswordLabel: this.$t('global.ariaLabel.showPassword'),
};
},
methods: {
@@ -44,6 +38,10 @@
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 c259df9..d472c0c 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 @@
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 73b2b83..00c04ab 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 a12ae80..94ef6ce 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"