-
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+ @for (route of bugRouteDefinitions; track route.path) {
+ [label]="route.id + ' - ' + route.title"
+ [url]="baseHref + route.path"
+ />
+ }
+
+
+ @for (route of docsRouteDefinitions; track route.path) {
+
+ }
+
+
+ @for (route of featureRouteDefinitions; track route.path) {
-
+ [label]="route.id + ' - ' + route.title"
+ [url]="baseHref + route.path"
+ />
+ }
+
+
-
-
-
- @for (route of bugRouteDefinitions; track route.path) {
-
- }
-
-
- @for (route of docsRouteDefinitions; track route.path) {
-
- }
-
-
- @for (route of featureRouteDefinitions; track route.path) {
-
- }
-
-
-
+
+
+
+
+
+
+
+
+
+ Cancel
+ Save
+
+
+
+
+
+ @for (n of pushDrawerParagraphs; track n) {
+
+ Paragraph {{ n }} — Push Drawer V2 now uses goa-scroll-panel internally. Verify
+ header sticky + actions sticky + content scrolls + outer chrome morphs
+ (margins/radius/height) as scroll state changes between top / middle / bottom.
+
+ }
+
+
+
+
+
+
-
-
+
}
@if (isFullPage) {
-
+
}
diff --git a/apps/prs/angular/src/app/app.component.ts b/apps/prs/angular/src/app/app.component.ts
index 594c670822..4bcf9f53ae 100644
--- a/apps/prs/angular/src/app/app.component.ts
+++ b/apps/prs/angular/src/app/app.component.ts
@@ -5,12 +5,16 @@ import { filter } from "rxjs/operators";
import {
GoabAppFooter,
GoabAppHeader,
- GoabMicrositeHeader,
+ GoabButton,
+ GoabButtonGroup,
+ GoabPushDrawer,
GoabThemeService,
GoabWorkSideMenu,
GoabWorkSideMenuItem,
GoabWorkSideMenuGroup,
+ GoabWorkspaceLayout,
} from "@abgov/angular-components";
+import { PushDrawerHostService } from "../routes/features/feat3347PushDrawer/push-drawer-host.service";
import {
bugRouteDefinitions,
docsRouteDefinitions,
@@ -34,37 +38,55 @@ const TOKEN_TOGGLE_URL = "#tokens";
RouterOutlet,
GoabAppFooter,
GoabAppHeader,
- GoabMicrositeHeader,
+ GoabButton,
+ GoabButtonGroup,
+ GoabPushDrawer,
GoabWorkSideMenu,
GoabWorkSideMenuItem,
GoabWorkSideMenuGroup,
+ GoabWorkspaceLayout,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
isFullPage = false;
- readonly workSideMenuHeight = "calc(100vh - 10.1875rem)";
+ isPushDrawerRoute = false;
readonly bugRouteDefinitions = bugRouteDefinitions;
readonly featureRouteDefinitions = featureRouteDefinitions;
readonly docsRouteDefinitions = docsRouteDefinitions;
readonly baseHref = inject(LocationStrategy).getBaseHref();
readonly tokenToggleUrl = TOKEN_TOGGLE_URL;
tokenMode: TokenVersion = resolveTokenVersion();
+ readonly pushDrawerParagraphs = Array.from({ length: 30 }, (_, i) => i + 1);
private fullPageRoutes = ["/features/2885"];
private router = inject(Router);
readonly theme = inject(GoabThemeService);
+ private pushDrawerHost = inject(PushDrawerHostService);
+ readonly pushDrawerOpen = this.pushDrawerHost.open;
constructor() {
+ const initialUrl = window.location.pathname.startsWith(this.baseHref)
+ ? "/" + window.location.pathname.slice(this.baseHref.length)
+ : window.location.pathname;
+ this.isFullPage = this.fullPageRoutes.includes(initialUrl);
+ this.isPushDrawerRoute = initialUrl.startsWith("/features/3347-push");
+ if (this.isPushDrawerRoute) this.pushDrawerHost.openDrawer();
+
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe((event) => {
- this.isFullPage = this.fullPageRoutes.includes(
- (event as NavigationEnd).urlAfterRedirects,
- );
+ const url = (event as NavigationEnd).urlAfterRedirects;
+ this.isFullPage = this.fullPageRoutes.includes(url);
+ this.isPushDrawerRoute = url.startsWith("/features/3347-push");
+ if (this.isPushDrawerRoute) this.pushDrawerHost.openDrawer();
});
}
+ closePushDrawer() {
+ this.pushDrawerHost.closeDrawer();
+ }
+
handleNavigate(path: string): void {
if (path === TOKEN_TOGGLE_URL) {
this.tokenMode = this.tokenMode === "v1" ? "v2" : "v1";
diff --git a/apps/prs/angular/src/routes/bugs/3665/bug3665.component.html b/apps/prs/angular/src/routes/bugs/3665/bug3665.component.html
new file mode 100644
index 0000000000..0594d0c865
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3665/bug3665.component.html
@@ -0,0 +1,30 @@
+
Bug 3665 - Tabs: page jumps when switching tabs
+
+ Switching tabs should not move the viewport. Previously setCurrentTab() called el.focus()
+ on the selected tab, which triggered the browser's scroll-into-view behavior and jumped the
+ page. Scroll down so the tabs are partially visible, then switch the framework tab. The page
+ should now stay in place.
+
+
+
+
+ Scroll down to the tabs below.
+
+
+
+
+
+ React content. Switch to Angular or Web Components.
+
+
+
+
+ Angular content. The page should not jump.
+
+
+
+
+ Web Components content. The page should not jump.
+
+
+
diff --git a/apps/prs/angular/src/routes/bugs/3665/bug3665.component.ts b/apps/prs/angular/src/routes/bugs/3665/bug3665.component.ts
new file mode 100644
index 0000000000..bd2f74e097
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3665/bug3665.component.ts
@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { GoabTab, GoabTabs, GoabText } from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3665",
+ templateUrl: "./bug3665.component.html",
+ imports: [GoabTab, GoabTabs, GoabText],
+})
+export class Bug3665Component {}
diff --git a/apps/prs/angular/src/routes/bugs/3665/bug3665.route.json b/apps/prs/angular/src/routes/bugs/3665/bug3665.route.json
new file mode 100644
index 0000000000..4c56bccb00
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3665/bug3665.route.json
@@ -0,0 +1,6 @@
+{
+ "type": "bug",
+ "id": "3665",
+ "path": "bugs/3665",
+ "title": "Tabs page jump on switch"
+}
diff --git a/apps/prs/angular/src/routes/bugs/3741/bug3741.component.html b/apps/prs/angular/src/routes/bugs/3741/bug3741.component.html
new file mode 100644
index 0000000000..feb6e01176
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3741/bug3741.component.html
@@ -0,0 +1,50 @@
+
Bug 3741 - Pagination example not reproducible
+
+ The "Show number of results per page" example uses a spacer with
+ hSpacing="fill" to push the pagination controls to the right edge. In Angular
+ the spacer collapsed to zero width and the controls bunched on the left. After
+ the fix the spacer fills and the pagination sits flush right.
+
+
+
+
+
+ | First name |
+ Last name |
+ Age |
+
+
+
+ @for (user of pageUsers; track user.id) {
+
+ | {{ user.firstName }} |
+ {{ user.lastName }} |
+ {{ user.age }} |
+
+ }
+
+
+
+
+
+ Show
+
+
+
+
+
+ per page
+
+
+
+
diff --git a/apps/prs/angular/src/routes/bugs/3741/bug3741.component.ts b/apps/prs/angular/src/routes/bugs/3741/bug3741.component.ts
new file mode 100644
index 0000000000..0b127d420a
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3741/bug3741.component.ts
@@ -0,0 +1,63 @@
+import { Component } from "@angular/core";
+import {
+ GoabBlock,
+ GoabDropdown,
+ GoabDropdownItem,
+ GoabPagination,
+ GoabSpacer,
+ GoabTable,
+ GoabText,
+} from "@abgov/angular-components";
+import {
+ GoabDropdownOnChangeDetail,
+ GoabPaginationOnChangeDetail,
+} from "@abgov/ui-components-common";
+
+interface User {
+ id: string;
+ firstName: string;
+ lastName: string;
+ age: number;
+}
+
+const FIRST_NAMES = ["Emma", "Liam", "Olivia", "Noah", "Ava", "James", "Sophia", "William", "Isabella", "Oliver"];
+const LAST_NAMES = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez"];
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3741",
+ templateUrl: "./bug3741.component.html",
+ imports: [
+ GoabBlock,
+ GoabDropdown,
+ GoabDropdownItem,
+ GoabPagination,
+ GoabSpacer,
+ GoabTable,
+ GoabText,
+ ],
+})
+export class Bug3741Component {
+ users: User[] = Array.from({ length: 100 }, (_, i) => ({
+ id: `user-${i + 1}`,
+ firstName: FIRST_NAMES[i % FIRST_NAMES.length],
+ lastName: LAST_NAMES[i % LAST_NAMES.length],
+ age: 20 + ((i + 1) % 40),
+ }));
+ page = 1;
+ perPage = 10;
+
+ get pageUsers(): User[] {
+ const offset = (this.page - 1) * this.perPage;
+ return this.users.slice(offset, offset + this.perPage);
+ }
+
+ handlePageChange(event: GoabPaginationOnChangeDetail) {
+ this.page = event.page;
+ }
+
+ handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) {
+ this.page = 1;
+ this.perPage = parseInt(event.value || "10");
+ }
+}
diff --git a/apps/prs/angular/src/routes/bugs/3741/bug3741.route.json b/apps/prs/angular/src/routes/bugs/3741/bug3741.route.json
new file mode 100644
index 0000000000..0782afcbee
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3741/bug3741.route.json
@@ -0,0 +1,6 @@
+{
+ "type": "bug",
+ "id": "3741",
+ "path": "bugs/3741",
+ "title": "Pagination spacer fill"
+}
diff --git a/apps/prs/angular/src/routes/bugs/3837/bug3837.component.html b/apps/prs/angular/src/routes/bugs/3837/bug3837.component.html
new file mode 100644
index 0000000000..b182289435
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3837/bug3837.component.html
@@ -0,0 +1,53 @@
+
Bug 3837 - Tabs: label should not shift horizontally when selection changes
+
+ Click between tabs and observe that labels do not shift horizontally. The active tab bold treatment should be preserved.
+
+
+
Test 1: String headings (default)
+
+ Short tab content
+ Longer tab content
+ Medium tab content
+ Another tab content
+
+
+
Test 2: Similar-length string headings
+
+ Information content
+ Documents content
+ History content
+
+
+
Test 3: Slot headings
+
Tabs using the heading slot rather than a string prop. Verify no shift occurs.
+
+
+ Short
+ Short tab content
+
+
+ Much longer label
+ Longer tab content
+
+
+ Medium label
+ Medium tab content
+
+
+
+
Test 4: Slot headings with badge
+
Tabs with a badge alongside the label text in the slot. The ghost text only reserves space for the text portion, so a small shift may still occur here.
+
+
+ Notifications
+ Notifications content
+
+
+ Much longer label
+ Longer tab content
+
+
+ History
+ History content
+
+
diff --git a/apps/prs/angular/src/routes/bugs/3837/bug3837.component.ts b/apps/prs/angular/src/routes/bugs/3837/bug3837.component.ts
new file mode 100644
index 0000000000..d8b86c81eb
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3837/bug3837.component.ts
@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { GoabBadge, GoabTab, GoabTabs, GoabText } from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3837",
+ templateUrl: "./bug3837.component.html",
+ imports: [GoabBadge, GoabTab, GoabTabs, GoabText],
+})
+export class Bug3837Component {}
diff --git a/apps/prs/angular/src/routes/bugs/3837/bug3837.route.json b/apps/prs/angular/src/routes/bugs/3837/bug3837.route.json
new file mode 100644
index 0000000000..82e0586a85
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3837/bug3837.route.json
@@ -0,0 +1,6 @@
+{
+ "type": "bug",
+ "id": "3837",
+ "path": "bugs/3837",
+ "title": "Tabs label shift on selection"
+}
diff --git a/apps/prs/angular/src/routes/bugs/3921/bug3921.component.html b/apps/prs/angular/src/routes/bugs/3921/bug3921.component.html
new file mode 100644
index 0000000000..d492a212c2
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3921/bug3921.component.html
@@ -0,0 +1,21 @@
+
3921 - Segmented tab dynamic indicator
+
Resize the browser window. The active tab indicator background should follow the selected tab as the layout reflows.
+
+
Many tabs including a long heading
+
+ Daily view
+ Weekly view
+ Monthly view
+ Quarterly view
+ Yearly view
+ Custom reporting period view
+ Archived view
+ Forecast view
+
+
+
Simple three-tab example
+
+ Content one
+ Content two
+ Content three
+
diff --git a/apps/prs/angular/src/routes/bugs/3921/bug3921.component.ts b/apps/prs/angular/src/routes/bugs/3921/bug3921.component.ts
new file mode 100644
index 0000000000..887e220dd0
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3921/bug3921.component.ts
@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { GoabTab, GoabTabs } from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3921",
+ templateUrl: "./bug3921.component.html",
+ imports: [GoabTab, GoabTabs],
+})
+export class Bug3921Component {}
diff --git a/apps/prs/angular/src/routes/bugs/3921/bug3921.route.json b/apps/prs/angular/src/routes/bugs/3921/bug3921.route.json
new file mode 100644
index 0000000000..126d8391ce
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3921/bug3921.route.json
@@ -0,0 +1,6 @@
+{
+ "type": "bug",
+ "id": "3921",
+ "path": "bugs/3921",
+ "title": "Segmented tab dynamic indicator"
+}
diff --git a/apps/prs/angular/src/routes/bugs/3964/bug3964.component.html b/apps/prs/angular/src/routes/bugs/3964/bug3964.component.html
new file mode 100644
index 0000000000..260c56dbce
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3964/bug3964.component.html
@@ -0,0 +1,71 @@
+
3964 - Input marked as touched when user tabs in (Angular)
+
+ Tab into a field and tab straight back out without typing: the required error should
+ appear, because the control was entered and then left. Tabbing in alone, or typing
+ without leaving, should NOT show the error. Before the fix, the error appeared as soon
+ as the field received focus.
+
+
+
Reactive form (FormControl)
+
+
+
+ - lastName.touched
+ - {{ form.get("lastName")?.touched }}
+ - bio.touched
+ - {{ form.get("bio")?.touched }}
+
+
+
Template-driven form (ngModel)
+
Same behavior should hold for the ngModel binding.
+
+
+
+ - ngModelLastName.touched
+ - {{ tdLastName.touched }}
+ - ngModelBio.touched
+ - {{ tdBio.touched }}
+
diff --git a/apps/prs/angular/src/routes/bugs/3964/bug3964.component.ts b/apps/prs/angular/src/routes/bugs/3964/bug3964.component.ts
new file mode 100644
index 0000000000..6a32a79fb3
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3964/bug3964.component.ts
@@ -0,0 +1,40 @@
+import { Component } from "@angular/core";
+import {
+ ReactiveFormsModule,
+ FormsModule,
+ FormGroup,
+ FormControl,
+ Validators,
+} from "@angular/forms";
+import { GoabFormItem, GoabInput, GoabTextArea } from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3964",
+ templateUrl: "./bug3964.component.html",
+ imports: [ReactiveFormsModule, FormsModule, GoabFormItem, GoabInput, GoabTextArea],
+})
+export class Bug3964Component {
+ form = new FormGroup({
+ lastName: new FormControl("", Validators.required),
+ bio: new FormControl("", Validators.required),
+ });
+
+ // Template-driven (ngModel) values
+ ngModelLastName = "";
+ ngModelBio = "";
+
+ get lastNameError() {
+ const control = this.form.get("lastName");
+ return control && !control.valid && control.touched && control.hasError("required")
+ ? "Enter a last name."
+ : undefined;
+ }
+
+ get bioError() {
+ const control = this.form.get("bio");
+ return control && !control.valid && control.touched && control.hasError("required")
+ ? "Enter a bio."
+ : undefined;
+ }
+}
diff --git a/apps/prs/angular/src/routes/bugs/3964/bug3964.route.json b/apps/prs/angular/src/routes/bugs/3964/bug3964.route.json
new file mode 100644
index 0000000000..820a05d01a
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3964/bug3964.route.json
@@ -0,0 +1,6 @@
+{
+ "type": "bug",
+ "id": "3964",
+ "path": "bugs/3964",
+ "title": "Input touched on tab-in (Angular)"
+}
diff --git a/apps/prs/angular/src/routes/bugs/4077/bug4077.component.html b/apps/prs/angular/src/routes/bugs/4077/bug4077.component.html
new file mode 100644
index 0000000000..3907f4de3f
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/4077/bug4077.component.html
@@ -0,0 +1,18 @@
+
Bug 4077 - Text component missing heading-2xl
+
+ GoabText now supports a size of "heading-2xl", the largest heading size. It should
+ render at least as large as "heading-xl". The visual size is driven by the
+ "--goa-typography-heading-2xl" design token and falls back to "heading-xl" until that
+ token is published.
+
+
+
New size
+
Heading 2XL
+
+
+
+
Size scale comparison
+
Heading 2XL
+
Heading XL
+
Heading L
+
Heading M
diff --git a/apps/prs/angular/src/routes/bugs/4077/bug4077.component.ts b/apps/prs/angular/src/routes/bugs/4077/bug4077.component.ts
new file mode 100644
index 0000000000..993ec10477
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/4077/bug4077.component.ts
@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { GoabDivider, GoabText } from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug4077",
+ templateUrl: "./bug4077.component.html",
+ imports: [GoabDivider, GoabText],
+})
+export class Bug4077Component {}
diff --git a/apps/prs/angular/src/routes/bugs/4077/bug4077.route.json b/apps/prs/angular/src/routes/bugs/4077/bug4077.route.json
new file mode 100644
index 0000000000..d36d610b22
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/4077/bug4077.route.json
@@ -0,0 +1,6 @@
+{
+ "type": "bug",
+ "id": "4077",
+ "path": "bugs/4077",
+ "title": "Text missing heading-2xl"
+}
diff --git a/apps/prs/angular/src/routes/docs/pagination/pagination.component.html b/apps/prs/angular/src/routes/docs/pagination/pagination.component.html
index 63ffdb33c3..140bc534f2 100644
--- a/apps/prs/angular/src/routes/docs/pagination/pagination.component.html
+++ b/apps/prs/angular/src/routes/docs/pagination/pagination.component.html
@@ -43,6 +43,7 @@
Show number of results per page
Show
diff --git a/apps/prs/angular/src/routes/docs/scroll-panel/scroll-panel.component.html b/apps/prs/angular/src/routes/docs/scroll-panel/scroll-panel.component.html
new file mode 100644
index 0000000000..269b259df5
--- /dev/null
+++ b/apps/prs/angular/src/routes/docs/scroll-panel/scroll-panel.component.html
@@ -0,0 +1,96 @@
+Scroll panel
+
+ Mirrors the documentation examples for goab-scroll-panel: a bounded
+ container with sticky header / footer slots and a scrollable body.
+
+
+Basic scroll panel
+
+
+ Case details
+
+
+
+
+
+ Cancel
+ Save changes
+
+
+
+
+
+
+ @for (n of paragraphs; track n) {
+
+ Paragraph {{ n }} — Scrollable body content. The panel will scroll inside its
+ 480px height, with sticky header and footer pinned. Notice the subtle border +
+ inset shadow that appears when scrolling indicates more content.
+
+ }
+
+
Header only
+
+
+ Activity feed
+
+
+
+
+
+ @for (n of rows; track n) {
+
Row {{ n }} — scroll me, header stays pinned at the top.
+ }
+
+
Footer only
+
+
+
+ Submit
+
+
+
+
+
+
+ @for (n of rows; track n) {
+
Row {{ n }} — scroll me, footer stays pinned at the bottom.
+ }
+
+
Custom height
+
+ The height prop accepts any valid CSS height value (e.g. "600px", "80vh").
+ It defaults to "100%" so the panel fills a height-constrained parent.
+
+
+
+ Custom 600px height
+
+
+
+
+ Footer pinned at bottom
+
+
+
+
+
+ @for (n of tallRows; track n) {
+
+ Row {{ n }} — Body scrolls within the explicit 600px height. Swap to "80vh" for
+ viewport-relative sizing, or leave the prop off (defaults to "100%") when a
+ parent already constrains height.
+
+ }
+
+
+ @for (n of rows; track n) {
+
Case row {{ n }}
+ }
+
Workspace layout
+
+ Mirrors the documentation examples for goab-workspace-layout. Each
+ example is bounded to 600px so they stack on this page; in a real app the layout
+ fills the viewport.
+
+
+Basic workspace
+
+
+
+ @for (n of rows; track n) {
+
Case row {{ n }} — scroll this area while the side menu stays in place.
+ }
+
+
Sticky header
+
+
+
+ @for (n of rows; track n) {
+
Case row {{ n }} — scroll this area and the header stays pinned at the top.
+ }
+
+
+ My cases
+
+ Filter
+ New case
+
+
+
+
+Sticky footer
+
+
+
+ @for (n of rows; track n) {
+
Case row {{ n }} — scroll this area and the footer stays pinned at the bottom.
+ }
+
+
+ 3 cases selected
+
+ Clear
+ Export
+
+
+
+
+Push drawer
+
+
+
+
Open
+ @for (n of rows; track n) {
+
+ Case row {{ n }} — open the drawer and it appears beside this content,
+ narrowing it instead of covering it.
+
+ }
+
+
Details for the selected case appear here, beside the page content.
+
+
+
+Monitor scroll state
+
+ The page header collapses its subtitle once content scrolls past the top, via
+ GoabWorkspaceLayoutScrollStateService.
+
+
diff --git a/apps/prs/angular/src/routes/docs/workspace-layout/workspace-layout.component.ts b/apps/prs/angular/src/routes/docs/workspace-layout/workspace-layout.component.ts
new file mode 100644
index 0000000000..75c4e35cc9
--- /dev/null
+++ b/apps/prs/angular/src/routes/docs/workspace-layout/workspace-layout.component.ts
@@ -0,0 +1,52 @@
+import { Component } from "@angular/core";
+import {
+ GoabButton,
+ GoabButtonGroup,
+ GoabPushDrawer,
+ GoabText,
+ GoabWorkSideMenu,
+ GoabWorkSideMenuItem,
+ GoabWorkspaceLayout,
+} from "@abgov/angular-components";
+import { DocsWorkspaceLayoutScrollMonitorComponent } from "./workspace-layout-scroll-monitor.component";
+
+@Component({
+ standalone: true,
+ selector: "abgov-docs-workspace-layout",
+ templateUrl: "./workspace-layout.component.html",
+ imports: [
+ GoabWorkspaceLayout,
+ GoabWorkSideMenu,
+ GoabWorkSideMenuItem,
+ GoabText,
+ GoabButton,
+ GoabButtonGroup,
+ GoabPushDrawer,
+ DocsWorkspaceLayoutScrollMonitorComponent,
+ ],
+ styles: [
+ `
+ .wsl-demo {
+ margin-bottom: var(--goa-space-2xl, 3rem);
+ }
+ /* goab-workspace-layout fills the viewport (100vh) by default. Bound each
+ demo so they stack on this page; !important overrides the web
+ component's :host height rule. */
+ :host ::ng-deep goab-workspace-layout,
+ :host ::ng-deep abgov-docs-wsl-scroll-monitor {
+ display: block;
+ }
+ :host ::ng-deep goa-workspace-layout {
+ height: 600px !important;
+ }
+ `,
+ ],
+})
+export class DocsWorkspaceLayoutComponent {
+ rows = Array.from({ length: 16 }, (_, i) => i + 1);
+ open = false;
+
+ handleNavigate(path: string): void {
+ console.log("navigate", path);
+ }
+}
diff --git a/apps/prs/angular/src/routes/docs/workspace-layout/workspace-layout.route.json b/apps/prs/angular/src/routes/docs/workspace-layout/workspace-layout.route.json
new file mode 100644
index 0000000000..b068b96d97
--- /dev/null
+++ b/apps/prs/angular/src/routes/docs/workspace-layout/workspace-layout.route.json
@@ -0,0 +1,10 @@
+{
+ "type": "docs",
+ "id": "workspace-layout",
+ "path": "docs/workspace-layout",
+ "title": "Workspace Layout"
+}
+
+
+
+
diff --git a/apps/prs/angular/src/routes/features/feat3347/feat3347.component.css b/apps/prs/angular/src/routes/features/feat3347/feat3347.component.css
new file mode 100644
index 0000000000..9331be9010
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3347/feat3347.component.css
@@ -0,0 +1,55 @@
+.demo-header,
+.ws-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--goa-space-m);
+ padding: var(--goa-space-m) var(--goa-space-l);
+}
+
+.ws-header__actions {
+ display: flex;
+ gap: var(--goa-space-s);
+}
+
+.demo-body,
+.ws-body {
+ padding: var(--goa-space-m) var(--goa-space-l);
+}
+
+.ws-row {
+ padding: var(--goa-space-s) 0;
+ border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
+}
+
+.ws-row__title {
+ font-weight: var(--goa-font-weight-bold);
+}
+
+.ws-row__meta {
+ color: var(--goa-color-text-secondary);
+ font-size: var(--goa-font-size-2);
+}
+
+.demo-footer,
+.ws-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--goa-space-m);
+ padding: var(--goa-space-s) var(--goa-space-l);
+}
+
+.ws-footer__count {
+ color: var(--goa-color-text-secondary);
+}
+
+/* Test 6: bound the notification panel's width (panel itself is 710px tall by
+ default) and frame it so it visually stands apart from the surrounding page
+ content. */
+.notification-panel-stage {
+ width: 360px;
+ border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
+ border-radius: var(--goa-popover-border-radius);
+ overflow: hidden;
+}
diff --git a/apps/prs/angular/src/routes/features/feat3347/feat3347.component.html b/apps/prs/angular/src/routes/features/feat3347/feat3347.component.html
new file mode 100644
index 0000000000..a1a3ace28f
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3347/feat3347.component.html
@@ -0,0 +1,323 @@
+#3347 Scroll Panel — Workspace shell evaluation
+Test 1: Bounded panel (the use case it's built for)
+
+ Fixed height 480px. Header + scrollable body + footer. This is where the component
+ shines.
+
+
+
+
+
+
+
+
+
+
+
+ @for (n of paragraphs; track n) {
+
+ Paragraph {{ n }} — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat.
+
+ }
+
Test 2: Header only / Footer only
+Verifying optional template slots render correctly.
+
+
+
+
+
+
+
+
+
+
+
+ @for (n of paragraphs; track n) {
+
Row {{ n }} — scroll me, header stays pinned.
+ }
+
+ @for (n of paragraphs; track n) {
+
Row {{ n }} — scroll me, footer stays pinned.
+ }
+
Test 3: Default height (100%) inside a constrained parent
+Parent gives the height context — scroll panel fills it.
+
+
+
+
+
+
+
+
+
+
+
+ @for (n of paragraphs; track n) {
+
Row {{ n }} — body scrolls within the parent's 380px.
+ }
+
+
Test 4: Drawer V2 (refactored internally with goa-scroll-panel)
+
+ Verifies Drawer V2 still works after its internal scroll mechanics were replaced with
+ <goa-scroll-panel>. Open and scroll inside — header should stay
+ pinned at top (with border on scroll), actions footer should stay pinned at bottom (with
+ border when content overflows above).
+
+
+
+
+ Cancel
+ Save
+
+
+
+Open drawer
+
+
+ @for (n of paragraphs; track n) {
+
+ Paragraph {{ n }} — Drawer V2 now uses goa-scroll-panel internally. Verify header
+ sticky + actions sticky + content scrolls + borders appear when scrolled
+ (top/middle/bottom states).
+
+ }
+
+
+
+
+
+ Push Drawer V2 also got the scroll-panel treatment — see the dedicated full-page test at
+ features/3347-push (linked in the side menu as
+ 3347-push - Scroll Panel - Push Drawer V2) so the drawer's internal
+ scroll can be verified without page scroll bubbling.
+
+
+
+
+
+
+
+Test 5: Modal (refactored internally with goa-scroll-panel)
+
+ Verifies Modal still works after its V2 path was refactored to use
+ <goa-scroll-panel> instead of <goa-scrollable>. V1
+ path is unchanged (still uses goa-scrollable + maxheight calc). The
+ GoabModal React/Angular wrapper hardcodes version="2"
+ so this test exercises the new path. Open and scroll inside — header should stay pinned
+ at top with border on scroll, action footer pinned at bottom with border when content
+ overflows above.
+
+
+
+
+ Cancel
+ Save
+
+
+
+Open modal
+
+
+ @for (n of paragraphs; track n) {
+
+ Paragraph {{ n }} — Modal V2 now uses goa-scroll-panel internally. Verify header
+ sticky + actions sticky + content scrolls + borders appear when scrolled
+ (top/middle/bottom states). The pane should remain centered with a 64px gap from
+ viewport edges.
+
+ }
+
+
+
+
+
+
+
+Test 6: WorkSideNotificationPanel (refactored to use goa-scroll-panel)
+
+ Verifies the notification panel still works after its layout was refactored to use
+ <goa-scroll-panel> internally (header slot for title + tabs,
+ default slot for the scrollable notification list, footer slot for "View all"
+ / "Mark all as read" actions). Rendered inline here (normally lives inside a
+ popover triggered from a work-side-menu icon). Scroll inside the notification
+ list to verify sticky header + sticky footer + border feedback on scroll.
+
+
+
+
+ @for (notif of notifications; track trackById($index, notif)) {
+
+ }
+
+
+
+
+
+
+
+
+Validator case 1: valid calc() height (no error)
+
+ Passes height="calc(20rem + 2rem)". The old regex validator
+ rejected calc(), so this used to log a false console error. With CSS.supports
+ it is accepted: no error logged, and the panel scrolls within its explicit
+ height. Scroll to the bottom and keep scrolling with the pointer over the
+ panel, the page scrolls next (no scroll trap).
+
+
+
+
+
+
+
+
+ @for (n of paragraphs; track n) {
+
Row {{ n }} — body content inside a calc() height panel.
+ }
+
Validator case 2: invalid height (errors, falls back to 100%)
+
+ Passes height="not-a-height". Open the console: it logs a
+ ScrollPanel height error. Instead of collapsing to content height (an
+ unscrollable block that swallowed page scroll), the host now falls back to
+ height: 100%, so inside this 320px parent the panel is bounded and
+ scrolls normally.
+
+
+
+
+
+
+
+
+
+ @for (n of paragraphs; track n) {
+
Row {{ n }} — body content inside an invalid-height panel.
+ }
+
+
Push Drawer V2 — scroll-panel integration test
+
+ The drawer on the right is rendered at the app shell level (the
+ pushDrawer slot of goab-workspace-layout in
+ app.component.html), not inside this page. Scroll inside it and watch the
+ outer chrome morph:
+
+
+ -
+ No scroll: full chrome (16px margin all sides, all corners
+ rounded).
+
+ -
+ At top: bottom flush (margin-bottom: 0, bottom corners square).
+
+ -
+ Middle: both edges flush, all corners square, header + footer have
+ border.
+
+ - At bottom: top flush (margin-top: 0, top corners square).
+
+
+ The heading "Push Drawer V2 test" should also collapse from heading-s →
+ heading-xs when scrolled past top.
+
+
+Open push drawer
diff --git a/apps/prs/angular/src/routes/features/feat3347PushDrawer/feat3347PushDrawer.component.ts b/apps/prs/angular/src/routes/features/feat3347PushDrawer/feat3347PushDrawer.component.ts
new file mode 100644
index 0000000000..2fb7c53d5a
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3347PushDrawer/feat3347PushDrawer.component.ts
@@ -0,0 +1,17 @@
+import { Component, inject } from "@angular/core";
+import { GoabButton } from "@abgov/angular-components";
+import { PushDrawerHostService } from "./push-drawer-host.service";
+
+@Component({
+ standalone: true,
+ selector: "abgov-feat3347-push",
+ templateUrl: "./feat3347PushDrawer.component.html",
+ imports: [GoabButton],
+})
+export class Feat3347PushDrawerComponent {
+ private pushDrawerHost = inject(PushDrawerHostService);
+
+ openPushDrawer() {
+ this.pushDrawerHost.openDrawer();
+ }
+}
diff --git a/apps/prs/angular/src/routes/features/feat3347PushDrawer/feat3347PushDrawer.route.json b/apps/prs/angular/src/routes/features/feat3347PushDrawer/feat3347PushDrawer.route.json
new file mode 100644
index 0000000000..ab0a392265
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3347PushDrawer/feat3347PushDrawer.route.json
@@ -0,0 +1,6 @@
+{
+ "title": "Scroll Panel - Push Drawer V2",
+ "path": "features/3347-push",
+ "id": "3347-push",
+ "type": "feature"
+}
diff --git a/apps/prs/angular/src/routes/features/feat3347PushDrawer/push-drawer-host.service.ts b/apps/prs/angular/src/routes/features/feat3347PushDrawer/push-drawer-host.service.ts
new file mode 100644
index 0000000000..19a1a5aa13
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3347PushDrawer/push-drawer-host.service.ts
@@ -0,0 +1,19 @@
+import { Injectable, signal } from "@angular/core";
+
+/**
+ * Shared state for the push drawer that lives in the app shell. Mirrors the
+ * React playground pattern where the drawer is rendered at the workspace
+ * layout level and the route just triggers open via outlet context.
+ */
+@Injectable({ providedIn: "root" })
+export class PushDrawerHostService {
+ readonly open = signal(false);
+
+ openDrawer() {
+ this.open.set(true);
+ }
+
+ closeDrawer() {
+ this.open.set(false);
+ }
+}
diff --git a/apps/prs/react/src/app/app.tsx b/apps/prs/react/src/app/app.tsx
index 04a769a9bf..4e92abd6eb 100644
--- a/apps/prs/react/src/app/app.tsx
+++ b/apps/prs/react/src/app/app.tsx
@@ -1,21 +1,23 @@
-import { useState, type CSSProperties } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
import {
- GoabAppFooter,
- GoabAppHeader,
- GoabMicrositeHeader,
- GoabOneColumnLayout,
+ GoabButton,
+ GoabButtonGroup,
+ GoabPushDrawer,
+ GoabText,
GoabWorkSideMenu,
GoabWorkSideMenuGroup,
GoabWorkSideMenuItem,
useTheme,
+ GoabWorkspaceLayout,
+ useGoabWorkspaceLayoutScrollState,
} from "@abgov/react-components";
+import { GoabWorkspaceLayoutScrollState } from "@abgov/ui-components-common";
import {
bugRouteDefinitions,
docsRouteDefinitions,
featureRouteDefinitions,
} from "./route-manifest";
-
import "@abgov/style";
// Runtime V1/V2 token switching. Importing this module applies the currently
// selected token set (default V2) to before the app renders. The
@@ -27,22 +29,90 @@ import {
type TokenVersion,
} from "./tokenVersion";
+const PUSH_DRAWER_ROUTE_PATH = "/features/3347-push";
+const pushDrawerTestParagraphs = Array.from({ length: 30 }, (_, i) => i + 1);
+
+/** Outlet context shape exposed to routes rendered inside App. */
+export interface AppOutletContext {
+ openPushDrawer: () => void;
+}
+
// Sentinel URL handled by onNavigate below to toggle tokens instead of routing.
const TOKEN_TOGGLE_URL = "#tokens";
-const appContentStyle: CSSProperties = {
- display: "flex",
- minHeight: "calc(100vh - 10.1875rem)",
- "--goa-work-side-menu-height": "calc(100vh - 10.1875rem)",
-} as CSSProperties;
+// Demo: a slotted page-header that shrinks its heading once content scrolls
+// under the pinned header. It reads the layout's scroll state via the context
+// hook (no prop drilling), using the same middle / at-bottom states that drive
+// the scroll cue. The heading size swaps discretely between states. Because it
+// reads context, it must be its own component rendered inside the layout, not
+// inline JSX created up in App.
+function PlaygroundPageHeader() {
+ const { scrollPosition } = useGoabWorkspaceLayoutScrollState();
+ const pinned =
+ scrollPosition === GoabWorkspaceLayoutScrollState.MIDDLE ||
+ scrollPosition === GoabWorkspaceLayoutScrollState.AT_BOTTOM;
+
+ return (
+
+
+ Testing Playground
+
+
+
+ Secondary
+
+
+ Primary action
+
+
+
+ );
+}
export function App() {
const navigate = useNavigate();
const { mode, toggle } = useTheme();
const isDark = mode === "dark";
+ const location = useLocation();
const baseUrl = import.meta.env.BASE_URL;
const [tokenMode, setTokenMode] = useState(() => resolveTokenVersion());
+ const isPushDrawerRoute =
+ location.pathname === PUSH_DRAWER_ROUTE_PATH ||
+ location.pathname === `${baseUrl}features/3347-push`;
+ const [pushDrawerOpen, setPushDrawerOpen] = useState(isPushDrawerRoute);
+
+ // Re-open the drawer each time the user navigates back to the test route so
+ // closing it once doesn't make the rest of the page useless for the demo.
+ useEffect(() => {
+ if (isPushDrawerRoute) setPushDrawerOpen(true);
+ }, [isPushDrawerRoute]);
+
+ const closePushDrawer = () => setPushDrawerOpen(false);
+ const pushDrawerActions = (
+
+
+ Save
+
+
+ Cancel
+
+
+ );
+
const handleSideMenuNavigate = (path: string) => {
if (path === TOKEN_TOGGLE_URL) {
const next: TokenVersion = tokenMode === "v1" ? "v2" : "v1";
@@ -58,78 +128,133 @@ export function App() {
navigate(internal);
};
- return (
-
-
-
-
+ const sideMenu = (
+
+
+
+
+ }
+ primaryContent={
+ <>
+
+ {bugRouteDefinitions.map((route) => (
+ ))}
+
+
+
+ {featureRouteDefinitions.map((route) => (
-
- }
- primaryContent={
- <>
-
- {bugRouteDefinitions.map((route) => (
-
- ))}
-
-
-
- {featureRouteDefinitions.map((route) => (
-
- ))}
-
-
- {docsRouteDefinitions.map((route) => (
-
- ))}
-
+ ))}
+
+
+ {docsRouteDefinitions.map((route) => (
-
+ ))}
+
+
+
+ }
+ />
+ );
+
+ // Sticky page-header slot. This slot is for contextual page-level content
+ // (page heading, action bars), not the app chrome. See PlaygroundPageHeader,
+ // which also demos shrinking the heading on scroll via the scroll-state hook.
+ const pageHeader = ;
+ // Sticky page-footer slot. Like the header, this is for contextual content
+ // (e.g. a bulk-action bar that appears when rows are selected), not the app
+ // footer. GoabAppFooter (with the GoA logo) was the wrong mental model here.
+ const pageFooter = (
+
+
+ 3 rows selected
+
+
+
+ Clear selection
+
+
+ Export selected
+
+
+
+ );
+
+ const pushDrawer = isPushDrawerRoute || pushDrawerOpen ? (
+
+ {pushDrawerTestParagraphs.map((n) => (
+
+ Paragraph {n} — Push Drawer V2 now uses goa-scroll-panel internally. Verify
+ header sticky + actions sticky + content scrolls + outer chrome morphs
+ (margins/radius/height) as scroll state changes between top / middle / bottom.
+
+ ))}
+
+ ) : undefined;
+
+ return (
+
+
+ setPushDrawerOpen(true),
+ } satisfies AppOutletContext
}
/>
-
-
-
+
);
}
diff --git a/apps/prs/react/src/app/routes/bugs/bug3665.route.ts b/apps/prs/react/src/app/routes/bugs/bug3665.route.ts
new file mode 100644
index 0000000000..94dbd849c2
--- /dev/null
+++ b/apps/prs/react/src/app/routes/bugs/bug3665.route.ts
@@ -0,0 +1,10 @@
+import { Bug3665Route } from "../../../routes/bugs/bug3665";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+ type: "bug",
+ id: "3665",
+ path: "bugs/3665",
+ title: "Tabs page jump on switch",
+ component: Bug3665Route,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/bugs/bug3741.route.ts b/apps/prs/react/src/app/routes/bugs/bug3741.route.ts
new file mode 100644
index 0000000000..a641f9fade
--- /dev/null
+++ b/apps/prs/react/src/app/routes/bugs/bug3741.route.ts
@@ -0,0 +1,10 @@
+import { Bug3741Route } from "../../../routes/bugs/bug3741";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+ type: "bug",
+ id: "3741",
+ path: "bugs/3741",
+ title: "Pagination spacer fill",
+ component: Bug3741Route,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/bugs/bug3837.route.ts b/apps/prs/react/src/app/routes/bugs/bug3837.route.ts
new file mode 100644
index 0000000000..d63ff79179
--- /dev/null
+++ b/apps/prs/react/src/app/routes/bugs/bug3837.route.ts
@@ -0,0 +1,10 @@
+import { Bug3837Route } from "../../../routes/bugs/bug3837";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+ type: "bug",
+ id: "3837",
+ path: "bugs/3837",
+ title: "Tabs label shift on selection",
+ component: Bug3837Route,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/bugs/bug3921.route.ts b/apps/prs/react/src/app/routes/bugs/bug3921.route.ts
new file mode 100644
index 0000000000..2a2c3846f3
--- /dev/null
+++ b/apps/prs/react/src/app/routes/bugs/bug3921.route.ts
@@ -0,0 +1,10 @@
+import { Bug3921Route } from "../../../routes/bugs/bug3921";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+ type: "bug",
+ id: "3921",
+ path: "bugs/3921",
+ title: "Segmented tab dynamic indicator",
+ component: Bug3921Route,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/bugs/bug4077.route.ts b/apps/prs/react/src/app/routes/bugs/bug4077.route.ts
new file mode 100644
index 0000000000..9b07d25ac1
--- /dev/null
+++ b/apps/prs/react/src/app/routes/bugs/bug4077.route.ts
@@ -0,0 +1,10 @@
+import { Bug4077Route } from "../../../routes/bugs/bug4077";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+ type: "bug",
+ id: "4077",
+ path: "bugs/4077",
+ title: "Text missing heading-2xl",
+ component: Bug4077Route,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/docs/scroll-panel.route.ts b/apps/prs/react/src/app/routes/docs/scroll-panel.route.ts
new file mode 100644
index 0000000000..15c306238a
--- /dev/null
+++ b/apps/prs/react/src/app/routes/docs/scroll-panel.route.ts
@@ -0,0 +1,10 @@
+import { DocsScrollPanelRoute } from "../../../routes/docs/scroll-panel/scroll-panel";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+ type: "docs",
+ id: "scroll-panel",
+ path: "docs/scroll-panel",
+ title: "Scroll Panel",
+ component: DocsScrollPanelRoute,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/docs/workspace-layout.route.ts b/apps/prs/react/src/app/routes/docs/workspace-layout.route.ts
new file mode 100644
index 0000000000..596771f34a
--- /dev/null
+++ b/apps/prs/react/src/app/routes/docs/workspace-layout.route.ts
@@ -0,0 +1,10 @@
+import { DocsWorkspaceLayoutRoute } from "../../../routes/docs/workspace-layout/workspace-layout";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+ type: "docs",
+ id: "workspace-layout",
+ path: "docs/workspace-layout",
+ title: "Workspace Layout",
+ component: DocsWorkspaceLayoutRoute,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/features/feat3347.route.ts b/apps/prs/react/src/app/routes/features/feat3347.route.ts
new file mode 100644
index 0000000000..42369f416f
--- /dev/null
+++ b/apps/prs/react/src/app/routes/features/feat3347.route.ts
@@ -0,0 +1,9 @@
+import { Feat3347Route } from "../../../routes/features/feat3347";
+import type { PrRouteDefinition } from "../../route-manifest";
+export default {
+ type: "feature",
+ id: "3347",
+ path: "features/3347",
+ title: "Scroll Panel",
+ component: Feat3347Route,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/app/routes/features/feat3347PushDrawer.route.ts b/apps/prs/react/src/app/routes/features/feat3347PushDrawer.route.ts
new file mode 100644
index 0000000000..302093f9bb
--- /dev/null
+++ b/apps/prs/react/src/app/routes/features/feat3347PushDrawer.route.ts
@@ -0,0 +1,9 @@
+import { Feat3347PushDrawerRoute } from "../../../routes/features/feat3347PushDrawer";
+import type { PrRouteDefinition } from "../../route-manifest";
+export default {
+ type: "feature",
+ id: "3347-push",
+ path: "features/3347-push",
+ title: "Scroll Panel - Push Drawer V2",
+ component: Feat3347PushDrawerRoute,
+} satisfies PrRouteDefinition;
diff --git a/apps/prs/react/src/main.tsx b/apps/prs/react/src/main.tsx
index 7cc14365be..8849490743 100644
--- a/apps/prs/react/src/main.tsx
+++ b/apps/prs/react/src/main.tsx
@@ -20,7 +20,6 @@ root.render(
} />
{prRouteDefinitions.map((route) => {
const Component = route.component;
-
return } />;
})}
diff --git a/apps/prs/react/src/routes/bugs/bug3665.tsx b/apps/prs/react/src/routes/bugs/bug3665.tsx
new file mode 100644
index 0000000000..f081b8f69d
--- /dev/null
+++ b/apps/prs/react/src/routes/bugs/bug3665.tsx
@@ -0,0 +1,49 @@
+import { GoabTab, GoabTabs, GoabText } from "@abgov/react-components";
+
+export function Bug3665Route() {
+ return (
+
+
+ Bug #3665: Tabs page jumps when switching tabs
+
+
+ Switching tabs should not move the viewport. Previously, setCurrentTab() called
+ el.focus() on the selected tab, which triggered the browser's scroll-into-view
+ behavior and jumped the page. To reproduce the old behavior: scroll down so the
+ tabs are partially visible, then switch the framework tab. The page should now
+ stay in place.
+
+
+ {/* Tall spacer so the tabs sit below the fold and a jump would be obvious. */}
+
+ Scroll down to the tabs below.
+
+
+
+
+
+ React content. Switch to Angular or Web Components.
+
+
+
+
+ Angular content. The page should not jump.
+
+
+
+
+ Web Components content. The page should not jump.
+
+
+
+
+
+ Bug #3741: Pagination example not reproducible
+
+
+ The "Show number of results per page" example uses a spacer with
+ hSpacing="fill" to push the pagination to the right edge. React always
+ rendered this correctly; this page is the control matching the Angular
+ fix (bugs/3741).
+
+
+
+
+
+ | First name |
+ Last name |
+ Age |
+
+
+
+ {pageUsers.map((u) => (
+
+ | {u.firstName} |
+ {u.lastName} |
+ {u.age} |
+
+ ))}
+
+
+
+
+
+ Show
+
+
+
+
+
+ per page
+
+
+ setPage(event.page)}
+ />
+
+
+ );
+}
+
+export default Bug3741Route;
diff --git a/apps/prs/react/src/routes/bugs/bug3837.tsx b/apps/prs/react/src/routes/bugs/bug3837.tsx
new file mode 100644
index 0000000000..e3eeb4a41a
--- /dev/null
+++ b/apps/prs/react/src/routes/bugs/bug3837.tsx
@@ -0,0 +1,112 @@
+import {
+ GoabBlock,
+ GoabText,
+ GoabDivider,
+ GoabDetails,
+ GoabLink,
+ GoabTabs,
+ GoabTab,
+ GoabBadge,
+} from "@abgov/react-components";
+
+export function Bug3837Route() {
+ return (
+
+
+ Bug #3837: Tabs label should not shift horizontally when selection changes
+
+
+
+
+
+ View on GitHub
+
+
+
+
+
+ When switching between tabs, the tab labels shift horizontally. This is caused by a bold
+ font weight being applied to the active tab, causing the text to take up more space and
+ nudging adjacent tabs out of position.
+
+
+
+
+
+
+
Test Cases
+
+
Test 1: String headings (default)
+
+ Click between tabs and observe that the labels do not shift position. The active tab bold
+ treatment should be preserved.
+
+
+
+ Short tab content
+
+
+ Longer tab content
+
+
+ Medium tab content
+
+
+ Another tab content
+
+
+
+
Test 2: Similar-length string headings
+
+ All tabs have similar-length labels to make any shift more visible. Verify no horizontal
+ movement when switching tabs.
+
+
+
+ Information content
+
+
+ Documents content
+
+
+ History content
+
+
+
+
Test 3: Slot headings (text only)
+
+ Tabs using the heading slot (ReactNode) rather than a string prop. Verify no shift occurs.
+
+
+ Short}>
+ Short tab content
+
+ Much longer label}>
+ Longer tab content
+
+ Medium label}>
+ Medium tab content
+
+
+
+
Test 4: Slot headings with badge
+
+ Tabs with a badge alongside the label text in the slot. The ghost text only reserves space
+ for the text portion, so a small shift may still occur here.
+
+
+ Notifications }>
+ Notifications content
+
+ Much longer label }>
+ Longer tab content
+
+ History}>
+ History content
+
+
+
+
+
+ 3921 - Segmented tab dynamic indicator
+
+
+ Resize the browser window. The active tab indicator background should follow the
+ selected tab as the layout reflows.
+
+
+
+
+
+ Many tabs including a long heading
+
+
+ Daily view
+ Weekly view
+ Monthly view
+ Quarterly view
+ Yearly view
+
+ Custom reporting period view
+
+ Archived view
+ Forecast view
+
+
+
+
+
+ Simple three-tab example
+
+
+ Content one
+ Content two
+ Content three
+
+
+
+
+ Bug #4077: Text component missing heading-2xl
+
+
+ GoabText now supports a size of "heading-2xl", the largest heading size. It
+ should render at least as large as "heading-xl". The visual size is driven by
+ the "--goa-typography-heading-2xl" design token and falls back to "heading-xl"
+ until that token is published.
+
+
+
+ New size
+
+
+ Heading 2XL
+
+
+
+
+
+ Size scale comparison
+
+
+ Heading 2XL
+
+
+ Heading XL
+
+
+ Heading L
+
+
+ Heading M
+
+
+ );
+}
+
+export default Bug4077Route;
diff --git a/apps/prs/react/src/routes/docs/pagination/pagination.tsx b/apps/prs/react/src/routes/docs/pagination/pagination.tsx
index 3afa298b5f..c5908bdc4b 100644
--- a/apps/prs/react/src/routes/docs/pagination/pagination.tsx
+++ b/apps/prs/react/src/routes/docs/pagination/pagination.tsx
@@ -101,6 +101,7 @@ export function DocsPaginationRoute() {
onChange={handlePerPageCountChangeEvent}
value={perPage.toString()}
width="9ch"
+ size="compact"
>
diff --git a/apps/prs/react/src/routes/docs/scroll-panel/scroll-panel.tsx b/apps/prs/react/src/routes/docs/scroll-panel/scroll-panel.tsx
new file mode 100644
index 0000000000..bf52134f79
--- /dev/null
+++ b/apps/prs/react/src/routes/docs/scroll-panel/scroll-panel.tsx
@@ -0,0 +1,133 @@
+import {
+ GoabButton,
+ GoabButtonGroup,
+ GoabScrollPanel,
+ GoabText,
+} from "@abgov/react-components";
+
+const paragraphs = Array.from({ length: 15 }, (_, i) => i + 1);
+const rows = Array.from({ length: 12 }, (_, i) => i + 1);
+const tallRows = Array.from({ length: 20 }, (_, i) => i + 1);
+
+export function DocsScrollPanelRoute() {
+ return (
+
+
Scroll panel
+
+ Mirrors the documentation examples for GoabScrollPanel: a bounded
+ container with sticky header / footer slots and a scrollable body.
+
+
+
Basic scroll panel
+
+ }
+ footer={
+
+
+
+ Cancel
+
+
+ Save changes
+
+
+
+ }
+ >
+
+ {paragraphs.map((n) => (
+
+ Paragraph {n} — Scrollable body content. The panel will scroll inside its
+ 480px height, with sticky header and footer pinned. Notice the subtle
+ border + inset shadow that appears when scrolling indicates more content.
+
+ ))}
+
+
+
Header only
+
+ }
+ >
+
+ {rows.map((n) => (
+
Row {n} — scroll me, header stays pinned at the top.
+ ))}
+
Footer only
+
+ }
+ >
+
+ {rows.map((n) => (
+
Row {n} — scroll me, footer stays pinned at the bottom.
+ ))}
+
![Diagram of the workspace layout showing its pieces: a work side menu down the left, a sticky header with a heading and actions across the top, the page content in the centre, a sticky footer along the bottom, and a push drawer on the right.]({withBase("/images/examples/workspace-layout-diagram.png")})
+
+### Work side menu
+
+The main navigation for the workspace, built with a [work side menu](/components/work-side-menu). It stays in place while the content scrolls. On narrow screens it hides and opens from the mobile hamburger menu.
+
+### Sticky header
+
+A header pinned to the top while the content scrolls. Use it for the page title, key actions, or a toolbar. A soft shadow appears under it once content scrolls past, so people can tell there is more above. It can also collapse as people scroll down.
+
+### Page content
+
+Your page content. The layout wraps it in a scrollable card and handles the spacing, so the header and footer stay in place while this area scrolls.
+
+### Sticky footer
+
+A footer pinned to the bottom while the content scrolls. Use it for a summary or contextual actions that should stay reachable, such as a bulk action bar that appears once rows are selected.
+
+### Push drawer
+
+An optional drawer that opens beside the page content instead of over it. Unlike a modal drawer, it narrows the content rather than covering it, so people can still interact with the main page content while the drawer is open.
+
+### Mobile hamburger menu
+
+At narrow screen widths the side menu hides to save space, and the layout adds a hamburger button that opens it. This comes with the layout, you do not wire it up yourself.
diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
index c457369e3b..24c72ec8f0 100644
--- a/docs/src/content/config.ts
+++ b/docs/src/content/config.ts
@@ -33,6 +33,9 @@ const components = defineCollection({
// Visibility
hidden: z.boolean().optional(), // Hide from navigation and public views
subcomponent: z.boolean().optional(), // Show API on parent component page
+ hideTabs: z
+ .array(z.enum(["examples", "usage", "accessibility"]))
+ .optional(), // Hide specific tabs on this component's page
}),
});
@@ -275,6 +278,7 @@ const getStarted = defineCollection({
"ai-tools-and-resources",
"contribute",
"out-of-support",
+ "articles",
]),
// Sort order within section.
order: z.number(),
diff --git a/docs/src/content/examples/show-number-of-results-per-page/angular.html b/docs/src/content/examples/show-number-of-results-per-page/angular.html
index 145e81ef24..678fe3845b 100644
--- a/docs/src/content/examples/show-number-of-results-per-page/angular.html
+++ b/docs/src/content/examples/show-number-of-results-per-page/angular.html
@@ -24,6 +24,7 @@
(onChange)="handlePerPageCountChangeEvent($event)"
[value]="perPage.toString()"
width="9ch"
+ size="compact"
>
@@ -161,7 +161,7 @@ Keep top-level navigation focused on the main areas of work. When a user opens a
### Sticky action bar
-A scroll-aware header that pins to the top of the content area as the user scrolls. Use it to keep the most important tools visible.
+A scroll-aware header that pins to the top of the content area as the user scrolls. Use it to keep the most important tools visible. The [workspace layout](/components/workspace-layout) provides this as its sticky page header.
Set the content for each page based on the task:
@@ -171,14 +171,14 @@ Set the content for each page based on the task:
Do not pin everything. Keep only the information and actions people need to continue their work without losing context.
### Push drawer
-Use a [push drawer](/components/push-drawer) for focused work that should happen without leaving the current page.
+Use a [push drawer](/components/push-drawer) for focused work that should happen without leaving the current page. The [workspace layout](/components/workspace-layout) hosts this as a push drawer that narrows the main card rather than overlaying it.
This works well for actions such as:
@@ -190,7 +190,7 @@ This works well for actions such as:
Use it when users need to keep the main record in view while completing the task.
@@ -201,12 +201,12 @@ Use it when users need to keep the main record in view while completing the task
Workspace patterns are supported by component features designed for denser, more productive interfaces:
-- **Compact inputs.** Every input component now has a `compact` variant that reduces height and spacing. This lets you build tighter forms and toolbars without sacrificing usability.
-- **Compact badges and notifications.** [Badges](/components/badge) and [notification banners](/components/notification) also have compact sizing to fit within dense data views and action bars.
-- **Badge variants.** [Badges](/components/badge) now include `strong` and `subtle` emphasis options, giving you control over visual weight depending on context.
-- **Data grid.** The [data grid](/components/data-grid) works with the table component to support accessible, keyboard-navigable data views. Use them together when the user needs to move through records efficiently without relying on a mouse.
-- **Segmented tabs.** A new [tab](/components/tab) variant that works as a segmented toggle for switching between views or modes within a workspace, rather than navigating between pages.
-- **Enhanced filter chips.** [Filter chips](/components/filter-chip) now support secondary text and secondary icons, making them more useful for richer filtering in workspace data views.
+- **Compact inputs:** Every input component now has a `compact` variant that reduces height and spacing. This lets you build tighter forms and toolbars without sacrificing usability.
+- **Compact badges and notifications:** [Badges](/components/badge) and [notification banners](/components/notification) also have compact sizing to fit within dense data views and action bars.
+- **Badge variants:** [Badges](/components/badge) now include `strong` and `subtle` emphasis options, giving you control over visual weight depending on context.
+- **Data grid:** The [data grid](/components/data-grid) works with the table component to support accessible, keyboard-navigable data views. Use them together when the user needs to move through records efficiently without relying on a mouse.
+- **Segmented tabs:** A new [tab](/components/tab) variant that works as a segmented toggle for switching between views or modes within a workspace, rather than navigating between pages.
+- **Enhanced filter chips:** [Filter chips](/components/filter-chip) now support secondary text and secondary icons, making them more useful for richer filtering in workspace data views.
---
@@ -227,7 +227,7 @@ Use the workspace when your service needs to support regular, task-based work, s
## When not to use
-- Citizen-facing services. Use the [public form](/examples/public-form) pattern instead.
+- Public facing applications or forms. Use the [public form](/examples/public-form) pattern instead.
- Content-only pages that do not involve case management.
- Simple internal tools that do not need structured case processing.
@@ -251,12 +251,3 @@ Use one of the workspace templates as a starting point for your service. Each te
description="GitHub template for building a workspace with Angular"
/>