@brightspace-ui/core 2.63.0 → 2.64.0

package/components/demo/demo-snippet.js

@@ -1,6 +1,8 @@
 import './code-view.js';
-import '../button/button-icon.js';
+import '../button/button-subtle.js';
 import '../switch/switch.js';
+import '../dropdown/dropdown.js';
+import '../dropdown/dropdown-content.js';
 import { css, html, LitElement } from 'lit';
 
 class DemoSnippet extends LitElement {
@@ -8,13 +10,14 @@ class DemoSnippet extends LitElement {
 	static get properties() {
 		return {
 			codeViewHidden: { type: Boolean, reflect: true, attribute: 'code-view-hidden' },
-			fullWidth: { type: Boolean, reflect: true },
+			fullWidth: { type: Boolean, reflect: true, attribute: 'full-width' },
 			noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
 			overflowHidden: { type: Boolean, reflect: true, attribute: 'overflow-hidden' },
 			_code: { type: String },
 			_dir: { type: String, attribute: false },
 			_fullscreen: { state: true },
 			_hasSkeleton: { type: Boolean, attribute: false },
+			_settingsPeek: { state: true },
 			_skeletonOn: { type: Boolean, reflect: false }
 		};
 	}
@@ -40,14 +43,18 @@ class DemoSnippet extends LitElement {
 			}
 			.d2l-demo-snippet-demo-wrapper.fullscreen {
 				background-color: white;
+				height: fit-content;
 				inset: 0;
-				overflow: auto;
-				position: fixed;
+				position: absolute;
 				z-index: 2;
 			}
 			.d2l-demo-snippet-demo {
 				flex: 1 1 auto;
 				position: relative;
+				translate: 0; /* create stacking context to prevent demos from leaking outside their containers */
+			}
+			:host([full-width]) .d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo {
+				width: 100vw;
 			}
 			:host([overflow-hidden]) .d2l-demo-snippet-demo {
 				overflow: hidden;
@@ -68,6 +75,27 @@ class DemoSnippet extends LitElement {
 				position: sticky;
 				top: 0;
 			}
+			d2l-dropdown.settings-dropdown {
+				background-color: white;
+				border-radius: 6px;
+				box-shadow: 0 0 0 1px var(--d2l-color-celestine-minus-1);
+				position: fixed;
+				right: 1rem;
+				top: -0.25rem;
+				translate: 0 -1.5rem;
+			}
+			@media (prefers-reduced-motion: no-preference) {
+				d2l-dropdown.settings-dropdown {
+					transition: translate 0.15s, box-shadow 0.15s;
+				}
+			}
+			d2l-dropdown.settings-dropdown.peek,
+			d2l-dropdown.settings-dropdown:hover,
+			d2l-dropdown.settings-dropdown:focus-within,
+			d2l-dropdown.settings-dropdown:has(d2l-button-subtle[active]) {
+				box-shadow: 0 -1px 0 1px white;
+				translate: 0;
+			}
 			d2l-code-view {
 				border: none;
 				border-top-left-radius: 0;
@@ -78,7 +106,7 @@ class DemoSnippet extends LitElement {
 			:host([code-view-hidden]) d2l-code-view {
 				display: none;
 			}
-		`;
+`;
 	}
 
 	constructor() {
@@ -97,6 +125,16 @@ class DemoSnippet extends LitElement {
 	render() {
 		const dirAttr = this._dir === 'rtl' ? 'rtl' : 'ltr';
 		const skeleton = this._hasSkeleton ? html`<d2l-switch text="Skeleton" ?on="${this._skeletonOn}" @change="${this._handleSkeletonChange}"></d2l-switch>` : null;
+		const switches = html`
+			<d2l-switch text="RTL" ?on="${dirAttr === 'rtl'}" @change="${this._handleDirChange}"></d2l-switch><br />
+			<d2l-switch text="Fullscreen" ?on="${this._fullscreen}" @change="${this._handleFullscreenChange}"></d2l-switch><br />
+			${skeleton}`;
+		const settings = this.fullWidth && this._fullscreen ? html`
+			<d2l-dropdown class="settings-dropdown ${this._settingsPeek ? 'peek' : ''}">
+				<d2l-button-subtle primary icon="tier1:gear" text="Settings" class="d2l-dropdown-opener"></d2l-button-subtle>
+				<d2l-dropdown-content>${switches}</d2l-dropdown-content>
+			</d2l-dropdown>` : html`<div class="d2l-demo-snippet-settings">${switches}</div>`;
+
 		return html`
 			<div class="d2l-demo-snippet-demo-wrapper ${this._fullscreen ? 'fullscreen' : ''}">
 				<div class="d2l-demo-snippet-demo" dir="${dirAttr}">
@@ -105,11 +143,7 @@ class DemoSnippet extends LitElement {
 						<slot></slot>
 					</div>
 				</div>
-				<div class="d2l-demo-snippet-settings">
-					<d2l-switch text="RTL" ?on="${dirAttr === 'rtl'}" @change="${this._handleDirChange}"></d2l-switch><br />
-					<d2l-switch text="Fullscreen" ?on="${this._fullscreen}" @change="${this._handleFullscreenChange}"></d2l-switch><br />
-					${skeleton}
-				</div>
+				${settings}
 			</div>
 			<d2l-code-view language="html" hide-language>${this._code}</d2l-code-view>
 		`;
@@ -201,10 +235,14 @@ class DemoSnippet extends LitElement {
 		this._applyAttr('dir', this._dir, true);
 	}
 
-	_handleFullscreenChange(e) {
+	async _handleFullscreenChange(e) {
 		this._fullscreen = e.target.on;
+		this._settingsPeek = this._fullscreen;
 		const event = new CustomEvent('d2l-demo-snippet-fullscreen-toggle', { bubbles: true, composed: true });
 		this.dispatchEvent(event);
+		await this.updateComplete;
+		await new Promise(r => setTimeout(r, 1000));
+		this._settingsPeek = false;
 	}
 
 	_handleSkeletonChange(e) {

package/custom-elements.json

@@ -1436,7 +1436,7 @@
           "type": "boolean"
         },
         {
-          "name": "fullWidth",
+          "name": "full-width",
           "type": "boolean",
           "default": "false"
         }
@@ -1459,7 +1459,7 @@
         },
         {
           "name": "fullWidth",
-          "attribute": "fullWidth",
+          "attribute": "full-width",
           "type": "boolean",
           "default": "false"
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.63.0",
+  "version": "2.64.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",