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/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index e927d24..2a7b816 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;
-}
-.input-action .btn-link,
-.input-action-btn {
- position: absolute;
- right: 1px;
- top: 1px;
+ top: 0;
z-index: $zindex-dropdown + 1;
- padding: 0;
- width: 36px;
- height: 35.8px;
- svg {
- vertical-align: sub;
- }
+}
+
+// Contain input buttons within input
+.btn-datepicker .dropdown-toggle,
+.input-action-btn {
+ 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 641e4ed..0307a6c 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 464282c..0451474 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 fb50f5e..6e893a3 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -124,6 +124,7 @@
}
.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 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"
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 571e747..0c4dcd6 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 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>