@brightspace-ui/core 2.47.0 → 2.47.3

package/components/description-list/README.md

@@ -1,5 +1,5 @@
 # Description List
-A Description List displays information in a vertical list of key-value pairs. Common usages could include terms & definitions, or fields & values.
+A Description List displays static pairs of terms and definitions in a vertical list. In the standard HTML element `dl` these are called "terms" `dt` and "definitions" `dd`.
 
 <!-- docs: demo -->
 ```html
@@ -10,16 +10,20 @@ A Description List displays information in a vertical list of key-value pairs. C
 ```
 
 ## Best Practices
+
 <!-- docs: start best practices -->
 <!-- docs: start dos -->
-* Terms and descriptions are 1-to-1
+* Keep terms short and scannable
+* Use terms of similar lengths since definitions are aligned to the longest term
+* Use title case for terms and sentence case for definitions
+* Adjust the [responsive breakpoint](#responsive-behavior) to suit your content since longer values may need a higher breakpoint
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
-* Don't have a term without a description
-* Don't have a description without a term
-* Don't have multiple terms for a description
-* Don't have multiple descriptions for a term
+* Avoid using multiple description lists on one page
+* Don't use empty terms or definitions, both are required
+* Don't use colons in the labels, they're unnecessary
+* Don't end a definition with a period unless it has multiple sentences
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
@@ -42,11 +46,14 @@ When the component width is less than the `breakpoint` property, the side-by-sid
       return html`
         <d2l-dl-wrapper breakpoint="600">
           <dl>
-            <dt>Course Code That Represents The Course as a Short String</dt>
-            <dd>A short string that represents the course, often with important information such as section or room number.</dd>
+            <dt>Active Course</dt>
+            <dd>Inactive courses are invisible, regardless of start or end dates unless the user’s role has the permission "Can View Inactive Courses"</dd>
+
+            <dt>Start Date</dt>
+            <dd>The start date determines when a course becomes available to learners. Users with the "Can View Course Before Start Date" permission are excluded from this restriction.</dd>
 
-            <dt>Availability Dates</dt>
-            <dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
+            <dt>End Date</dt>
+            <dd>The end date determines when a course becomes unavailable to learners. Users with the "Can View Course After End Date" permission are excluded from this restriction.</dd>
           </dl>
         </d2l-dl-wrapper>
       `;
@@ -60,9 +67,9 @@ When the component width is less than the `breakpoint` property, the side-by-sid
 
 ## Description List Wrapper [d2l-dl-wrapper]
 
-The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
+The `d2l-dl-wrapper` component can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
 
-<!-- docs: demo live name:d2l-test-dl -->
+<!-- docs: demo live name:d2l-test-dl display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
@@ -84,11 +91,17 @@ The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styli
       return html`
         <d2l-dl-wrapper breakpoint="${this.breakpoint}">
           <dl>
-            <dt>Course Code That Represents The Course as a Short String</dt>
-            <dd>A short string that represents the course, often with important information such as section or room number.</dd>
+            <dt>Course Name</dt>
+            <dd>Brightspace 101B</dd>
+
+            <dt>Course Code</dt>
+            <dd>BSPC 101B</dd>
+
+            <dt>Start Date</dt>
+            <dd>June 14 2022</dd>
 
-            <dt>Availability Dates</dt>
-            <dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
+            <dt>Semester</dt>
+            <dd>2022 Summer</dd>
           </dl>
         </d2l-dl-wrapper>
       `;

package/components/html-block/html-block.js

@@ -194,11 +194,17 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		this.noDeferredRendering = false;
 		this._hasSlottedContent = false;
 
+		this._contextObserverControllerResolve = undefined;
+		this._contextObserverControllerInitialized = new Promise(resolve => {
+			this._contextObserverControllerResolve = resolve;
+		});
+
 		getRenderers().then(renderers => renderers.reduce((attrs, currentRenderer) => {
 			if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
 			return attrs;
 		}, [])).then(rendererContextAttributes => {
 			this._contextObserverController = new HtmlAttributeObserverController(this, ...rendererContextAttributes);
+			this._contextObserverControllerResolve();
 		});
 	}
 
@@ -245,7 +251,7 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this._hasSlottedContent) {
 			await this._updateRenderContainer();
 		}
-		if (this._contextChanged()) {
+		if (await this._contextChanged()) {
 			if (this._hasSlottedContent) this._render();
 			else if (this.html !== undefined && this.html !== null) {
 				await this._updateRenderContainer();
@@ -255,8 +261,8 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		}
 	}
 
-	_contextChanged() {
-		if (!this._contextObserverController) return false;
+	async _contextChanged() {
+		await this._contextObserverControllerInitialized;
 		if (!this._contextKeys) {
 			this._updateContextKeys();
 			return true;
@@ -290,9 +296,10 @@ class HtmlBlock extends RtlMixin(LitElement) {
 	}
 
 	async _processRenderers(elem) {
+		await this._contextObserverControllerInitialized;
 		const renderers = await getRenderers();
 		for (const renderer of renderers) {
-			if (this._contextObserverController && renderer.contextAttributes) {
+			if (renderer.contextAttributes) {
 				const contextValues = new Map();
 				renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
 				await renderer.render(elem, {

package/components/tooltip/demo/tooltip.html

@@ -54,6 +54,12 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
+
+		.dark-background {
+			background-color: black;
+			padding: 20px;
+		}
+
 	</style>
 </head>
 
@@ -152,6 +158,18 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Tooltip (dark background)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<div class="dark-background">
+					<d2l-button id="tooltip-dark-background">Dark Background</d2l-button>
+					<d2l-tooltip for="tooltip-dark-background">
+						All tooltips have an outline.
+					</d2l-tooltip>
+				</div>
+			</template>
+		</d2l-demo-snippet>
+
 		<h2>Help Tooltip</h2>
 		<d2l-demo-snippet>
 			<template>

package/components/tooltip/tooltip.js

@@ -23,6 +23,7 @@ const defaultViewportMargin = 18;
 const contentBorderRadius = 6;
 const contentBorderSize = 1;
 const contentHorizontalPadding = 15;
+const outlineSize = 1;
 
 /* once a user shows a tooltip, ignore delay if they hover adjacent target within this timeout */
 let delayTimeoutId;
@@ -179,6 +180,7 @@ class Tooltip extends RtlMixin(LitElement) {
 			:host {
 				--d2l-tooltip-background-color: var(--d2l-color-ferrite); /* Deprecated, use state attribute instead */
 				--d2l-tooltip-border-color: var(--d2l-color-ferrite); /* Deprecated, use state attribute instead */
+				--d2l-tooltip-outline-color: rgba(255, 255, 255, 0.32);
 				box-sizing: border-box;
 				color: white;
 				display: none;
@@ -273,6 +275,26 @@ class Tooltip extends RtlMixin(LitElement) {
 				width: ${pointerLength}px;
 			}
 
+			:host([_open-dir="top"]) .d2l-tooltip-pointer-outline {
+				clip: rect(${pointerOverhang + contentBorderSize + outlineSize * 2}px, 21px, 22px, -3px);
+			}
+
+			:host([_open-dir="bottom"]) .d2l-tooltip-pointer-outline {
+				clip: rect(-4px, 21px, ${pointerOverhang + contentBorderSize - outlineSize * 2}px, -7px);
+			}
+
+			:host([_open-dir="left"]) .d2l-tooltip-pointer-outline {
+				clip: rect(-3px, 21px, 21px, ${pointerOverhang + contentBorderSize + outlineSize * 2}px);
+			}
+
+			:host([_open-dir="right"]) .d2l-tooltip-pointer-outline {
+				clip: rect(-3px, ${pointerOverhang + contentBorderSize - outlineSize * 2}px, 21px, -4px);
+			}
+
+			.d2l-tooltip-pointer-outline > div {
+				outline: ${outlineSize}px solid var(--d2l-tooltip-outline-color);
+			}
+
 			.d2l-tooltip-position {
 				display: inline-block;
 				height: 0;
@@ -295,6 +317,7 @@ class Tooltip extends RtlMixin(LitElement) {
 				max-width: 17.5rem;
 				min-height: 2.1rem;
 				min-width: 2.1rem;
+				outline: ${outlineSize}px solid var(--d2l-tooltip-outline-color);
 				overflow: hidden;
 				padding: ${11 - contentBorderSize}px ${contentHorizontalPadding - contentBorderSize}px;
 				position: absolute;
@@ -476,6 +499,9 @@ class Tooltip extends RtlMixin(LitElement) {
 						</div>
 					</div>
 				</div>
+				<div class="d2l-tooltip-pointer d2l-tooltip-pointer-outline">
+					<div></div>
+				</div>
 				<div class="d2l-tooltip-pointer">
 					<div></div>
 				</div>

package/package.json

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