From 7d7b58b5eb1a3cfd4ef153a82b378f43704bdcd1 Mon Sep 17 00:00:00 2001
From: Flupsi <upsiflu@gmail.com>
Date: Fri, 15 Aug 2025 18:47:02 +0200
Subject: [PATCH] fix(ui): enable custom props in section links

---
 front/src/components/ui/Header.vue            |  2 +-
 front/src/components/ui/Link.vue              |  1 +
 front/src/components/ui/Section.vue           | 31 +++++++++++-------
 front/ui-docs/components/ui/layout/section.md | 30 ++++++++---------
 front/ui-docs/components/ui/link.md           | 32 +++++++++++++++++++
 5 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/front/src/components/ui/Header.vue b/front/src/components/ui/Header.vue
index 912475b92..79e5c48d5 100644
--- a/front/src/components/ui/Header.vue
+++ b/front/src/components/ui/Header.vue
@@ -90,7 +90,7 @@ const props = defineProps<{
         </component>
         <div
           v-if="$slots.action"
-          style="align-self: center;"
+          style="align-self: baseline;"
         >
           <slot name="action" />
         </div>
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 73040d4ae..4bdf17c67 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -65,6 +65,7 @@ onMounted(() => {
     ref="link"
     :autofocus="autofocus || undefined"
     :class="[
+      $attrs.class,
       $style.link,
       round && $style['is-round'],
       isIconOnly && $style['is-icon-only'],
diff --git a/front/src/components/ui/Section.vue b/front/src/components/ui/Section.vue
index 7eeed48b5..08474b6f0 100644
--- a/front/src/components/ui/Section.vue
+++ b/front/src/components/ui/Section.vue
@@ -118,18 +118,27 @@ const headingProps = computed(() =>
         </template>
 
         <!-- Action! You can either specify `to` or `onClick`. -->
+        <!-- Note: We cannot simplify with  `<component is="action && 'to' in action ? Link : Button"` due to a Vue bug -->
 
-        <component
-          :is="'to' in action ? Link : Button"
-          v-if="action"
-          thin-font
-          min-content
-          align-self="baseline"
-          :class="$style.action"
-          v-bind="action"
-        >
-          {{ action?.text }}
-        </component>
+        <template v-if="action">
+          <Link
+            v-if="'to' in action"
+            :class="$style.action"
+            v-bind="action"
+          >
+            {{ action.text }}
+          </Link>
+          <Button
+            v-else
+            thin-font
+            min-content
+            align-self="baseline"
+            :class="$style.action"
+            v-bind="action"
+          >
+            {{ action.text }}
+          </Button>
+        </template>
       </Layout>
     </Layout>
 
diff --git a/front/ui-docs/components/ui/layout/section.md b/front/ui-docs/components/ui/layout/section.md
index f57a6aff0..079905ec5 100644
--- a/front/ui-docs/components/ui/layout/section.md
+++ b/front/ui-docs/components/ui/layout/section.md
@@ -10,6 +10,7 @@ import Spacer from '~/components/ui/Spacer.vue'
 import Pill from '~/components/ui/Pill.vue'
 import Activity from '~/components/ui/Activity.vue'
 import Section from '~/components/ui/Section.vue'
+import Link from '~/components/ui/Link.vue'
 
 const alignLeft = ref(true)
 
@@ -220,26 +221,24 @@ The link or button will be shown on the right side of the header. Use `action.te
 You can use all [`Link` props](../link.md) or [`Button` props](../button.md) inside the `action` prop! Note that the button or link label will be in line with the heading.
 
 ```vue-html
-<Spacer />
-<Layout stack gap-64>
-  <Section
+<Section
     h2="With a link"
     :action="{
       text: 'My library',
       to: '/',
       icon: 'bi-star'
     }"
-  />
-  <Section
-    h2="With a button"
-    :action="{
-        text: 'Say hello!',
-        onClick: ()=>console.log('Hello'),
-        primary: true,
-        solid: true
-    }"
-  />
-</Layout>
+/>
+<Section
+  h2="With a button"
+  :action="{
+      text: 'Say hello!',
+      onClick: ()=>console.log('Hello'),
+      primary: true,
+      solid: true,
+      icon: 'bi-save'
+  }"
+/>
 ```
 
 <Spacer />
@@ -258,7 +257,8 @@ You can use all [`Link` props](../link.md) or [`Button` props](../button.md) ins
         text: 'Say hello!',
         onClick: ()=>console.log('Hello'),
         primary: true,
-        solid: true
+        solid: true,
+        icon: 'bi-save'
     }"
   />
 </Layout>
diff --git a/front/ui-docs/components/ui/link.md b/front/ui-docs/components/ui/link.md
index f406aaed0..d4270b6a8 100644
--- a/front/ui-docs/components/ui/link.md
+++ b/front/ui-docs/components/ui/link.md
@@ -146,6 +146,38 @@ _Only use on top of solid surfaces, else the text may be unreadable!_
   Home
 </Link>
 
+## Add an icon
+
+You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your link component.
+
+::: info
+
+- Icon links shrink down to the icon size if you don't pass any content. If you want to keep the link at full width with just an icon, add `button-width` as a prop.
+
+:::
+
+```vue-html
+<Link :to  icon="bi-three-dots-vertical" />
+<Link :to primary solid round icon="bi-save"/>
+<Link :to solid destructive icon="bi-trash">
+  Delete
+</Link :to>
+<Link :to low-height icon="bi-chevron-right">
+  Next
+</Link>
+```
+
+<Layout flex>
+<Link :to  icon="bi-three-dots-vertical" />
+<Link :to primary solid round icon="bi-save"/>
+<Link :to solid destructive icon="bi-trash">
+  Delete
+</Link :to>
+<Link :to low-height icon="bi-chevron-right">
+  Next
+</Link>
+</Layout>
+
 ## Set width and alignment
 
 See [Using width](/using-width) and [Using alignment](/using-alignment).