From b308d3d13aeb86b57d0c9844df3a5e9d6df7a3e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Lopes?= <joaopalopes24@gmail.com>
Date: Mon, 31 Aug 2026 15:45:30 -0300
Subject: [PATCH] fix(sidebar): type the trigger icon and skip an empty Vue
 slot

Derive panelLeft as IconSource so Button accepts it. In Vue, only register the default slot when
content is provided so mini density still shows the icon.
---
 .../src/Components/Sidebar/SidebarTrigger.tsx | 13 +++++++---
 .../Sidebar/__tests__/Sidebar.test.tsx        | 24 ++++++++++++++++++
 .../Sidebar/hooks/useSidebarTrigger.ts        | 10 ++++++++
 .../src/Components/Sidebar/SidebarTrigger.vue |  7 ++++--
 .../Sidebar/__tests__/Sidebar.test.ts         | 25 +++++++++++++++++++
 .../Sidebar/composables/useSidebarTrigger.ts  | 10 ++++++++
 6 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Components/Sidebar/SidebarTrigger.tsx b/packages/react/src/Components/Sidebar/SidebarTrigger.tsx
index d10f48ea..ea6ee9d0 100644
--- a/packages/react/src/Components/Sidebar/SidebarTrigger.tsx
+++ b/packages/react/src/Components/Sidebar/SidebarTrigger.tsx
@@ -4,12 +4,20 @@ import { useSidebarTrigger } from "@/Components/Sidebar/hooks/useSidebarTrigger"
 import type { SidebarTriggerProps } from "@/Components/Sidebar/sidebar.types";
 
 function SidebarTrigger(props: SidebarTriggerProps) {
-  const { side, panelId, children, expanded, handleClick, rootInheritedAttrs } =
-    useSidebarTrigger(props);
+  const {
+    icon,
+    side,
+    panelId,
+    children,
+    expanded,
+    handleClick,
+    rootInheritedAttrs,
+  } = useSidebarTrigger(props);
 
   return (
     <Button
       {...rootInheritedAttrs}
+      icon={icon}
       color="dark"
       type="button"
       density="mini"
@@ -17,7 +25,6 @@ function SidebarTrigger(props: SidebarTriggerProps) {
       onClick={handleClick}
       aria-expanded={expanded}
       aria-controls={panelId || undefined}
-      icon={children ? undefined : "panelLeft"}
       aria-label={props["aria-label"] ?? "Toggle sidebar"}
       classes={{
         icon: side === "right" ? "rotate-180 rtl:rotate-0" : "rtl:rotate-180",
diff --git a/packages/react/src/Components/Sidebar/__tests__/Sidebar.test.tsx b/packages/react/src/Components/Sidebar/__tests__/Sidebar.test.tsx
index 8171e2d2..2066be05 100644
--- a/packages/react/src/Components/Sidebar/__tests__/Sidebar.test.tsx
+++ b/packages/react/src/Components/Sidebar/__tests__/Sidebar.test.tsx
@@ -120,6 +120,30 @@ test("it should mark the trigger as expanded by default", () => {
   ).toBe("true");
 });
 
+test("it should render the default toggle icon on the trigger", () => {
+  const { container } = render(<AppShell />);
+
+  expect(
+    container.querySelector("button[aria-label='Toggle sidebar'] svg"),
+  ).not.toBeNull();
+});
+
+test("it should replace the default toggle icon when children are provided", () => {
+  render(
+    <SidebarProvider>
+      <Sidebar>Nav</Sidebar>
+      <SidebarInset>
+        <SidebarTrigger>Menu</SidebarTrigger>
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+
+  const trigger = screen.getByRole("button", { name: "Toggle sidebar" });
+
+  expect(trigger.textContent).toContain("Menu");
+  expect(trigger.querySelector("svg")).toBeNull();
+});
+
 test("it should dock the left aside and slide it off-canvas by offsetting left", () => {
   const { container } = render(<AppShell />);
   const aside = container.querySelector("aside");
diff --git a/packages/react/src/Components/Sidebar/hooks/useSidebarTrigger.ts b/packages/react/src/Components/Sidebar/hooks/useSidebarTrigger.ts
index 59d85515..887c760f 100644
--- a/packages/react/src/Components/Sidebar/hooks/useSidebarTrigger.ts
+++ b/packages/react/src/Components/Sidebar/hooks/useSidebarTrigger.ts
@@ -6,6 +6,7 @@ import type { MouseEvent } from "react";
 import { splitComponentProps } from "@bridge-ui/core/Utils";
 
 // ** Local Imports
+import type { IconSource } from "@/Adapters/Icon";
 import type {
   SidebarTriggerOwnProps,
   SidebarTriggerProps,
@@ -32,6 +33,14 @@ export function useSidebarTrigger(props: SidebarTriggerProps) {
     return props.children;
   });
 
+  const icon = derived((): undefined | IconSource => {
+    if (children) {
+      return undefined;
+    }
+
+    return "panelLeft";
+  });
+
   const rootInheritedAttrs = derived(() => {
     return omit(inheritedAttrs, ["children", "onClick"]);
   });
@@ -53,6 +62,7 @@ export function useSidebarTrigger(props: SidebarTriggerProps) {
   });
 
   return {
+    icon,
     children,
     expanded,
     handleClick,
diff --git a/packages/vue/src/Components/Sidebar/SidebarTrigger.vue b/packages/vue/src/Components/Sidebar/SidebarTrigger.vue
index ccb434d4..d4c05152 100644
--- a/packages/vue/src/Components/Sidebar/SidebarTrigger.vue
+++ b/packages/vue/src/Components/Sidebar/SidebarTrigger.vue
@@ -19,6 +19,7 @@ defineProps<SidebarTriggerOwnProps>();
 const slots = useSlots();
 
 const {
+  icon,
   attrs,
   panelId,
   expanded,
@@ -33,6 +34,7 @@ const {
   <Button
     v-bind="attrs"
     color="dark"
+    :icon="icon"
     type="button"
     density="mini"
     variant="light"
@@ -41,8 +43,9 @@ const {
     :aria-expanded="expanded"
     :classes="{ icon: iconClass }"
     :aria-controls="panelId || undefined"
-    :icon="hasDefaultSlot ? undefined : 'panelLeft'"
   >
-    <slot v-if="hasDefaultSlot" />
+    <template #default v-if="hasDefaultSlot">
+      <slot />
+    </template>
   </Button>
 </template>
diff --git a/packages/vue/src/Components/Sidebar/__tests__/Sidebar.test.ts b/packages/vue/src/Components/Sidebar/__tests__/Sidebar.test.ts
index 634e6110..aa753061 100644
--- a/packages/vue/src/Components/Sidebar/__tests__/Sidebar.test.ts
+++ b/packages/vue/src/Components/Sidebar/__tests__/Sidebar.test.ts
@@ -53,6 +53,31 @@ test("it should render the sidebar aside and main inset", () => {
   expect(wrapper.text()).toContain("Main");
 });
 
+test("it should render the default toggle icon on the trigger", () => {
+  const wrapper = mount(AppShell);
+  const button = wrapper.get("button[aria-label='Toggle sidebar']");
+
+  expect(button.find("svg").exists()).toBe(true);
+});
+
+test("it should replace the default toggle icon when a slot is provided", () => {
+  const wrapper = mount(SidebarProvider, {
+    slots: {
+      default: () => [
+        h(Sidebar, null, { default: () => "Nav" }),
+        h(SidebarInset, null, {
+          default: () => h(SidebarTrigger, null, { default: () => "Menu" }),
+        }),
+      ],
+    },
+  });
+
+  const button = wrapper.get("button[aria-label='Toggle sidebar']");
+
+  expect(button.text()).toContain("Menu");
+  expect(button.find("svg").exists()).toBe(false);
+});
+
 test("it should default to expanded desktop state", () => {
   const wrapper = mount(AppShell);
 
diff --git a/packages/vue/src/Components/Sidebar/composables/useSidebarTrigger.ts b/packages/vue/src/Components/Sidebar/composables/useSidebarTrigger.ts
index a4732a84..a1f353a0 100644
--- a/packages/vue/src/Components/Sidebar/composables/useSidebarTrigger.ts
+++ b/packages/vue/src/Components/Sidebar/composables/useSidebarTrigger.ts
@@ -3,6 +3,7 @@ import { omit } from "es-toolkit/compat";
 import { computed, useAttrs, type useSlots } from "vue";
 
 // ** Local Imports
+import type { IconSource } from "@/Adapters/Icon";
 import { useSidebar } from "@/Components/Sidebar/composables/useSidebar";
 import { hasNamedSlot } from "@/Utils";
 
@@ -14,6 +15,14 @@ export function useSidebarTrigger(slots: ReturnType<typeof useSlots>) {
     return hasNamedSlot(slots, "default");
   });
 
+  const icon = computed((): undefined | IconSource => {
+    if (hasDefaultSlot.value) {
+      return undefined;
+    }
+
+    return "panelLeft";
+  });
+
   const expanded = computed(() => {
     return sidebar.value.isMobile
       ? sidebar.value.openMobile
@@ -51,6 +60,7 @@ export function useSidebarTrigger(slots: ReturnType<typeof useSlots>) {
   };
 
   return {
+    icon,
     expanded,
     iconClass,
     ariaLabel,