From 9015f097c5a2efb6f136a4b707e62be29b4e4725 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 17 Dec 2024 15:15:29 +0100
Subject: [PATCH] feat(ui): use `WdsButton` for `BaseCollapseButton` - WF-132

The `BaseCollapseButton` used a custom button with a different `:focus` state. I moved it to the standard `WdsButton` and implemented a `:focus-visible` to it to improve tab navigation.

The change should be almost transparent in term of UI.
---
 .../core/base/BaseCollapseButton.vue          | 33 +++++++------------
 src/ui/src/wds/WdsButton.vue                  |  6 +++-
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/ui/src/components/core/base/BaseCollapseButton.vue b/src/ui/src/components/core/base/BaseCollapseButton.vue
index 0516aeff..a3a8c94b 100644
--- a/src/ui/src/components/core/base/BaseCollapseButton.vue
+++ b/src/ui/src/components/core/base/BaseCollapseButton.vue
@@ -1,12 +1,15 @@
 <template>
-	<button
-		role="button"
+	<WdsButton
 		class="BaseCollapseIcon"
 		:class="{ 'BaseCollapseIcon--collapsed': isCollapsed }"
+		variant="tertiary"
+		size="icon"
 		@click="isCollapsed = !isCollapsed"
 	>
-		<i class="material-symbols-outlined">{{ icon }}</i>
-	</button>
+		<i class="BaseCollapseIcon__icon material-symbols-outlined">{{
+			icon
+		}}</i>
+	</WdsButton>
 </template>
 
 <script lang="ts">
@@ -18,6 +21,7 @@ export type Direction =
 </script>
 
 <script setup lang="ts">
+import WdsButton from "@/wds/WdsButton.vue";
 import { computed, PropType } from "vue";
 
 const props = defineProps({
@@ -44,28 +48,15 @@ const icon = computed(() => {
 
 <style scoped>
 .BaseCollapseIcon {
-	border: none;
-	border-radius: 50%;
-	padding: 4px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: transparent;
-
-	height: 32px;
-	width: 32px;
-	cursor: pointer;
+	border-color: var(--separatorColor);
+}
 
+.BaseCollapseIcon__icon {
 	transition: all 0.3s ease-in-out;
 	transform: rotate(0deg);
-
-	border: 1px solid var(--separatorColor);
-}
-.BaseCollapseIcon:hover {
-	background: var(--separatorColor);
 }
 
-.BaseCollapseIcon--collapsed {
+.BaseCollapseIcon--collapsed .BaseCollapseIcon__icon {
 	transform: rotate(180deg);
 }
 </style>
diff --git a/src/ui/src/wds/WdsButton.vue b/src/ui/src/wds/WdsButton.vue
index c665c24d..91b134cf 100644
--- a/src/ui/src/wds/WdsButton.vue
+++ b/src/ui/src/wds/WdsButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<button class="WdsButton colorTransformer" :class="className">
+	<button class="WdsButton colorTransformer" :class="className" role="button">
 		<slot></slot>
 	</button>
 </template>
@@ -50,6 +50,10 @@ const className = computed(() => [
 	border-width: 1px;
 }
 
+.WdsButton:focus-visible {
+	outline: 2px solid var(--buttonColor);
+}
+
 /* VARIANTS */
 
 /* VARIANTS -- primary */