@brightspace-ui/core 2.79.1 → 2.80.0

package/components/list/list-item-generic-layout.js

@@ -452,6 +452,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			case keyCodes.SPACE:
 				node = getComposedActiveElement();
 				node.click();
+				// mouseup event is necessary for components like d2l-dropdown-more that control state by listening to this event
+				node.dispatchEvent(new MouseEvent('mouseup', { composed: true }));
 				break;
 			case keyCodes.RIGHT:
 				node = getComposedActiveElement();

package/components/object-property-list/README.md

@@ -8,9 +8,11 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
+  import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
 </script>
 
 <d2l-object-property-list>
+  <d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator>
   <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
   <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
   <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
@@ -18,11 +20,23 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
 </d2l-object-property-list>
 ```
 
+## Best Practices
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use object property lists to represent properties and/or metadata related to an object
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don't use this pattern to display more than 3-4 items
+* Don't put unsupported elements inside an object property list
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
 ## List [d2l-object-property-list]
 
 An object property list can be defined using `d2l-object-property-list` and a combination of items (e.g., `d2l-object-property-list-item`, `d2l-object-property-list-item-link`).
 
-<!-- docs: demo code -->
+<!-- docs: demo live name:d2l-object-property-list -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -36,17 +50,19 @@ An object property list can be defined using `d2l-object-property-list` and a co
 </d2l-object-property-list>
 ```
 
+<!-- docs: start hidden content -->
 ### Properties
 
 | Property | Type | Description |
 |--|--|--|
 | `skeleton-count` | Number | Number of skeleton items to insert if in skeleton mode |
+<!-- docs: end hidden content -->
 
 ### Word wrap
 
 The object property list is designed to wrap in an inline manner if the items are wider than the container.
 
-<!-- docs: demo code -->
+<!-- docs: demo -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -63,8 +79,7 @@ The object property list is designed to wrap in an inline manner if the items ar
 
 The `d2l-object-property-list-item` component is the basic type of item for an object property list, displaying text and an optional leading icon.
 
-
-<!-- docs: demo code -->
+<!-- docs: demo live name:d2l-object-property-list-item -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -90,7 +105,7 @@ The `d2l-object-property-list-item` component is the basic type of item for an o
 
 The `d2l-object-property-list-item-link` component is a link item for the object property list. It displays text as a hyperlink, with an optional leading icon.
 
-<!-- docs: demo code -->
+<!-- docs: demo live name:d2l-object-property-list-item-link -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -115,6 +130,25 @@ The `d2l-object-property-list-item-link` component is a link item for the object
 | `target` | String | Where to display the linked URL |
 <!-- docs: end hidden content -->
 
+## Status Slot
+
+Object property lists can optionally contain a single `d2l-status-indicator` inserted into the `status` slot.
+
+<!-- docs: demo live name:d2l-status-indicator -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
+  import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
+</script>
+
+<d2l-object-property-list>
+  <d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator>
+  <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
+  <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
+</d2l-object-property-list>
+```
+
 <!-- docs: start hidden content -->
 ## Future Improvements
 

package/components/object-property-list/demo/object-property-list.html

@@ -10,6 +10,7 @@
 			import '../object-property-list.js';
 			import '../object-property-list-item.js';
 			import '../object-property-list-item-link.js';
+			import '../../status-indicator/status-indicator.js';
 		</script>
 	</head>
 	<body unresolved>
@@ -30,6 +31,7 @@
 			<d2l-demo-snippet overflow-hidden>
 				<template>
 					<d2l-object-property-list>
+						<d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator>
 						<d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
 						<d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
 						<d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
@@ -53,7 +55,15 @@
 
 			<d2l-demo-snippet overflow-hidden>
 				<template>
-					<d2l-object-property-list skeleton-count=3></d2l-object-property-list>
+					<d2l-object-property-list skeleton-count="3"></d2l-object-property-list>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Object Property List: No external whitespace (still contains internal whitespace in the component renderers)</h2>
+
+			<d2l-demo-snippet overflow-hidden>
+				<template>
+					<d2l-object-property-list><d2l-status-indicator slot="status" state="default" text="Status"></d2l-status-indicator><d2l-object-property-list-item text="Example item"></d2l-object-property-list-item><d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item><d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link><d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link></d2l-object-property-list>
 				</template>
 			</d2l-demo-snippet>
 

package/components/object-property-list/object-property-list-item.js

@@ -1,16 +1,14 @@
+import '../offscreen/screen-reader-pause.js';
 import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
-import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 /**
  * A single object property, to be used within an object-property-list,
  * with an optional icon.
  */
-export class ObjectPropertyListItem extends SkeletonMixin(RtlMixin(LitElement)) {
+export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 	static get properties() {
 		return {
 			/**
@@ -27,23 +25,24 @@ export class ObjectPropertyListItem extends SkeletonMixin(RtlMixin(LitElement))
 	}
 
 	static get styles() {
-		return [super.styles, offscreenStyles, css`
+		return [super.styles, css`
+			:host {
+				vertical-align: middle;
+			}
 			d2l-icon {
-				height: 0.9rem;
-				width: 0.9rem;
+				height: 1.2857em; /* 18px desired height at main font size (14px), but using em to scale properly at smaller breakpoint. */
+				width: 1.2857em;
 			}
 			.separator {
 				display: var(--d2l-object-property-list-item-separator-display, inline);
-				margin: 0 0.05rem;
+				margin: 0 -0.05rem; /* 10px desired margin, subtract 5px arbitrary whitespace and 6px whitespace inside bullet icon. */
 			}
 			.separator d2l-icon {
 				color: var(--d2l-color-galena);
 			}
 			.item-icon {
-				margin: -0.1rem 0.3rem 0 0;
-			}
-			:host([dir="rtl"]) .item-icon {
-				margin: -0.1rem 0 0 0.3rem;
+				margin-inline-end: 0.05rem; /* 6px desired margin, subtract 5px arbitrary whitespace. */
+				margin-top: -0.1rem;
 			}
 			:host([skeleton]) d2l-icon {
 				color: var(--d2l-color-sylvite);
@@ -73,8 +72,8 @@ export class ObjectPropertyListItem extends SkeletonMixin(RtlMixin(LitElement))
 	_renderSeparator() {
 		return html`
 			<span class="separator">
-				<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
-				<d2l-icon icon="tier1:bullet" aria-hidden="true"></d2l-icon>
+				<d2l-screen-reader-pause></d2l-screen-reader-pause>
+				<d2l-icon icon="tier1:bullet"></d2l-icon>
 			</span>
 		`;
 	}

package/components/object-property-list/object-property-list.js

@@ -1,4 +1,5 @@
 import './object-property-list-item.js';
+import '../offscreen/screen-reader-pause.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -21,7 +22,7 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 
 	static get styles() {
 		return [super.styles, bodySmallStyles, css`
-			:host, slot {
+			:host {
 				display: block;
 			}
 			:host([hidden]) {
@@ -30,16 +31,28 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 			::slotted(:last-child), slot :last-child {
 				--d2l-object-property-list-item-separator-display: none;
 			}
+			::slotted([slot="status"]) {
+				display: none;
+			}
+			::slotted(d2l-status-indicator[slot="status"]:first-of-type) {
+				display: inline-block;
+				margin-inline-end: 0.25rem; /* 10px desired margin, subtract 5px arbitrary whitespace. */
+			}
 		`];
 	}
 
 	render() {
-
 		const slotContents = this.skeleton && this.skeletonCount > 0 ? [...Array(this.skeletonCount)].map(() => html`
 			<d2l-object-property-list-item text="${this.localize('components.object-property-list.item-placeholder-text')}" skeleton></d2l-object-property-list-item>
 		`) : nothing;
 
-		return html`<slot class="d2l-body-small">${slotContents}</slot>`;
+		return html`
+			<div class="d2l-body-small">
+				<slot name="status"></slot>
+				<d2l-screen-reader-pause></d2l-screen-reader-pause>
+				<slot>${slotContents}</slot>
+			</div>
+		`;
 	}
 }
 

package/components/offscreen/README.md

@@ -25,7 +25,7 @@ Import the `<d2l-offscreen>` web component and place your content within the def
 <d2l-offscreen>Off-screen content for screen readers only</d2l-offscreen>
 ```
 
-## Applying off-screen styles to arbitrary elements
+### Applying off-screen styles to arbitrary elements
 
 Alternately, you can apply off-screen styles to any element by importing the styles into your element and placing the `d2l-offscreen` CSS class on it.
 
@@ -44,3 +44,23 @@ class MyElement extends LitElement {
   }
 }
 ```
+
+## Screen Reader Pause [d2l-screen-reader-pause]
+
+This component simply renders an off-screen separator character and space (e.g. `, ` in English), which will cause screen-readers to pause the same as if there was a visible comma.
+
+This can be useful in cases where a non-semantic element like `d2l-icon` is visually used to separate text:
+
+<!-- docs: demo code -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/icons/icon.js';
+  import '@brightspace-ui/core/components/offscreen/screen-reader-pause.js';
+</script>
+<p>
+  Item 1
+  <d2l-screen-reader-pause></d2l-screen-reader-pause>
+  <d2l-icon icon="tier1:bullet"></d2l-icon>
+  Item 2
+</p>
+```

package/components/offscreen/screen-reader-pause.js

@@ -0,0 +1,15 @@
+import { html, LitElement } from 'lit';
+import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
+import { offscreenStyles } from './offscreen.js';
+
+export class ScreenReaderPause extends LitElement {
+	static get styles() {
+		return offscreenStyles;
+	}
+
+	render() {
+		return html`<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>`;
+	}
+}
+
+customElements.define('d2l-screen-reader-pause', ScreenReaderPause);

package/custom-elements.json

@@ -8155,6 +8155,11 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "mouseup"
+        }
+      ],
       "slots": [
         {
           "name": "outside-control",
@@ -9597,6 +9602,10 @@
         }
       ]
     },
+    {
+      "name": "d2l-screen-reader-pause",
+      "path": "./components/offscreen/screen-reader-pause.js"
+    },
     {
       "name": "d2l-overflow-group",
       "path": "./components/overflow-group/overflow-group.js",

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -334,6 +334,7 @@ class MobileMouseResizer extends Resizer {
 
 	constructor() {
 		super();
+		this._isDragging = false;
 		this._onMouseDown = this._onMouseDown.bind(this);
 		this._onMouseMove = this._onMouseMove.bind(this);
 		this._onMouseUp = this._onMouseUp.bind(this);
@@ -363,6 +364,7 @@ class MobileMouseResizer extends Resizer {
 			e.preventDefault();
 			const y = e.clientY - this.contentRect.top;
 			this._offset = y - (this.contentRect.height - this.panelSize);
+			this._isDragging = false;
 			this._isResizing = true;
 			this._target.focus();
 		}
@@ -374,6 +376,7 @@ class MobileMouseResizer extends Resizer {
 		}
 		const y = e.clientY - this.contentRect.top;
 		const secondaryHeight = this.clampMaxHeight(this.contentRect.height - y + this._offset);
+		this._isDragging = true;
 		this.dispatchResize(secondaryHeight, false);
 	}
 
@@ -386,12 +389,13 @@ class MobileMouseResizer extends Resizer {
 		const y = e.clientY - this.contentRect.top;
 		const desiredSecondaryHeight = this.contentRect.height - y + this._offset;
 		if (
-			(this._wasCollapsed && desiredSecondaryHeight < collapsedCollapseThreshold)
-			|| (!this._wasCollapsed && desiredSecondaryHeight < expandedCollapseThreshold)
+			this._isDragging
+			&& ((this._wasCollapsed && desiredSecondaryHeight < collapsedCollapseThreshold)
+			|| (!this._wasCollapsed && desiredSecondaryHeight < expandedCollapseThreshold))
 		) {
-			if (desiredSecondaryHeight > 0) this.dispatchResize(0, true);
+			if (desiredSecondaryHeight !== 0) this.dispatchResize(0, true);
 		}
-		else if (desiredSecondaryHeight < this.contentBounds.minHeight) {
+		else if (this._isDragging && desiredSecondaryHeight < this.contentBounds.minHeight) {
 			this.dispatchResize(this.contentBounds.minHeight, true);
 		}
 		this._isResizing = false;