@brightspace-ui/core 2.29.6 → 2.31.1

package/components/button/button-subtle.js

@@ -119,7 +119,6 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 
 				.d2l-button-subtle-content {
 					color: var(--d2l-color-celestine);
-					vertical-align: middle;
 				}
 				button:hover:not([disabled]) .d2l-button-subtle-content,
 				button:focus:not([disabled]) .d2l-button-subtle-content,

package/components/dialog/README.md

@@ -256,6 +256,16 @@ document.querySelector('#open').addEventListener('click', () => {
 });
 ```
 
+## Focus Management
+
+When opened, focus will be automatically placed within the dialog. The element to be focused will either be the content element having the optional `autofocus` attribute, or a focusable element identified by the dialog depending on the type of dialog. For `d2l-dialog` and `d2l-dialog-fullscreen`, the first focusable element will be focused. For `d2l-dialog-confirm`, the least destructive action will be focused, which is assumed to be the first non-primary button in the footer.
+
+### Specifying an `autofocus` Element (Optional)
+
+To specify which element should be focused, add the `autofocus` attribute to that element. An element with the `autofocus` attribute will receive focus if the element has a `tabindex` value of `0` or `-1`, or is a naturally focusable element (e.g. button).
+
+Note that the element must be in the dialog content's DOM scope and not within another component's Shadow DOM.
+
 <!-- docs: start hidden content -->
 ## Future Improvements
 

package/components/menu/README.md

@@ -62,7 +62,7 @@ To make your usage of `d2l-menu` accessible, use the following property:
 
 ## Menu Item [d2l-menu-item]
 
-The `d2l-menu item` component is used with JS handlers and can be wired-up to the `d2l-menu-item-select` event.
+The `d2l-menu-item` component is used with JS handlers and can be wired-up to the `d2l-menu-item-select` event.
 
 <!-- docs: demo live name:d2l-menu-item -->
 ```html

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

@@ -0,0 +1,118 @@
+# Object Property List
+
+Object property lists are simple dot-separated lists of text, displayed sequentially on a single line. They are used to convey additional information or metadata about an object.
+
+<!-- docs: demo -->
+```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/object-property-list/object-property-list-item-link.js';
+</script>
+
+<d2l-object-property-list>
+  <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>
+```
+
+## 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 -->
+```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/object-property-list/object-property-list-item-link.js';
+</script>
+
+<d2l-object-property-list>
+  <d2l-object-property-list-item text="Example item"></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>
+```
+
+### 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 -->
+```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';
+</script>
+
+<d2l-object-property-list>
+  <d2l-object-property-list-item icon="tier1:grade" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
+  <d2l-object-property-list-item icon="tier1:alert" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
+</d2l-object-property-list>
+```
+
+## Text Item [d2l-object-property-list-item]
+
+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 -->
+```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';
+</script>
+
+<d2l-object-property-list>
+  <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 -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text displayed by the item |
+| `icon` | String | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+<!-- docs: end hidden content -->
+
+## Link Item [d2l-object-property-list-item-link]
+
+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 -->
+```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-link.js';
+</script>
+
+<d2l-object-property-list>
+  <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>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text displayed by the item |
+| `icon` | String | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+| `download` | Boolean | Download a URL instead of navigating to it |
+| `href` | String, required | The URL the item link navigates to |
+| `target` | String | Where to display the linked URL |
+<!-- docs: end hidden content -->
+
+<!-- docs: start hidden content -->
+## Future Improvements
+
+* add more types of items (specifically, a `tooltip-help` item)
+
+Looking for an enhancement not listed here? Create a GitHub issue!
+<!-- docs: end hidden content -->

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

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+
+			import '../object-property-list.js';
+			import '../object-property-list-item.js';
+			import '../object-property-list-item-link.js';
+		</script>
+	</head>
+	<body unresolved>
+		<d2l-demo-page page-title="d2l-object-property-list">
+
+			<h2>Object Property List: Single item</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-object-property-list>
+						<d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
+					</d2l-object-property-list>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Object Property List: All item variants</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-object-property-list>
+						<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>
+
+			<h2>Object Property List: Long items to demonstrate word-wrap</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-object-property-list>
+						<d2l-object-property-list-item icon="tier1:grade" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
+						<d2l-object-property-list-item icon="tier1:alert" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
+					</d2l-object-property-list>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+	</body>
+</html>

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

@@ -0,0 +1,54 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { linkStyles } from '../link/link.js';
+import { ObjectPropertyListItem } from './object-property-list-item.js';
+
+/**
+ * A single object property, to be used within an object-property-list,
+ * rendered as a link and with an optional icon.
+ */
+class ObjectPropertyListItemLink extends ObjectPropertyListItem {
+	static get properties() {
+		return {
+			/**
+			 * Download a URL instead of navigating to it
+			 * @type {boolean}
+			 */
+			download: { type: Boolean },
+			/**
+			 * REQUIRED: URL or URL fragment of the link
+			 * @type {string}
+			 */
+			href: { type: String },
+			/**
+			 * Where to display the linked URL
+			 * @type {string}
+			 */
+			target: { type: String },
+		};
+	}
+
+	static get styles() {
+		return [
+			...super.styles,
+			linkStyles,
+		];
+	}
+
+	render() {
+		return html`
+			${this._renderIcon()}
+			<a
+				?download="${this.download}"
+				class="d2l-link"
+				href="${ifDefined(this.href)}"
+				target="${ifDefined(this.target)}"
+			>
+				${this.text}
+			</a>
+			${this._renderSeparator()}
+		`;
+	}
+}
+
+customElements.define('d2l-object-property-list-item-link', ObjectPropertyListItemLink);

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

@@ -0,0 +1,72 @@
+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';
+
+/**
+ * A single object property, to be used within an object-property-list,
+ * with an optional icon.
+ */
+export class ObjectPropertyListItem extends RtlMixin(LitElement) {
+	static get properties() {
+		return {
+			/**
+			 * Name of an optional icon to display
+			 * @type {string}
+			 */
+			icon: { type: String },
+			/**
+			 * REQUIRED: Text to display on the item
+			 * @type {string}
+			 */
+			text: { type: String },
+		};
+	}
+
+	static get styles() {
+		return [offscreenStyles, css`
+			d2l-icon {
+				height: 0.9rem;
+				width: 0.9rem;
+			}
+			.separator {
+				display: var(--d2l-object-property-list-item-separator-display, inline);
+				margin: 0 0.05rem;
+			}
+			.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;
+			}
+		`];
+	}
+
+	render() {
+		return html`
+			${this._renderIcon()}
+			<span>${this.text}</span>
+			${this._renderSeparator()}
+		`;
+	}
+
+	_renderIcon() {
+		return this.icon ? html`<d2l-icon icon="${this.icon}" class="item-icon"></d2l-icon>` : nothing;
+	}
+
+	_renderSeparator() {
+		return html`
+			<span class="separator">
+				<span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
+				<d2l-icon icon="tier1:bullet" aria-hidden="true"></d2l-icon>
+			</span>
+		`;
+	}
+}
+
+customElements.define('d2l-object-property-list-item', ObjectPropertyListItem);

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

@@ -0,0 +1,31 @@
+import { css, html, LitElement } from 'lit';
+import { bodySmallStyles } from '../typography/styles.js';
+
+/**
+ * A dot-separated list of object properties.
+ * @slot - Items of the type d2l-object-property-list-item* to be added to the container
+ */
+class ObjectPropertyList extends LitElement {
+	static get styles() {
+		return [bodySmallStyles, css`
+			:host {
+				display: contents;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			slot {
+				display: block;
+			}
+			::slotted(:last-child) {
+				--d2l-object-property-list-item-separator-display: none;
+			}
+		`];
+	}
+
+	render() {
+		return html`<slot class="d2l-body-small"></slot>`;
+	}
+}
+
+customElements.define('d2l-object-property-list', ObjectPropertyList);

package/custom-elements.json

@@ -8405,6 +8405,112 @@
         }
       ]
     },
+    {
+      "name": "d2l-object-property-list-item-link",
+      "path": "./components/object-property-list/object-property-list-item-link.js",
+      "description": "A single object property, to be used within an object-property-list,\nrendered as a link and with an optional icon.",
+      "attributes": [
+        {
+          "name": "download",
+          "description": "Download a URL instead of navigating to it",
+          "type": "boolean"
+        },
+        {
+          "name": "href",
+          "description": "REQUIRED: URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        },
+        {
+          "name": "icon",
+          "description": "Name of an optional icon to display",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text to display on the item",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "download",
+          "attribute": "download",
+          "description": "Download a URL instead of navigating to it",
+          "type": "boolean"
+        },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "REQUIRED: URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Name of an optional icon to display",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text to display on the item",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-object-property-list-item",
+      "path": "./components/object-property-list/object-property-list-item.js",
+      "description": "A single object property, to be used within an object-property-list,\nwith an optional icon.",
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Name of an optional icon to display",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Text to display on the item",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Name of an optional icon to display",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text to display on the item",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-object-property-list",
+      "path": "./components/object-property-list/object-property-list.js",
+      "description": "A dot-separated list of object properties.",
+      "slots": [
+        {
+          "name": "",
+          "description": "Items of the type d2l-object-property-list-item* to be added to the container"
+        }
+      ]
+    },
     {
       "name": "d2l-offscreen-demo",
       "path": "./components/offscreen/demo/offscreen-demo.js"

package/package.json

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