GAUD-9165 - Implement the d2l-page skeleton by svanherk · Pull Request #6904 · BrightspaceUI/core

svanherk · 2026-05-01T22:02:20Z

This adds d2l-page with the discussed slots. It uses the full body scroll demonstrated in #6875. The demo page is bare bones and will be fleshed out in the next PR.

Still tweaking a bit, experimenting with what we want vdiffs to look like, etc. but this should be good to go. Will add notes inline. I still want to give this one more go-through but I've been looking at it too long - will check Monday with fresh eyes.

github-actions · 2026-05-01T22:04:01Z

Thanks for the PR! 🎉

We've deployed an automatic preview for this PR - you can see your changes here:

URL	https://live.d2l.dev/prs/BrightspaceUI/core/pr-6904/

Note

The build needs to finish before your changes are deployed.
Changes to the PR will automatically update the instance.

svanherk · 2026-05-01T22:05:07Z

+class PageDemo extends LitElement {
+
+	static properties = {
+		demoMode: { type: Boolean, attribute: 'demo-mode' },


Was thinking I could also use this component for vdiff, so this is a bit heavy (being able to set controls with the switches and by a consumer, and hide the switches to look better in the vdiff. We can simplify this if that doesn't end up happening.

svanherk · 2026-05-01T22:06:42Z

+
+	constructor() {
+		super();
+		this._allowThreePanels = false; // Temp for dev/testing


This is really handy for dev, but will go away if we aren't supporting it. Likewise, we need to decide what happens if people try to use both - throw an error? Simply hide the supporting panel? Something else?

Made a story to come back to this question: https://desire2learn.atlassian.net/browse/GAUD-9885

svanherk · 2026-05-01T22:08:29Z

+
+	#renderSideNavPanel() {
+		return this.hasSideNavPanel ? html`
+			<div style="background-color: lavender; height: 1000px;" slot="side-nav">


Colours here are temporary until the layout components are added and the demo is more fleshed out. Just thought it looked nice.

svanherk · 2026-05-01T22:12:22Z

This whole file will go away - once the navigation pieces are in core, we can use them directly in #renderFullNav and #renderImmersiveNav and just add a few of these extra styles in page-component directly.

Disclaimer: I told Copilot to create these navs and then I updated them to use the CSS properties that the official nav pieces will use - didn't review the other temporary styles very closely.

svanherk · 2026-05-01T22:14:16Z

Still planning the tests and vdiffs, in coordination with the layout stuff

svanherk · 2026-05-01T22:16:12Z

+			--d2l-page-header-max-width: 1230px;
+			--d2l-page-content-max-width: 1230px;
+			--d2l-page-footer-max-width: 1230px;
+			--d2l-page-margin-inline: auto;


This can maybe go away if we're not doing fancy nav stuff at different widths - we should revisit with the official nav stuff.

svanherk · 2026-05-01T22:17:28Z

+
+		main {
+			flex: 1;
+			min-width: 400px; /* TBD */


Open design question on whether this should be 400px or 600px, plus this will likely all adjust as panels start opening/closing/resizing. Kinda just a placeholder for now.

You may want this min-width on the <div class="page"> actually. Otherwise if this panel requires horizontal scrolling, the nav & footer won't fill the full width:

Interesting! I'll move it there for now, and then I think a lot of this logic is gonna have to be baked into the divider stuff anyways.

Actually, just made this a bit more resilient and made the nav a bit more wrappy. I still think it'll eventually change, but it's the main panel that design specifically doesn't want sized smaller than 400px by the side panels. But then of course, if the page is smaller than that it'll need to adapt

svanherk · 2026-05-01T22:21:11Z

+		//this._headerIsSticky = nodes.some(node => node.tagName.toLowerCase() === 'd2l-page-header-immersive');
+		this._headerIsSticky = nodes.some(node => node.id === 'immersive-nav'); // temp until the official component exists


Open question on how we want to do this. I figured we'd just look for the actual component name so consumers can't easily set something and work around our choice (that full nav scrolls and immersive nav sticks). But maybe we want something more generic/flexible, and we have immersive-nav sprout a data attribute that this can look for?

My initial thought for solving this was to have the header dispatch an event with information in the detail that indicates what it would prefer. The page could also add stuff to that event detail if we needed cross-component communication.

But this also works for the time being!

Yeah I feel like you'll naturally revisit this with immersive-nav and we can test out what works best

svanherk · 2026-05-01T22:25:54Z

+	#handleSlotVisibilityChange(e) {
+		const key = e.target.name;
+		const nodes = e.target.assignedNodes();
+		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
+		this.requestUpdate();
+	}


I did this when I was looking for like 8 slots and hiding/showing them accordingly, but now there's only three (footer, side-nav, supporting) so this might be overkill. But also, may became relevant in the d2l-page-main components (header, breadcrumbs, etc.) 🤷‍♀️ - thoughts?

Yeah at first I was going to add a comment about how just having a few state properties would be easier to understand... but this is pretty elegant in terms of only needing a single slot change handler so I'm on the fence.

svanherk · 2026-05-01T22:28:07Z

+	}
+
+	#renderFloatingButtons(footerContents) {
+		// Floating buttons needs to be wrapped as it spawns a sibling element that should be cleaned up as one by Lit


This might not be an actual problem, because people shouldn't be changing their number of panels and footer type on the fly in their page like the demo page is. But it was infuriating and the lit-html error it caused was incredibly vague, and I'd like to handle it. May have also come up when handling the mobile view switching.

Floating buttons are the (second) worst.

svanherk · 2026-05-01T22:46:03Z

Looks like collapsible-panel has a z-index of 11, and is covering the sticky nav.

primary-secondary set the header to a z-index of 14, but was hoping to avoid that. I'll play around.

svanherk · 2026-05-04T18:51:00Z

Looks like collapsible-panel has a z-index of 11, and is covering the sticky nav.

primary-secondary set the header to a z-index of 14, but was hoping to avoid that. I'll play around.

Ok, I have a simple z-index setup and stacking contexts to avoid this. The collapsible-panel sticks behind the immersive navbar, but I'll handle that in a separate PR.

svanherk · 2026-05-04T19:37:41Z

+		main {
+			flex: 1;
+			min-width: 400px; /* TBD */
+			overflow: clip;


Not actually sure what overflow behaviour we want - clip so there's no way for the panels to overflow onto each other, and people need to make sure their content is responsive? Scroll? Default to one of these as the host style of the d2l-page-main, d2l-page-side-nav, etc. but have it overridable?

I'm also not sure. I think we'd want auto instead of scroll since that puts the browser in control of whether scrollbars are visible.

My vote would be to leave it unset for main but clip auto for the nav/supporting.

This will make things overflow for now, until we add the padding, because a lot of our components expand outside their bounds for hover styles

dlockhart · 2026-05-05T17:11:53Z

+	#handleAllowThreePanelsChange(e) {
+		this._allowThreePanels = e.target.on;
+		if (!this._allowThreePanels && this.hasSideNavPanel && this.hasSupportingPanel) {
+			this.shadowRoot.querySelector('#switch-supporting-panel').on = false;


This violates render() being a function of the properties. Setting this._allowThreePanels should trigger a re-render anyway -- can the on boolean just be calculated and set from there?

dlockhart · 2026-05-05T17:14:50Z

+
+		if (this._allowThreePanels) return;
+		if (e.target.on && key === 'hasSideNavPanel' && this.hasSupportingPanel) {
+			this.shadowRoot.querySelector('#switch-supporting-panel').on = false;


Similar comment here (and just below).

Fair, I think I did it here to be able to easily mass delete it at some point, but I can try moving it right into render

dlockhart · 2026-05-05T17:16:00Z

+					<div class="full-nav-header-right">
+						<button class="nav-icon-btn" title="Alerts">🔔</button>
+						<button class="nav-icon-btn" title="Settings">⚙️</button>
+						<button class="nav-icon-btn" title="Profile">👤</button>


These are lovely! We should use them in the real nav. 😆

dlockhart · 2026-05-05T17:18:13Z

+
+	#renderMainPanel() {
+		return html`
+			<div style="height: 1000px;">


Looks like the height got removed in a follow-up PR, but is this <div> even needed?

Was basically using it to test scroll and as a placeholder for the d2l-page-main, although then I added the end content piece so it's not perfect. It will be gone by the end of the PR chain 😅

dlockhart · 2026-05-05T21:01:17Z

+		const footer = html`
+			<div class="${classMap(footerContainerClasses)}" ?hidden="${!this._slotVisibility['footer']}">
+				${fixedFooter ? footerContents : this.#renderFloatingButtons(footerContents)}	
+			</div>`;


I'd be tempted to put all these inside #renderFooter(), #renderSupporting(), etc. as they're only going to get more complex from here. But that can also wait!

dlockhart · 2026-05-05T21:03:30Z

+		//this._headerIsSticky = nodes.some(node => node.tagName.toLowerCase() === 'd2l-page-header-immersive');
+		this._headerIsSticky = nodes.some(node => node.id === 'immersive-nav'); // temp until the official component exists


My initial thought for solving this was to have the header dispatch an event with information in the detail that indicates what it would prefer. The page could also add stuff to that event detail if we needed cross-component communication.

But this also works for the time being!

dlockhart · 2026-05-05T21:05:23Z

+	#handleSlotVisibilityChange(e) {
+		const key = e.target.name;
+		const nodes = e.target.assignedNodes();
+		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
+		this.requestUpdate();
+	}


Yeah at first I was going to add a comment about how just having a few state properties would be easier to understand... but this is pretty elegant in terms of only needing a single slot change handler so I'm on the fence.

dlockhart · 2026-05-05T21:06:30Z

+	}
+
+	#renderFloatingButtons(footerContents) {
+		// Floating buttons needs to be wrapped as it spawns a sibling element that should be cleaned up as one by Lit


Floating buttons are the (second) worst.

…ed yet

This reverts commit 551d5c7.

Co-authored-by: Dave Lockhart <dlockhart@users.noreply.github.com>

dlockhart

Obviously lots going to change, but I think this is in good enough shape to merge if you want to!

svanherk · 2026-05-06T13:39:29Z

+		.page.header-sticky .header {
+			position: sticky;
+			top: 0;
+			z-index: 15; /* To be over sticky content of our core components */


This doesn't need to be 15, and the below doesn't need to be 10 - this is in the spirit of saving some room. I made a story about lowering collapsible-panel - if that is done, I think this could get down to like 7 or 8. But maybe we want a chart to keep track somewhere? It's currently something like:

Table sticky heads = 4

Scroll-wrapper = 5

Table and List controls = 6

Footer = 10 (Collapsible panels won't be sticky over the footer, unless the page is like 50px high)

Collapsible-panel = 11 (Probably can be much lower now)

Header = 15 (Can be lower)

Floating buttons, popover stuff, dialog, toast alerts = 997+

(Probably not perfect, going off memory of a few days ago)

svanherk · 2026-05-06T13:53:18Z

Obviously lots going to change, but I think this is in good enough shape to merge if you want to!

Yeah I think it's all very adjustable as we flesh out more pieces, but getting it in would be very helpful for the PR chain!

d2l-github-release-tokens · 2026-05-06T17:27:11Z

🎉 This PR is included in version 3.241.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

GAUD-9165 - Implement the d2l-page skeleton

7f3dfc8

svanherk commented May 1, 2026

View reviewed changes

Linting fixes

5994bb7

Stacking context adjustments

4c09b8b

svanherk marked this pull request as ready for review May 4, 2026 18:54

svanherk requested a review from a team as a code owner May 4, 2026 18:54

svanherk commented May 4, 2026

View reviewed changes

dlockhart reviewed May 5, 2026

View reviewed changes

svanherk and others added 14 commits May 5, 2026 17:34

Move background to nav

3d988db

Remove stacking contexts and any z-index values not proven to be need…

afe40b1

…ed yet

Unset overflow for main

cb0fe91

Better min behaviour for now

b1eb358

Add demo title

398112c

Cleanup demo controls

7bb5ab3

Set --d2l-page-header-height to 0 when header is not sticky

59495f8

requestUpdate not needed since we're replacing the object

d04f7d6

Move observe to connectedCallback

551d5c7

Pull render pieces out into their own functions

93af9b4

Revert "Move observe to connectedCallback"

e66ae71

This reverts commit 551d5c7.

Save padding for the d2l-page-footer component

919577e

Adjust description

d609d92

Co-authored-by: Dave Lockhart <dlockhart@users.noreply.github.com>

Re-arrange demo to make cleaner next PR

20a6859

github-actions Bot mentioned this pull request May 6, 2026

Updating vdiff goldens for PR 6904 #6921

Closed

Footer needs z-index

c86d890

dlockhart approved these changes May 6, 2026

View reviewed changes

Add colors import, remove empty constructor

1a92393

svanherk commented May 6, 2026

View reviewed changes

svanherk merged commit c6810a5 into main May 6, 2026
9 checks passed

svanherk deleted the GAUD-9165-Implement-the-d2l-page-skeleton branch May 6, 2026 17:25

d2l-github-release-tokens Bot added the released label May 6, 2026

svanherk mentioned this pull request May 6, 2026

GAUD-9843 - Skeleton of the panel mixin and the three components #6928

Merged

		//this._headerIsSticky = nodes.some(node => node.tagName.toLowerCase() === 'd2l-page-header-immersive');
		this._headerIsSticky = nodes.some(node => node.id === 'immersive-nav'); // temp until the official component exists

Conversation

svanherk commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 1, 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!

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!

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!

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!

svanherk commented May 1, 2026

Uh oh!

svanherk commented May 4, 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!

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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

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!

dlockhart left a comment

Choose a reason for hiding this comment

Uh oh!

svanherk May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

svanherk commented May 1, 2026 •

edited

Loading

svanherk May 6, 2026 •

edited

Loading