feat: make icon optional in WorkSideMenuGroup and WorkSideMenuItem

apps/prs/angular/src/app/app.component.html

@@ -374,6 +374,10 @@
           label="3478 Popover API Rewrite"
           url="/features/3478"
         ></goabx-work-side-menu-item>
+        <goabx-work-side-menu-item
+          label="3544 Optional Side Menu Icons"
+          url="/features/3544"
+        ></goabx-work-side-menu-item>
       </goabx-work-side-menu-group>
     </ng-template>
     <section style="padding: 30px; width: 100%" role="main">

apps/prs/angular/src/app/app.routes.ts

@@ -86,6 +86,7 @@ import { Feat3478Component } from "../routes/features/feat3478/feat3478.componen
 import { Feat2885Component } from "../routes/features/feat2885/feat2885.component";
 import { Feat2885NavigationTabsComponent } from "../routes/features/feat2885-navigation-tabs/feat2885-navigation-tabs.component";
 import { Feat3529Component } from "../routes/features/feat3529/feat3529.component";
+import { Feat3544Component } from "../routes/features/feat3544/feat3544.component";
 
 export const appRoutes: Route[] = [
   { path: "everything", component: EverythingComponent },
@@ -176,4 +177,5 @@ export const appRoutes: Route[] = [
   { path: "features/3398", component: Feat3398Component },
   { path: "features/3478", component: Feat3478Component },
   { path: "features/3529", component: Feat3529Component },
+  { path: "features/3544", component: Feat3544Component },
 ];

apps/prs/angular/src/routes/features/feat3544/feat3544.component.html

@@ -0,0 +1,61 @@
+<div style="display: flex; flex-direction: column; gap: var(--goa-spacing-l)">
+  <goab-text tag="h1">Feature 3544: Optional Side Menu Icons</goab-text>
+  <goab-text>
+    Both menus below use the same structure in primary content: one item and one group.
+    The left menu includes icons, and the right menu does not.
+  </goab-text>
+
+  <div
+    style="
+      display: grid;
+      gap: var(--goa-spacing-l);
+      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    "
+  >
+    <goab-container>
+      <goab-text tag="h2">With icons</goab-text>
+      <div style="height: 380px; overflow: hidden">
+        <goabx-work-side-menu
+          heading="Test Menu"
+          url="/"
+          [open]="true"
+          [primaryContent]="withIconsTemplate"
+        ></goabx-work-side-menu>
+      </div>
+    </goab-container>
+
+    <goab-container>
+      <goab-text tag="h2">Without icons</goab-text>
+      <div style="height: 380px; overflow: hidden">
+        <goabx-work-side-menu
+          heading="Test Menu"
+          url="/"
+          [open]="true"
+          [primaryContent]="withoutIconsTemplate"
+        ></goabx-work-side-menu>
+      </div>
+    </goab-container>
+  </div>
+</div>
+
+<ng-template #withIconsTemplate>
+  <goabx-work-side-menu-item
+    label="Standalone item"
+    url="/features/3544"
+    icon="home"
+  ></goabx-work-side-menu-item>
+  <goabx-work-side-menu-group heading="Grouped items" icon="folder">
+    <goabx-work-side-menu-item
+      label="Group child"
+      url="/features/3544"
+      icon="document"
+    ></goabx-work-side-menu-item>
+  </goabx-work-side-menu-group>
+</ng-template>
+
+<ng-template #withoutIconsTemplate>
+  <goabx-work-side-menu-item label="Standalone item" url="/features/3544"></goabx-work-side-menu-item>
+  <goabx-work-side-menu-group heading="Grouped items">
+    <goabx-work-side-menu-item label="Group child" url="/features/3544"></goabx-work-side-menu-item>
+  </goabx-work-side-menu-group>
+</ng-template>

apps/prs/angular/src/routes/features/feat3544/feat3544.component.ts

@@ -0,0 +1,22 @@
+import { Component } from "@angular/core";
+import {
+  GoabContainer,
+  GoabText,
+  GoabxWorkSideMenu,
+  GoabxWorkSideMenuGroup,
+  GoabxWorkSideMenuItem,
+} from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-feat3544",
+  templateUrl: "./feat3544.component.html",
+  imports: [
+    GoabContainer,
+    GoabText,
+    GoabxWorkSideMenu,
+    GoabxWorkSideMenuGroup,
+    GoabxWorkSideMenuItem,
+  ],
+})
+export class Feat3544Component {}

apps/prs/react/src/app/app.tsx

@@ -218,6 +218,10 @@ export function App() {
                   url="/bugs/3497"
                 />
                 <GoabxWorkSideMenuItem label="3498 Radio alignment" url="/bugs/3498" />
+                <GoabxWorkSideMenuItem
+                  label="3450 Dropdown expanding inside Container"
+                  url="/bugs/3450"
+                />
               </GoabxWorkSideMenuGroup>
 
               <GoabxWorkSideMenuGroup icon="star" heading="Features">
@@ -341,6 +345,10 @@ export function App() {
                   label="3478 Popover API Rewrite"
                   url="/features/3478"
                 />
+                <GoabxWorkSideMenuItem
+                  label="3544 Optional Side Menu Icons"
+                  url="/features/3544"
+                />
               </GoabxWorkSideMenuGroup>
               <GoabxWorkSideMenuItem icon="list" label="Everything" url="/everything" />
             </>

apps/prs/react/src/main.tsx

@@ -90,6 +90,7 @@ import { Feat3478Route } from "./routes/features/feat3478";
 import { Feat2885Route } from "./routes/features/feat2885";
 import { Feat2885NavigationTabsRoute } from "./routes/features/feat2885-navigation-tabs";
 import { Feat3529Route } from "./routes/features/feat3529";
+import { Feat3544Route } from "./routes/features/feat3544";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
@@ -195,6 +196,7 @@ root.render(
             element={<Feat2885NavigationTabsRoute />}
           />
           <Route path="features/3529" element={<Feat3529Route />} />
+          <Route path="features/3544" element={<Feat3544Route />} />
         </Route>
 
         {/* Standalone route without App wrapper for full-page layout demos */}

apps/prs/react/src/routes/features/feat3544.tsx

@@ -0,0 +1,100 @@
+import { GoabContainer, GoabText } from "@abgov/react-components";
+import {
+  GoabxWorkSideMenu,
+  GoabxWorkSideMenuGroup,
+  GoabxWorkSideMenuItem,
+} from "@abgov/react-components/experimental";
+
+export function Feat3544Route() {
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", gap: "var(--goa-spacing-l)" }}
+    >
+      <GoabText tag="h1">Feature 3544: Optional Side Menu Icons</GoabText>
+      <GoabText>
+        Both menus below use the same structure in primary content: one item and one
+        group. The left menu includes icons, and the right menu does not.
+      </GoabText>
+
+      <div
+        style={{
+          display: "grid",
+          gap: "var(--goa-spacing-l)",
+          gridTemplateColumns: "repeat(auto-fit, minmax(340px, 1fr))",
+        }}
+      >
+        <GoabContainer>
+          <GoabText tag="h2">With icons</GoabText>
+          <div style={{ height: "380px", overflow: "hidden" }}>
+            <GoabxWorkSideMenu
+              heading="Test Menu"
+              url="/"
+              open={true}
+              primaryContent={
+                <>
+                  <GoabxWorkSideMenuItem
+                    label="Standalone item"
+                    url="/features/3544"
+                    icon="home"
+                  />
+                  <GoabxWorkSideMenuGroup heading="Grouped items" icon="folder">
+                    <GoabxWorkSideMenuItem
+                      label="Group child"
+                      url="/features/3544"
+                      icon="document"
+                    />
+                  </GoabxWorkSideMenuGroup>
+                </>
+              }
+            />
+          </div>
+        </GoabContainer>
+
+        <GoabContainer>
+          <GoabText tag="h2">Without icons</GoabText>
+          <div style={{ height: "380px", overflow: "hidden" }}>
+            <GoabxWorkSideMenu
+              heading="Test Menu"
+              url="/"
+              open={true}
+              primaryContent={
+                <>
+                  <GoabxWorkSideMenuItem label="Standalone item" url="/features/3544" />
+                  <GoabxWorkSideMenuGroup heading="Grouped items">
+                    <GoabxWorkSideMenuItem label="Group child" url="/features/3544" />
+                  </GoabxWorkSideMenuGroup>
+                </>
+              }
+            />
+          </div>
+        </GoabContainer>
+
+        <GoabContainer>
+          <GoabText tag="h2">Mixed: back icon + no icons</GoabText>
+          <div style={{ height: "380px", overflow: "hidden" }}>
+            <GoabxWorkSideMenu
+              heading="Test Menu"
+              url="/"
+              open={true}
+              primaryContent={
+                <>
+                  <GoabxWorkSideMenuItem label="All" url="/features/3544" icon="arrow-back" />
+                  <GoabxWorkSideMenuItem label="All Components" url="/features/3544" />
+                  <GoabxWorkSideMenuGroup heading="Content layout">
+                    <GoabxWorkSideMenuItem label="Container" url="/features/3544" />
+                    <GoabxWorkSideMenuItem label="Divider" url="/features/3544" />
+                    <GoabxWorkSideMenuItem label="Grid" url="/features/3544" />
+                  </GoabxWorkSideMenuGroup>
+                  <GoabxWorkSideMenuGroup heading="Inputs and actions">
+                    <GoabxWorkSideMenuItem label="Button" url="/features/3544" />
+                    <GoabxWorkSideMenuItem label="Input" url="/features/3544" />
+                  </GoabxWorkSideMenuGroup>
+                </>
+              }
+            />
+          </div>
+        </GoabContainer>
+      </div>
+    </div>
+  );
+}

libs/angular-components/src/experimental/work-side-menu-group/work-side-menu-group.ts

@@ -28,7 +28,7 @@ import {
 })
 export class GoabxWorkSideMenuGroup implements OnInit {
   @Input({ required: true }) heading!: string;
-  @Input({ required: true }) icon!: GoabIconType;
+  @Input() icon?: GoabIconType;
   @Input({ transform: booleanAttribute }) open?: boolean;
   @Input() testId?: string;
 

libs/react-components/src/experimental/work-side-menu-group/work-side-menu-group.tsx

@@ -3,7 +3,7 @@ import { GoabIconType } from "@abgov/ui-components-common";
 
 interface WCProps {
   heading: string;
-  icon: GoabIconType;
+  icon?: GoabIconType;
   testid?: string;
   open?: boolean;
 }
@@ -19,7 +19,7 @@ declare module "react" {
 
 export interface GoabWorkSideMenuGroupProps {
   heading: string;
-  icon: GoabIconType;
+  icon?: GoabIconType;
   open?: boolean;
   testId?: string;
   children?: React.ReactNode;

libs/web-components/src/components/work-side-menu/WorkSideMenuGroup.spec.ts

@@ -4,6 +4,27 @@ import GoAWorkSideMenuGroup from "./WorkSideMenuGroup.svelte";
 
 describe("WorkSideMenuGroup", () => {
 
+  it("renders without icon when icon prop is omitted", async () => {
+    const { container } = render(GoAWorkSideMenuGroup, {
+      heading: "Group",
+      testid: "no-icon",
+    });
+    // Only the chevron-forward marker icon should be present, no leading icon
+    const leadingIcon = container.querySelector("summary goa-icon:not(.marker-icon)");
+    expect(leadingIcon).toBeNull();
+  });
+
+  it("renders with icon when icon prop is provided", async () => {
+    const { container } = render(GoAWorkSideMenuGroup, {
+      heading: "Group",
+      icon: "star",
+      testid: "with-icon",
+    });
+    const leadingIcon = container.querySelector("summary goa-icon[type='star']");
+    expect(leadingIcon).toBeTruthy();
+  });
+
+
   it("renders with default closed state", async () => {
     const { container } = render(GoAWorkSideMenuGroup, {
       heading: "Group",

libs/web-components/src/components/work-side-menu/WorkSideMenuGroup.svelte

@@ -14,8 +14,8 @@
 
   /** The text displayed in the group heading. */
   export let heading: string;
-  /** Icon displayed before the group label. */
-  export let icon: GoAIconType;
+  /** Icon displayed before the group label. When omitted, no icon is rendered and no space is reserved. */
+  export let icon: GoAIconType | undefined = undefined;
   /** Sets a data-testid attribute for automated testing. */
   export let testid: string = "";
   /** Whether the group is open. */
@@ -44,7 +44,9 @@
     on:mouseenter={handleMouseEnter}
   >
     <summary aria-expanded={open}>
-      <goa-icon type={icon} size="small" theme={open ? "filled" : "outline"} />
+      {#if icon}
+        <goa-icon type={icon} size="small" theme={open ? "filled" : "outline"} />
+      {/if}
       <span class="label">{heading}</span>
       <goa-icon class="marker-icon" type="chevron-forward" size="small" />
     </summary>

libs/web-components/src/components/work-side-menu/WorkSideMenuItem.spec.ts

@@ -3,6 +3,15 @@ import { render, fireEvent } from "@testing-library/svelte";
 import GoAWorkSideMenuItem from "./WorkSideMenuItem.svelte";
 
 describe("WorkSideMenuItem", () => {
+  it("renders without icon when icon prop is omitted", async () => {
+    const { container } = render(GoAWorkSideMenuItem, {
+      label: "Foo",
+      url: "#",
+    });
+    const icon = container.querySelector("goa-icon");
+    expect(icon).toBeNull();
+  });
+
   it("renders", async () => {
     const { container } = render(GoAWorkSideMenuItem, {
       label: "Foo",