From 68885b46b318034aa8a9405ab6251cd89161c825 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 16 Jan 2025 10:30:42 +0200
Subject: [PATCH] fix(component): re-enable fallback attrs such as 'disabled'
 for split button

---
 front/src/components/ui/Button.vue    | 20 ++++++++++++--------
 front/ui-docs/components/ui/button.md | 20 +++++++++++++++-----
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 58ed125cf..938f9baee 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -61,10 +61,12 @@ onMounted(() => {
 <div v-if="split" class="funkwhale button-group">
   <button
     ref="button"
-    v-bind="color(props, ['interactive'])(
-            width(props, isIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])(
-            align(props, { alignSelf:'start', alignText:'center' })(
-            )))"
+    v-bind="{
+      ...$attrs,
+      ...color(props, ['interactive'])(
+         width(props, isIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])(
+         align(props, { alignSelf:'start', alignText:'center' })(
+    )))}"
     class="funkwhale button split-main"
     :aria-pressed="props.ariaPressed"
     :class="{
@@ -89,10 +91,12 @@ onMounted(() => {
   <Loader v-if="isLoading" :container="false" />
   </button>
   <button
-    v-bind="color(props, ['interactive'])(
-      width(props, ['square'])(
-        align(props, { alignSelf:'start', alignText:'center' })(
-    )))"
+    v-bind="{
+      ...$attrs,
+      ...color(props, ['interactive'])(
+         width(props, ['square'])(
+         align(props, { alignSelf:'start', alignText:'center' })(
+    )))}"
     class="funkwhale button split-toggle"
     :title="splitTitle"
     @click="onSplitClick"
diff --git a/front/ui-docs/components/ui/button.md b/front/ui-docs/components/ui/button.md
index b12624f87..784c0a6c8 100644
--- a/front/ui-docs/components/ui/button.md
+++ b/front/ui-docs/components/ui/button.md
@@ -6,7 +6,7 @@ const click = ():Promise<void> => new Promise(resolve => setTimeout(resolve, 100
 </script>
 
 ```ts
-import Button from "~/components/ui/Button.vue"
+import Button from "~/components/ui/Button.vue";
 ```
 
 # Button
@@ -15,7 +15,8 @@ Buttons are UI elements that users can interact with to perform actions and mani
 
 ```ts
 {
-  thin?: true
+  thinFont?: true
+  lowHeight?: true
 
   isActive?: boolean
   isLoading?: boolean
@@ -26,8 +27,8 @@ Buttons are UI elements that users can interact with to perform actions and mani
 
   onClick?: (...args: any[]) => void | Promise<void>
 
-  autofocus? : boolean
-  ariaPressed? : true
+  autofocus?: boolean
+  ariaPressed?: true
 } & (ColorProps | DefaultProps)
   & VariantProps
   & RaisedProps
@@ -89,7 +90,7 @@ Secondary buttons represent **neutral** actions such as cancelling a change or d
 
 <Layout grid class="preview secondary">
 
-<div style="grid-column: span 3">
+<div style="grid-column: span 4">
 
 ```vue-html
 <Button secondary raised>
@@ -239,6 +240,15 @@ Round buttons have fully rounded edges.
   Round button
 </Button>
 
+## Split button
+
+<Layout class="preview default raised">
+<Button split splitIcon="bi-star" splitTitle="Star!" :onSplitClick="()=>console.log('1 star')">I am split</Button>
+<Button> I am not split </Button>
+<Button disabled> I am not split and I am disabled </Button>
+<Button disabled split splitIcon="bi-star" splitTitle="Star!" :onSplitClick="()=>console.log('1 star')">I am split and disabled</Button>
+</Layout>
+
 ## Button states
 
 ### On/Off