[Fix]: Type the SidebarTrigger Icon

packages/react/src/Components/Sidebar/SidebarTrigger.tsx

@@ -4,20 +4,27 @@ 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"
       variant="light"
       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",

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");

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,

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>

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);
 

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,