feat(#3580): push drawer V2 styling and dynamic edge behavior by twjeffery · Pull Request #3578 · GovAlta/ui-components

twjeffery · 2026-03-14T16:02:21Z

Summary

V2 visual styling: heading-s, flex-based header/footer pinning, scroll-aware border + shadow indicators
Floating inset margin using --goa-drawer-offset token, border color greyscale-150
Dynamic edge transitions: visible edges get offset + rounded corners, scrolled edges go flush + square with 200ms ease transitions
20px scroll hysteresis prevents jitter at boundaries
Heading shrinks from heading-s to heading-xs when top is flush (scrolled)
V1 rendering completely unchanged
Test page updated to app-shell layout matching real workspace usage

Closes #3580

Screen.Recording.2026-03-14.at.10.28.03.AM.mov

Test plan

npm run build passes
npm run test:pr passes
Open V2 push drawer in feat2469 test page, add content until it overflows
Scroll within drawer: header/footer pin, content scrolls between them
Verify dynamic edges: top floating at start, both flush in middle, bottom floating at end
Transitions are smooth, no jitter at scroll boundaries
V1 push drawer (bottom section) renders identically to before

netlify · 2026-03-14T16:02:28Z

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	`72b94bd`
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/69bc236d6dc4a9000705f73e
😎 Deploy Preview	https://deploy-preview-3578--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte

chrisolsen · 2026-03-19T22:22:39Z

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte

+      if (target.scrollTop == 0) {
+        _scrollPos = "top";
+      } else if (
+        Math.abs(target.scrollHeight - target.scrollTop - target.offsetHeight) <


Would be nice to have a declared var here to know the expression represents.

chrisolsen · 2026-03-19T22:25:04Z

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte

  export let heading: string = "";
  export let width: string = "492px";
-  export let version: string | undefined = undefined;
+  type VersionType = "1" | "2";


It is nice to keep type declarations together. They should be below the import statements to follow the convention used throughout the code.

chrisolsen · 2026-03-19T22:25:52Z

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte

  export let width: string = "492px";
-  export let version: string | undefined = undefined;
+  type VersionType = "1" | "2";
+  const [Version, validateVersion] = typeValidator("Version", ["1", "2"]);


Move this const out lf all the export statements.

chrisolsen · 2026-03-19T22:27:18Z

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte

-  async function checkActionsSlotContent() {
-    await tick();
-    _actionsSlotHasContent = !!$$slots.actions;
+  function checkActionsSlotContent() {


This function should be moved into where the other functions are (I can see that it was here to start with though)

Could you also move the let statements above to line ~28, where the other lets are.

This function just needs to be moved down after the reactive $: blocks..we can leave it for now.

chrisolsen · 2026-03-19T22:37:40Z

libs/web-components/src/components/push-drawer/PushDrawerInternal.spec.ts

+      });
+
+      const drawer = result.getByTestId("test-drawer");
+      expect(drawer).toHaveClass("v2");


To better ensure the tests pass, like some of the other tests in this file, the expect should be wrapped in a waitFor, the same is true for line :161

twjeffery · 2026-03-23T15:27:28Z

@chrisolsen Addressed all the feedback. Grouped types, moved the const and lets, added named variables for the scroll checks, and wrapped the test assertions in waitFor. Ready for another look when you get a chance.

chrisolsen · 2026-03-23T17:03:02Z

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte

-  async function checkActionsSlotContent() {
-    await tick();
-    _actionsSlotHasContent = !!$$slots.actions;
+  function checkActionsSlotContent() {


This function just needs to be moved down after the reactive $: blocks..we can leave it for now.

chrisolsen · 2026-03-23T17:04:41Z

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte

+
+  // Hysteresis threshold: prevents jitter when dynamic edge margin/height
+  // changes shift the scroll position slightly at boundaries.
+  const SCROLL_HYSTERESIS = 20;


Having a component level constant that is only used within one function makes more sense to just move this constant into the function, otherwise I am looking around for where else it is used, as with the other comment this can be left as is for now.

ah ok, good to know. Thanks.

V2 visual updates for PushDrawerInternal: - Heading-s (shrinks to heading-xs on scroll) - Flex-based header/footer pinning with scroll-aware borders and shadows - Floating inset margin using --goa-drawer-offset token - Border color greyscale-150 - Dynamic edge transitions: visible edges get offset + rounded corners, scrolled edges go flush + square. 200ms ease transitions. - 20px scroll hysteresis prevents jitter at boundaries - Version prop validated with typeValidator matching Drawer.svelte - V2 unit tests added (5 tests) - Empty actions detection via slot assignedElements - Conditional actions span wrapper in PushDrawer.svelte - V1 rendering completely unchanged Test page updated to app-shell layout matching real-world usage.

twjeffery · 2026-03-23T19:54:31Z

@chrisolsen conflicts resolved now, ready to merge

chrisolsen · 2026-03-23T21:02:41Z

🎉 This PR is included in version 1.41.0-dev.24 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

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

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-23T21:51:24Z

🎉 This PR is included in version 6.11.0-dev.16 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-23T21:52:00Z

🎉 This PR is included in version 4.11.0-dev.17 🎉

The release is available on:

Your semantic-release bot 📦🚀

twjeffery mentioned this pull request Mar 14, 2026

Push drawer V2 styling and dynamic edge behavior #3580

Closed

twjeffery changed the title ~~feat(#2469): push drawer V2 styling and dynamic edge behavior~~ feat(#3580): push drawer V2 styling and dynamic edge behavior Mar 14, 2026

twjeffery linked an issue Mar 14, 2026 that may be closed by this pull request

Push drawer V2 styling and dynamic edge behavior #3580

Closed

twjeffery force-pushed the tom/push-drawer-v2-styling branch from 28c6d4a to 062c758 Compare March 14, 2026 16:26

twjeffery force-pushed the tom/push-drawer-wrappers branch from 24310ae to 61d1535 Compare March 14, 2026 17:32

twjeffery force-pushed the tom/push-drawer-v2-styling branch from 062c758 to 117cb7e Compare March 14, 2026 17:32

twjeffery force-pushed the tom/push-drawer-wrappers branch from 61d1535 to 4a603de Compare March 14, 2026 18:31

twjeffery force-pushed the tom/push-drawer-v2-styling branch from 117cb7e to 03acc1a Compare March 14, 2026 18:31

twjeffery requested a review from ArakTaiRoth March 14, 2026 18:40

ArakTaiRoth reviewed Mar 16, 2026

View reviewed changes

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte Outdated Show resolved Hide resolved

libs/web-components/src/components/push-drawer/PushDrawerInternal.svelte Show resolved Hide resolved

twjeffery force-pushed the tom/push-drawer-wrappers branch from 4a603de to a452848 Compare March 17, 2026 17:44

twjeffery mentioned this pull request Mar 17, 2026

feat(#3579): add push drawer experimental wrappers #3577

Merged

5 tasks

twjeffery force-pushed the tom/push-drawer-wrappers branch 3 times, most recently from 045dee9 to 8681365 Compare March 18, 2026 16:27

Base automatically changed from tom/push-drawer-wrappers to dev March 18, 2026 18:56

twjeffery force-pushed the tom/push-drawer-v2-styling branch 3 times, most recently from 87a4bf7 to 72b94bd Compare March 19, 2026 16:25

twjeffery requested a review from ArakTaiRoth March 19, 2026 17:45

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

ArakTaiRoth approved these changes Mar 19, 2026

View reviewed changes

ArakTaiRoth requested a review from chrisolsen March 19, 2026 19:49

chrisolsen reviewed Mar 19, 2026

View reviewed changes

twjeffery force-pushed the tom/push-drawer-v2-styling branch from 72b94bd to f18ff47 Compare March 23, 2026 15:22

twjeffery requested a review from chrisolsen March 23, 2026 15:27

chrisolsen approved these changes Mar 23, 2026

View reviewed changes

twjeffery force-pushed the tom/push-drawer-v2-styling branch from f18ff47 to dd3d498 Compare March 23, 2026 19:48

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

chrisolsen deleted the tom/push-drawer-v2-styling branch March 23, 2026 19:58

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

Conversation

twjeffery commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

netlify bot commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for goa-design-2 ready!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

twjeffery commented Mar 23, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

twjeffery commented Mar 23, 2026

Uh oh!

Uh oh!

chrisolsen commented Mar 23, 2026

Uh oh!

chrisolsen commented Mar 23, 2026

Uh oh!

chrisolsen commented Mar 23, 2026

Uh oh!

chrisolsen commented Mar 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

twjeffery commented Mar 14, 2026 •

edited

Loading

netlify bot commented Mar 14, 2026 •

edited

Loading