@brightspace-ui/core 2.65.0 → 2.66.0

package/README.md

@@ -94,6 +94,8 @@ Start a [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) that
 npm start
 ```
 
+D2L employees can also view the latest main-branch demos at https://brightspace-ui-core.d2l.dev/.
+
 ### Linting
 
 ```shell

package/components/demo/demo-page.js

@@ -3,8 +3,11 @@ import './code-view.js';
 import '../colors/colors.js';
 import '../typography/typography.js';
 import { css, html, LitElement } from 'lit';
+import { getDocumentLocaleSettings, supportedLocalesDetails } from '@brightspace-ui/intl/lib/common.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { heading2Styles } from '../typography/styles.js';
+import { inputLabelStyles } from '../inputs/input-label-styles.js';
+import { selectStyles } from '../inputs/input-select-styles.js';
 
 document.body.classList.add('d2l-typography');
 
@@ -27,7 +30,7 @@ class DemoPage extends LitElement {
 	}
 
 	static get styles() {
-		return [ heading2Styles, css`
+		return [ heading2Styles, inputLabelStyles, selectStyles, css`
 			:host {
 				background-color: var(--d2l-color-sylvite);
 				display: block;
@@ -38,8 +41,18 @@ class DemoPage extends LitElement {
 				overflow: hidden;
 				padding: 0;
 			}
+			header {
+				align-items: center;
+				display: flex;
+				margin-bottom: 1.5rem;
+				max-width: 900px;
+			}
 			.d2l-heading-2 {
-				margin-top: 0;
+				flex-grow: 1;
+				margin: 0;
+			}
+			.d2l-input-label {
+				margin-bottom: 0;
 			}
 			.d2l-demo-page-content > ::slotted(h2),
 			.d2l-demo-page-content > ::slotted(h3) {
@@ -67,9 +80,22 @@ class DemoPage extends LitElement {
 		const classes = {
 			'no-scroll': this._noScroll
 		};
+		const selectedLanguageCode = getDocumentLocaleSettings().language;
+		let foundSelected = false;
+		const languageOptions = supportedLocalesDetails.map((l) => {
+			const selected = !foundSelected && l.code.startsWith(selectedLanguageCode);
+			foundSelected = foundSelected || selected;
+			return html`<option value="${l.code}" ?selected="${selected}">${l.code} - ${l.name}</option>`;
+		});
 		return html`
-			<main class="${classMap(classes)}">
+			<header>
 				<h1 class="d2l-heading-2">${this.pageTitle}</h1>
+				<label class="d2l-input-label">
+					Language: 
+					<select class="d2l-input-select" @change="${this._handleLanguageChange}">${languageOptions}</select>
+				</label>
+			</header>
+			<main class="${classMap(classes)}">
 				<div class="d2l-demo-page-content" @d2l-demo-snippet-fullscreen-toggle="${this._handleFullscreenToggle}"><slot></slot></div>
 			</main>
 		`;
@@ -86,6 +112,13 @@ class DemoPage extends LitElement {
 			this._noScroll = true;
 		}
 	}
+
+	_handleLanguageChange(e) {
+		const newLanguageCode = e.target[e.target.selectedIndex].value;
+		document.documentElement.dir = newLanguageCode === 'ar-sa' ? 'rtl' : 'ltr';
+		getDocumentLocaleSettings().language = newLanguageCode;
+	}
+
 }
 
 customElements.define('d2l-demo-page', DemoPage);

package/components/demo/demo-snippet.js

@@ -14,7 +14,6 @@ class DemoSnippet extends LitElement {
 			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 },
@@ -51,7 +50,6 @@ class DemoSnippet extends LitElement {
 			.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;
@@ -83,6 +81,7 @@ class DemoSnippet extends LitElement {
 				right: 1rem;
 				top: -0.25rem;
 				translate: 0 -1.5rem;
+				z-index: 9999; /* stack on top of sticky headers */
 			}
 			@media (prefers-reduced-motion: no-preference) {
 				d2l-dropdown.settings-dropdown {
@@ -112,7 +111,6 @@ class DemoSnippet extends LitElement {
 	constructor() {
 		super();
 		this.fullWidth = false;
-		this._dir = document.documentElement.dir;
 		this._fullscreen = false;
 		this._hasSkeleton = false;
 		this._skeletonOn = false;
@@ -123,10 +121,8 @@ 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`
@@ -137,7 +133,7 @@ class DemoSnippet extends LitElement {
 
 		return html`
 			<div class="d2l-demo-snippet-demo-wrapper ${this._fullscreen ? 'fullscreen' : ''}">
-				<div class="d2l-demo-snippet-demo" dir="${dirAttr}">
+				<div class="d2l-demo-snippet-demo">
 					<div class="d2l-demo-snippet-demo-padding">
 						<slot name="_demo"></slot>
 						<slot></slot>
@@ -172,9 +168,6 @@ class DemoSnippet extends LitElement {
 		const doApply = (nodes, isRoot) => {
 			for (let i = 0; i < nodes.length; i++) {
 				if (nodes[i].nodeType === Node.ELEMENT_NODE) {
-					/* only sprout dir on root or custom element so devs don't think that
-					[dir="rtl"].some-class will work. they must use :host([dir="rtl"]) in their
-					custom element's CSS since RTLMixin only sprouts [dir="rtl"] on host */
 					if (isRoot || nodes[i].tagName.indexOf('-') !== -1) {
 						if (typeof(value) === 'boolean') {
 							if (value) {
@@ -230,11 +223,6 @@ class DemoSnippet extends LitElement {
 			.replace(/=""/g, '');           // replace empty strings for boolean attributes (="")
 	}
 
-	_handleDirChange(e) {
-		this._dir = e.target.on ? 'rtl' : 'ltr';
-		this._applyAttr('dir', this._dir, true);
-	}
-
 	async _handleFullscreenChange(e) {
 		this._fullscreen = e.target.on;
 		this._settingsPeek = this._fullscreen;

package/mixins/rtl-mixin.js

@@ -1,4 +1,5 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 
 export const RtlMixin = dedupeMixin(superclass => class extends superclass {
 
@@ -13,9 +14,25 @@ export const RtlMixin = dedupeMixin(superclass => class extends superclass {
 
 	constructor() {
 		super();
+		this._localeSettings = getDocumentLocaleSettings();
+		this._handleLanguageChange = this._handleLanguageChange.bind(this);
+		this._handleLanguageChange();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._localeSettings.addChangeListener(this._handleLanguageChange);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._localeSettings.removeChangeListener(this._handleLanguageChange);
+	}
+
+	_handleLanguageChange() {
 		const dir = document.documentElement.getAttribute('dir');
 		// avoid reflecting "ltr" for better performance
-		if (dir && dir !== 'ltr') {
+		if (dir && (dir !== 'ltr' || this.dir === 'rtl')) {
 			this.dir = dir;
 		}
 	}

package/package.json

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