feat: make icon optional in WorkSideMenuGroup and WorkSideMenuItem by Copilot · Pull Request #3595 · GovAlta/ui-components

Copilot · 2026-03-16T23:08:17Z

WorkSideMenuGroup always rendered a leading icon, reserving space for it even when none was needed — requiring shadow DOM workarounds to hide it. WorkSideMenuItem had the same issue: the goa-icon element was always mounted even with an empty icon prop.

Before (the change)

WorkSideMenuGroup.icon was required; always rendered a goa-icon in the summary header
WorkSideMenuItem always mounted a goa-icon element even when icon="", consuming layout space

After (the change)

WorkSideMenuGroup — icon is now optional across all three frameworks. The leading goa-icon is only rendered when icon is provided; no space is reserved when omitted.
WorkSideMenuItem — goa-icon is conditionally rendered via {#if icon}, consistent with the existing optional prop contract.

<!-- WorkSideMenuGroup with no icon: clean text-only header -->
<goa-work-side-menu-group heading="Content layout" />

<!-- WorkSideMenuGroup with icon: unchanged behavior -->
<goa-work-side-menu-group heading="Dashboard" icon="home" />

React / Angular: icon prop changed from required to optional in both wrappers (GoabWorkSideMenuGroupProps, @Input() icon?: GoabIconType).

Make sure that you've checked the boxes below before you submit the PR

I have read and followed the setup steps
I have created necessary unit tests
I have tested the functionality in both React and Angular.

Steps needed to test

Render WorkSideMenuGroup without the icon prop — confirm no icon element is mounted and heading text is flush left with no reserved icon gap.
Render WorkSideMenuGroup with icon="star" — confirm existing icon behavior is unchanged.
Render WorkSideMenuItem without icon — confirm no icon element is mounted.
Render WorkSideMenuItem with icon="star" — confirm icon renders as before.

Original prompt

This section details on the original issue you should resolve

<issue_title>Add optional icon to WorkSideMenuGroup</issue_title>
<issue_description>## Description

WorkSideMenuGroup always renders a leading icon in the group header. There's no way to hide it or make it optional. When used without an icon, the component still reserves space for one, requiring shadow DOM workarounds to hide it and fix alignment.

Use case

The docs website uses WorkSideMenuGroup for nav categories (Components: Content layout, Feedback and alerts, etc.) and Get Started groups (Designers, Developers). These groups don't need icons, just text headers.

Expected behavior

WorkSideMenuGroup should support rendering without an icon. Either:

Make the icon prop optional (no icon rendered when omitted)

No space reserved for icon if not provided

Current workaround

docs/src/components/nav/useGroupShadowDomFixes.ts injects styles into shadow DOM to hide the icon and adjust padding/margins.</issue_description>

<agent_instructions>The icon should be optional both for WorkSideMenuGroup.svelte and WorkSideMenuItem.svelte. The optional property should be for the respective React and Angular wrappers as well.

Here's a list of files to review:
libs/web-components/src/components/work-side-menu/WorkSideMenuGroup.svelte
libs/angular-components/src/experimental/work-side-menu-group/work-side-menu-group.ts
libs/react-components/src/experimental/work-side-menu-group/work-side-menu-group.tsx
libs/web-components/src/components/work-side-menu/WorkSideMenuItem.svelte
libs/angular-components/src/experimental/work-side-menu-item/work-side-menu-item.ts
libs/react-components/src/experimental/work-side-menu-item/work-side-menu-item.tsx</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes Add optional icon to WorkSideMenuGroup #3544

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

bdfranck · 2026-03-18T16:39:46Z

Here was my process:

Asked GitHub Copilot to create the initial PR
Tweaked the results
Asked Copilot to create the PR test pages
Squashed the commits

bdfranck · 2026-03-23T16:13:56Z

I've rebased this commit against the latest dev and resolved the merge conflicts.

twjeffery

@bdfranck Approved, looks good to me. I added a test page as well, feel free to squash that in.

bdfranck · 2026-03-23T19:10:53Z

I've resolved the latest merge conflicts.

chrisolsen · 2026-03-23T21:50:18Z

🎉 This PR is included in version 1.11.0-dev.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

…sponsive grids Side menu: - Remove stale useGroupShadowDomFixes workaround (chevrons hidden after #3595) - Fix Foundations sub-menu navigation (missing onNavigate handler) Push drawer filters (Examples, Components, Tokens pages): - Replace overlay drawer with push drawer portaled outside content card - Responsive auto-fill grids that reflow when drawer opens - Filter button toggles drawer, modal fallback <1024px with z-index handling - Mobile header z-index drops when drawer open via :has([open]) - Layout padding and --card-padding-h variable for sticky toolbar sync Multi-sort tables: - Enable sort-mode="multi" and _multisort events on all tables - Add sort-order prop for visual 1/2 badges - Remove redundant sort chips, keep filter/search chips only Homepage and misc: - Service pattern links go to /examples/public-form and /examples/workspace - Responsive pattern card grid with auto-fit - Support page button compact, component card thumbnail margin fix - Sticky toolbar constrained to content card width - Mobile header: body-s typography, adjusted spacing and icon padding

…ort, responsive grids Side menu: - Remove stale useGroupShadowDomFixes workaround (chevrons hidden after #3595) - Fix Foundations sub-menu navigation (missing onNavigate handler) Push drawer filters (Examples, Components, Tokens pages): - Replace overlay drawer with push drawer portaled outside content card - Responsive auto-fill grids that reflow when drawer opens - Filter button toggles drawer, modal fallback <1024px with z-index handling - Mobile header z-index drops when drawer open via :has([open]) - Layout padding and --card-padding-h variable for sticky toolbar sync Multi-sort tables: - Enable sort-mode="multi" and _multisort events on all tables - Add sort-order prop for visual 1/2 badges - Remove redundant sort chips, keep filter/search chips only Homepage and misc: - Service pattern links go to /examples/public-form and /examples/workspace - Responsive pattern card grid with auto-fit - Support page button compact, component card thumbnail margin fix - Sticky toolbar constrained to content card width - Mobile header: body-s typography, adjusted spacing and icon padding

…ti-sort, responsive grids Side menu: - Remove stale useGroupShadowDomFixes workaround (chevrons hidden after #3595) - Fix Foundations sub-menu navigation (missing onNavigate handler) Push drawer filters (Examples, Components, Tokens pages): - Replace overlay drawer with push drawer portaled outside content card - Responsive auto-fill grids that reflow when drawer opens - Filter button toggles drawer, modal fallback <1024px with z-index handling - Mobile header z-index drops when drawer open via :has([open]) - Layout padding and --card-padding-h variable for sticky toolbar sync Multi-sort tables: - Enable sort-mode="multi" and _multisort events on all tables - Add sort-order prop for visual 1/2 badges - Remove redundant sort chips, keep filter/search chips only Homepage and misc: - Service pattern links go to /examples/public-form and /examples/workspace - Responsive pattern card grid with auto-fit - Support page button compact, component card thumbnail margin fix - Sticky toolbar constrained to content card width - Mobile header: body-s typography, adjusted spacing and icon padding

…ti-sort, responsive grids Side menu: - Remove stale useGroupShadowDomFixes workaround (chevrons hidden after #3595) - Fix Foundations sub-menu navigation (missing onNavigate handler) Push drawer filters (Examples, Components, Tokens pages): - Replace overlay drawer with push drawer portaled outside content card - Responsive auto-fill grids that reflow when drawer opens - Filter button toggles drawer, modal fallback <1024px with z-index handling - Mobile header z-index drops when drawer open via :has([open]) - Layout padding and --card-padding-h variable for sticky toolbar sync Multi-sort tables: - Enable sort-mode="multi" and _multisort events on all tables - Add sort-order prop for visual 1/2 badges - Remove redundant sort chips, keep filter/search chips only Responsive container-aware layout: - Container queries for toolbar stacking and view switching - useContainerNarrow hook (ResizeObserver) replaces viewport-based useMobile - Tables auto-switch to cards when container narrows, user can override - Horizontal scroll on tables with edge shadows and card-edge bleed - Mobile icon-only filter button with search + filter on one row - Table column width constraints (name, value) Homepage and misc: - Service pattern links go to /examples/public-form and /examples/workspace - Responsive pattern card grid with auto-fit - Support page button compact, component card thumbnail margin fix - Sticky toolbar constrained to content card width - Mobile header: body-s typography, adjusted spacing and icon padding - Fix description ellipsis truncation (was checking full body length) - Table 1px border overflow workaround (calc 100% - 2px)

Co-authored-by: bdfranck <1479091+bdfranck@users.noreply.github.com> Co-authored-by: Vanessa Tran <vanessa.m.tran@gov.ab.ca> Co-authored-by: GitHub Copilot <copilot@github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Benji Franck <benjamin.franck@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Thomas Jeffery <thomaswjeffery@gmail.com> Co-authored-by: Eric Hoff <eric@highfructose.ca> Co-authored-by: Dustin Nielsen <nielsen.dustin@gmail.com> Co-authored-by: Thomas Jeffery <82968683+twjeffery@users.noreply.github.com> Co-authored-by: mxsoco <miguel.soco@gov.ab.ca> fix(#3399): correct V2 checkbox spacing behavior fix(#3493): show tooltip on hover for Work Side Menu Group fix(#3455,#3450): Updated top and bottom positioning for Popover fix(#3273): keep Side Menu Group open Closes #2893 fix the PushDrawer open prop so the docs site works (#3542) fix: use Node 22 for Netlify deploys (#3543) fix(#3397): use existing design tokens in Astro docs (#3515) fix(#3581): use dynamic content collection for nav instead of hardcoded list Closes #3581 fix(#3498): modified padding and border on radio group. fix(#3497): fixed how the Angular Calendar and DatePicker components pass Dates to the Svelte Calendar component fix(#3497): remove build dependency on tests using library code fix(#3607): update the interaction area to just around the checkbox or radio input and label fix(#3505): Fix icon click and focus on Link fix(#3673): docs site bug sweep - push drawer filters, side menu, multi-sort, responsive grids Fixes workaround (chevrons hidden after #3595) fix(#3540): add manual positioning to Popover when the browser does not support CSS anchor positioning fix(#3614): add padding for all IconSizes fix(#3411): audit and improve all component configuration examples fix(#3685): adjust width of "reveal" slot for checkbox and radio buttons fix(#3685): remove width calculation from Radio Item

chrisolsen · 2026-03-31T23:21:48Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:30:11Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:38:36Z

🎉 This PR is included in version 7.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:47:15Z

🎉 This PR is included in version 5.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:58:19Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:30:41Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:39:04Z

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:47:27Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Copilot AI assigned Copilot and bdfranck Mar 16, 2026

Copilot started work on behalf of bdfranck March 16, 2026 23:08 View session

Copilot AI changed the title ~~[WIP] Add optional icon to WorkSideMenuGroup~~ feat: make icon optional in WorkSideMenuGroup and WorkSideMenuItem Mar 16, 2026

Copilot AI requested a review from bdfranck March 16, 2026 23:14

Copilot finished work on behalf of bdfranck March 16, 2026 23:14

bdfranck force-pushed the copilot/add-optional-icon-to-workside-menu-group branch from 29096fe to d0d5758 Compare March 18, 2026 16:35

bdfranck requested review from chrisolsen and twjeffery March 18, 2026 16:38

chrisolsen reviewed Mar 18, 2026

View reviewed changes

Comment thread libs/web-components/src/components/work-side-menu/WorkSideMenuItem.svelte Outdated

bdfranck force-pushed the copilot/add-optional-icon-to-workside-menu-group branch from d0d5758 to e14d613 Compare March 19, 2026 14:43

bdfranck marked this pull request as ready for review March 19, 2026 14:43

bdfranck requested a review from chrisolsen March 19, 2026 14:43

chrisolsen approved these changes Mar 19, 2026

View reviewed changes

Spark450 added the P3 Priority 3 (nice to have): Valuable, but safe to release after launch. label Mar 19, 2026

Spark450 removed the request for review from bdfranck March 20, 2026 15:48

bdfranck force-pushed the copilot/add-optional-icon-to-workside-menu-group branch from e14d613 to 329c9e5 Compare March 23, 2026 16:13

twjeffery approved these changes Mar 23, 2026

View reviewed changes

bdfranck force-pushed the copilot/add-optional-icon-to-workside-menu-group branch from fe8df92 to 8d091b5 Compare March 23, 2026 19:09

feat(#3544): make icon optional in Work Side Menu Group & Item

584b5b6

bdfranck force-pushed the copilot/add-optional-icon-to-workside-menu-group branch from 8d091b5 to 584b5b6 Compare March 23, 2026 19:10

chrisolsen merged commit 72cc4d1 into dev Mar 23, 2026
4 checks passed

chrisolsen deleted the copilot/add-optional-icon-to-workside-menu-group branch March 23, 2026 19:42

chrisolsen added the released on @dev label Mar 23, 2026

twjeffery mentioned this pull request Mar 24, 2026

Docs site bugs: side menu, filter drawers, multi-sort, responsive grids, mobile header #3673

Closed

This was referenced Mar 24, 2026

fix(#3673): docs site bug sweep - push drawer filters, side menu, multi-sort, responsive grids #3674

Closed

fix(#3673): docs site bug sweep - push drawer filters, side menu, multi-sort, responsive grids #3675

Merged

chrisolsen added the released on @next label Mar 31, 2026

chrisolsen added the released Released into production. label Apr 1, 2026

Conversation

Copilot AI commented Mar 16, 2026 • edited by bdfranck Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before (the change)

After (the change)

Make sure that you've checked the boxes below before you submit the PR

Steps needed to test

Use case

Expected behavior

Current workaround

Comments on the Issue (you are @copilot in this section)

Uh oh!

bdfranck commented Mar 18, 2026

Uh oh!

Uh oh!

bdfranck commented Mar 23, 2026

Uh oh!

twjeffery left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bdfranck commented Mar 23, 2026

Uh oh!

Uh oh!

chrisolsen commented Mar 23, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Mar 16, 2026 •

edited by bdfranck

Loading

twjeffery left a comment •

edited

Loading