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/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>