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/views/AccessControl/SslCertificates/ModalGenerateCsr.vue b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
index da6b457..a5dc4e7 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 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>
diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index 7e9599f..24ef33c 100644
--- a/src/views/Configuration/Firmware/Firmware.vue
+++ b/src/views/Configuration/Firmware/Firmware.vue
@@ -367,7 +367,7 @@
}
}
.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 10322bd..1a41baa 100644
--- a/src/views/Control/Kvm/Kvm.vue
+++ b/src/views/Control/Kvm/Kvm.vue
@@ -18,13 +18,6 @@
</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 43dc727..0c545d0 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 2b49562..a0e4787 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 25436c8..a634208 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 e629006..4fdda50 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 9e0c9f8..a595305 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 4981d45..58b092d 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 4137f1b..94f5774 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 da15b7a..fcb8ef3 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 e2ba49e..9cb1c6a 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 9c549da..1330ca5 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>