feat(#3347): add goa-scroll-panel and goa-workspace-layout by vanessatran-ddi · Pull Request #3933 · GovAlta/ui-components

vanessatran-ddi · 2026-05-12T17:03:18Z

Before (the change)

After (the change)

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

https://govalta.github.io/ui-components/pr-preview/pr-3933/examples/workspace-layout/
https://govalta.github.io/ui-components/pr-preview/pr-3933/components/scroll-panel/#react#properties

React Links:
https://govalta.github.io/ui-components/pr-preview-react/pr-3933/features/3347
https://govalta.github.io/ui-components/pr-preview-react/pr-3933/features/3347-push

Angular Links:
https://govalta.github.io/ui-components/pr-preview-angular/pr-3933/features/3347-push
https://govalta.github.io/ui-components/pr-preview-angular/pr-3933/features/3347

chrisolsen · 2026-05-12T18:11:07Z

🎉 This PR is included in version 7.2.0-dev.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-05-12T18:11:52Z

🎉 This PR is included in version 5.2.0-dev.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions · 2026-05-12T22:31:10Z

PR Preview Action v1.8.1
🚀 View preview at https://GovAlta.github.io/ui-components/pr-preview-angular/pr-3933/
Built to branch `gh-pages` at 2026-06-19 23:01 UTC. Preview will be ready when the GitHub Pages deployment is complete.

github-actions · 2026-05-12T22:31:29Z

Preview links

Target	URL
Docs	https://govalta.github.io/ui-components/pr-preview/pr-3933/
React playground	https://govalta.github.io/ui-components/pr-preview-react/pr-3933/
Angular playground	https://govalta.github.io/ui-components/pr-preview-angular/pr-3933/

Built from commit 285b578. Previews are removed automatically when this PR closes.

Spark450 · 2026-06-04T17:22:33Z

Here is some feedback on the docs pages, thanks for sharing @twjeffery:
Workspace example

The "card" data view image seems show the tab in an "in between" state

Workspace layout

On the workspace layout page, when talking about the push drawer I think the point of emphasis we should make about it vs the modal drawer is that the user can still interact with the page content when the drawer is open. something like: (...so users can still interact with the main page content.)
For the considerations Assuming we update the our React and Angular examples would it make sense to add a point that lets the user know if they use the template as a starting point it comes included with the base functionality wired up? This may be super obvious and not worth mentioning though...

vanessatran-ddi · 2026-06-17T22:19:11Z

-      margin: var(--goa-modal-content-margin, 0 -2rem);
-      padding: var(--goa-modal-content-padding, 0);
+      margin: 0;
+      padding: 0 var(--goa-modal-scrollable-padding-desktop, var(--goa-space-l));


@twjeffery and @bdfranck I also have a PR on https://github.com/GovAlta/design-tokens/pull/162/commits
Since I replace the goa-scroll to goa-scroll-panel, I need to adjust the padding og the modal action to make it better, example below: https://govalta.github.io/ui-components/pr-preview-react/pr-3933/features/3347

vanessatran-ddi · 2026-06-17T22:19:56Z

+     overflow:hidden clips any side bleed at the edge. */
+  .scroll-panel-header--shadow {
+    border-bottom-color: var(
+      --goa-scroll-panel-header-scroll-border,


I have this PR GovAlta/design-tokens@78c5311 to support those tokens

ArakTaiRoth · 2026-06-17T23:57:05Z

@vanessatran-ddi @twjeffery I noticed that there's no component documentation for Workspace Layout. There's an example, but nothing in components. This could be an issue:

It is a component, people are going to look for it in Components
The MCP won't be able to give proper advice on how to use it as there's no properties or anything, as there's no component level documentation

ArakTaiRoth · 2026-06-18T00:02:00Z

@vanessatran-ddi @twjeffery There's no image for the Scroll Panel in the All Components page.

ArakTaiRoth · 2026-06-18T00:36:47Z

+  // Hooks
+  // *****
+  onMount(() => {
+    if (!isValidDimension(height)) {


There's a potential problem here, in the docs it says height can be "Any valid CSS height value (e.g. "400px", "100%", "100vh")". This statement is incorrect. The function isValidDimension fails to account for calc(), dvh, lvh, or svh, min(), or clamp(). If I use a technical valid value out of that list, it does actually still work, but states a console error incorrectly. I don't think the option is to allow those values in isValidDimension, because that would require far more testing wherever that function is used, but maybe we be more clear about what values are allowed in the documentation.

In addition, if I use an actual invalid value for height, it still proceeds to try to create the ScrollPanel, the check doesn't actually stop anything. This results in an area in the screen that you can't actually scroll down or up in, it prevents page scrolling, and takes up the full height of the content.

I pushed a test at the bottom of the React feat3347.tsx that shows the second problem.

ArakTaiRoth · 2026-06-18T00:40:52Z

+  alt="Complete workspace layout preview"
+  previewUrl="/examples/workspace-layout/basic/preview"
+  figmaUrl="https://www.figma.com/design/Jpy1Ea5qglwnp1SgGnagY9/%E2%9D%96-Component-library?node-id=58855-102956"
+  reactSourceUrl="https://github.com/GovAlta/ui-components/blob/vanessa/3347-sticky-header-footer/docs/src/content/examples/workspace-layout/basic/react.tsx"


This URL and the URL below it will cease to exist once this PR is merged in (because that deletes the PR).

bdfranck

I tested the latest changes...

Browser	Drawer	Modal	Notification
Chrome	✅	✅	✅
Safari	✅	✅	✅
Firefox	✅	✅	✅
Safari mobile	✅	❓	✅

@vanessatran-ddi It looks like the padding is missing for a Modal on mobile. Or maybe I have the wrong tokens?

vanessatran-ddi self-assigned this May 12, 2026

vanessatran-ddi marked this pull request as draft May 12, 2026 17:03

vanessatran-ddi added the 2.0 label May 12, 2026

vanessatran-ddi linked an issue May 12, 2026 that may be closed by this pull request

Create reusable sticky header/footer component #3347

Open

vanessatran-ddi force-pushed the vanessa/3347-sticky-header-footer branch 2 times, most recently from a536960 to b2f5b69 Compare May 12, 2026 17:30

chrisolsen added the released on @dev label May 12, 2026

vanessatran-ddi force-pushed the vanessa/3347-sticky-header-footer branch from c85adcb to 5d075a5 Compare May 12, 2026 19:04

vanessatran-ddi changed the base branch from main to dev May 12, 2026 19:04

vanessatran-ddi removed the released on @dev label May 13, 2026

vanessatran-ddi changed the title ~~Vanessa/3347 sticky header footer~~ feat(#3347): add goa-scroll-panel and goa-workspace-layout May 14, 2026

vanessatran-ddi force-pushed the vanessa/3347-sticky-header-footer branch 2 times, most recently from d288449 to e4ad4d2 Compare May 19, 2026 22:28

twjeffery mentioned this pull request May 20, 2026

feat: dark mode shadow refinements GovAlta/design-tokens#160

Merged

vanessatran-ddi force-pushed the vanessa/3347-sticky-header-footer branch 5 times, most recently from ac9d303 to 38c4fdb Compare May 28, 2026 23:04

vanessatran-ddi marked this pull request as ready for review May 28, 2026 23:04

vanessatran-ddi requested review from Spark450 and twjeffery May 28, 2026 23:05

Spark450 mentioned this pull request Jun 3, 2026

Workspace template: update React and Angular examples to use new layout and scroll components #4008

Open

6 tasks

This was referenced Jun 5, 2026

feat(#3346): add horizontal scrolling to Scroll Panel #4000

Closed

Modal: Content clipping in scroll area and insufficient actions padding #3609

Open

vanessatran-ddi force-pushed the vanessa/3347-sticky-header-footer branch 3 times, most recently from b57fbc8 to c9de01b Compare June 16, 2026 23:33

feat(#3347): add workspace-layout and scroll panel components

aa138b4

vanessatran-ddi force-pushed the vanessa/3347-sticky-header-footer branch from c9de01b to aa138b4 Compare June 17, 2026 00:25

vanessatran-ddi requested review from ArakTaiRoth, bdfranck and willcodeforcoffee and removed request for willcodeforcoffee June 17, 2026 15:13

vanessatran-ddi commented Jun 17, 2026

View reviewed changes

ArakTaiRoth reviewed Jun 18, 2026

View reviewed changes

fix: preview link not updated

17bc7f1

ArakTaiRoth force-pushed the vanessa/3347-sticky-header-footer branch from 4dea910 to 17bc7f1 Compare June 18, 2026 00:38

ArakTaiRoth reviewed Jun 18, 2026

View reviewed changes

bdfranck reviewed Jun 18, 2026

View reviewed changes

twjeffery added 2 commits June 19, 2026 16:42

fix(#3347): scroll cue, sticky chrome, and Angular slot fixes

e5001b7

chore(#3347): update playground fixtures

285b578

Conversation

vanessatran-ddi commented May 12, 2026 • edited 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

Uh oh!

chrisolsen commented May 12, 2026

Uh oh!

chrisolsen commented May 12, 2026

Uh oh!

github-actions Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-06-19 23:01 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview links

Uh oh!

Spark450 commented Jun 4, 2026

Uh oh!

vanessatran-ddi Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

vanessatran-ddi Jun 17, 2026

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth commented Jun 17, 2026

Uh oh!

ArakTaiRoth commented Jun 18, 2026

Uh oh!

ArakTaiRoth Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth Jun 18, 2026 • 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 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

vanessatran-ddi commented May 12, 2026 •

edited

Loading

github-actions Bot commented May 12, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-06-19 23:01 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot commented May 12, 2026 •

edited

Loading

ArakTaiRoth Jun 18, 2026 •

edited

Loading