@brightspace-ui/core 2.1.2 → 2.2.1

package/README.md

@@ -54,6 +54,7 @@ npm install @brightspace-ui/core
   * [Switch](components/switch/): switch component with on/off semantics
   * [Table](components/table/): table styles, column sorting and overflow handling
   * [Tabs](components/tabs/): tab and tab-panel components
+  * [Tag List](components/tag-list/): tag-list and tag-list-item components
   * [Tooltip](components/tooltip/): tooltip components
   * [Typography](components/typography/): typography styles and components
   * [Validation](components/validation/): plugin custom validation logic to native and custom form elements

package/components/filter/README.md

@@ -131,6 +131,25 @@ Filter with a single dimension:
 </div>
 ```
 
+### Iterating Over Dimensions and Values
+
+Lit tries to reuse DOM nodes when it can to help with performance, but in this case we don't want unique dimensions and values to be reused - otherwise we can't detect additions/removals properly.
+
+If you are going to be constructing your dimensions and/or dimension values by iterating over an array or object (using `forEach,` , `map`, etc.), you'll want to use the [Lit `repeat` directive with a `KeyFn` set](https://lit.dev/docs/templates/directives/#repeat) instead to tell Lit not to reuse a DOM node if the `key` has changed:
+```js
+import { repeat } from 'lit-html/directives/repeat.js';
+...
+return html`<d2l-filter>
+	${repeat(this._dimensions, (dim) => dim.key, dim => html`
+		<d2l-filter-dimension-set key="${dim.key}" text=${dim.text}>
+			${repeat(dim._values, (value) => value.key, value => html`
+				<d2l-filter-dimension-set-value key="${value.kay}" text="${value.text}" ?selected="${value.selected}"></d2l-filter-dimension-set-value>
+			`)}
+		</d2l-filter-dimension-set>
+	`)}
+</d2l-filter>`;
+```
+
 ### Accessibility
 The filter will announce changes to filter selections, search results, and when filters are being cleared. It is up to the consumer to then announce when these changes have propagated and resulted in new/loaded/updated data on the page. This is very important for screenreader users who are not able to visually see the page changing behind the filter control as selections are made.
 

package/components/filter/filter.js

@@ -506,7 +506,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const changes = e.detail.changes;
 		const dimension = this._dimensions.find(dimension => dimension.key === e.detail.dimensionKey);
 		const value = e.detail.valueKey && dimension.values.find(value => value.key === e.detail.valueKey);
-		const toUpdate = value ? value : dimension;
+		const toUpdate = e.detail.valueKey ? value : dimension;
 
 		if (!toUpdate) return;
 

package/components/tag-list/README.md

@@ -0,0 +1,52 @@
+
+# Tag List
+*This component is in progress and the api is not yet stable.*
+
+Tag lists are used to present a list of compact, discrete pieces of information.
+
+<!-- docs: demo display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tag-list/tag-list.js';
+  import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+</script>
+
+<d2l-tag-list description="Example Tags">
+  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+</d2l-tag-list>
+```
+
+## Tag List [d2l-tag-list]
+
+The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-item` and adds the appropriate keyboard navigation, list semantics, clearing behaviour and responsive behaviour.
+
+<!-- docs: demo live name:d2l-tag-list display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tag-list/tag-list.js';
+  import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+</script>
+
+<d2l-tag-list description="Example Tags">
+  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item text="A Third Very Very Very Long Tag"></d2l-tag-list-item>
+</d2l-tag-list>
+```
+
+## Tag List Item [d2l-tag-list-item]
+The `d2l-tag-list-item` provides the appropriate `listitem` semantics and styling for children within a tag list. Tag List items do not work outside of a Tag List and should not be used on their own.
+
+<!-- docs: demo live name:d2l-tag-list-item display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tag-list/tag-list.js';
+  import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
+</script>
+
+<d2l-tag-list description="Example Tags">
+  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+</d2l-tag-list>
+```

package/components/tag-list/demo/tag-list.html

@@ -0,0 +1,32 @@
+<!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 '../tag-list.js';
+			import '../tag-list-item.js';
+			import '../test/tag-list-item-mixin-consumer.js';
+		</script>
+	</head>
+	<body unresolved>
+		<d2l-demo-page page-title="d2l-tag-list">
+
+			<h2>Basic Tag List</h2>
+			<d2l-demo-snippet fullscreen>
+				<d2l-tag-list description="A bunch of example tags">
+					<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Another Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
+					<d2l-tag-list-item text="Example Tag 5"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example Tag 6"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
+				</d2l-tag-list>		
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+	</body>
+</html>

package/components/tag-list/tag-list-item-mixin.js

@@ -0,0 +1,78 @@
+import '../colors/colors.js';
+import { css, html } from 'lit-element/lit-element.js';
+import { labelStyles } from '../typography/styles.js';
+
+export const TagListItemMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			role: { type: String, reflect: true }
+		};
+	}
+
+	static get styles() {
+		return [labelStyles, css`
+			:host {
+				display: grid;
+				outline: none;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.tag-list-item-content {
+				height: 1rem;
+				margin: auto;
+				min-width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.tag-list-item-container {
+				background-color: var(--d2l-color-regolith);
+				border-radius: 6px;
+				box-shadow: inset 0 0 0 1px var(--d2l-color-gypsum), 0 2px 4px rgba(0, 0, 0, 0.03);
+				box-sizing: border-box;
+				color: var(--d2l-color-ferrite);
+				cursor: pointer;
+				display: flex;
+				min-width: 0;
+				padding: 0.25rem 0.6rem;
+				transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
+			}
+			:host(:hover) .tag-list-item-container,
+			:host(:focus) .tag-list-item-container {
+				background-color: var(--d2l-color-sylvite);
+			}
+			:host(:hover) .tag-list-item-container {
+				box-shadow: inset 0 0 0 1px var(--d2l-color-mica), 0 2px 4px rgba(0, 0, 0, 0.03);
+			}
+			:host(:focus) .tag-list-item-container {
+				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				.tag-list-item-container {
+					transition: none;
+				}
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		/** @ignore */
+		this.role = 'listitem';
+	}
+
+	_renderTag(tagContent) {
+		return html`
+			<div class="tag-list-item-container d2l-label-text">
+				<div class="tag-list-item-content">${tagContent}</div>
+			</div>
+		`;
+	}
+
+};

package/components/tag-list/tag-list-item.js

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit-element/lit-element.js';
+import { TagListItemMixin } from './tag-list-item-mixin.js';
+
+class TagListItem extends TagListItemMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: Text to display
+			 * @type {string}
+			 */
+			text: { type: String }
+		};
+	}
+
+	render() {
+		return this._renderTag(this.text);
+	}
+}
+
+customElements.define('d2l-tag-list-item', TagListItem);

package/components/tag-list/tag-list.js

@@ -0,0 +1,89 @@
+import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
+
+class TagList extends ArrowKeysMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: A description of the tag list for additional accessibility context
+			 * @type {string}
+			 */
+			description: { type: String }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.tag-list-container {
+				display: flex;
+				flex-wrap: wrap;
+				margin: -6px -6px 0 0;
+				padding: 0;
+				position: relative;
+			}
+			::slotted(*) {
+				margin: 6px 6px 0 0;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		/** @ignore */
+		this.arrowKeysDirection = 'leftrightupdown';
+		this._items = [];
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		requestAnimationFrame(() => {
+			this._items = this._getTagListItems();
+			this._items.forEach((item, index) => {
+				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
+			});
+		});
+	}
+
+	render() {
+		const list = html`
+			<div role="list" class="tag-list-container" aria-describedby="d2l-tag-list-description">
+				<slot></slot>
+			</div>
+		`;
+		return html`
+			<div role="application">
+				${this.arrowKeysContainer(list)}
+				<div id="d2l-tag-list-description" hidden>${this.description}</div>
+			</div>
+		`;
+	}
+
+	async arrowKeysFocusablesProvider() {
+		return this._items;
+	}
+
+	focus() {
+		if (this._items.length > 0) this._items[0].focus();
+	}
+
+	_getTagListItems() {
+		const slot = this.shadowRoot && this.shadowRoot.querySelector('slot');
+		if (!slot) return;
+		return slot.assignedNodes({ flatten: true }).filter((node) => {
+			if (node.nodeType !== Node.ELEMENT_NODE) return false;
+			const role = node.getAttribute('role');
+			return (role === 'listitem');
+		});
+	}
+
+}
+
+customElements.define('d2l-tag-list', TagList);

package/custom-elements.json

@@ -9766,6 +9766,71 @@
         }
       ]
     },
+    {
+      "name": "d2l-tag-list-item",
+      "path": "./components/tag-list/tag-list-item.js",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: Text to display",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text to display",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-tag-list",
+      "path": "./components/tag-list/tag-list.js",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "REQUIRED: A description of the tag list for additional accessibility context",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "REQUIRED: A description of the tag list for additional accessibility context",
+          "type": "string"
+        },
+        {
+          "name": "arrowKeysDirection",
+          "type": "string",
+          "default": "\"leftright\""
+        },
+        {
+          "name": "arrowKeysNoWrap",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
+    {
+      "name": "d2l-tag-list-item-mixin-consumer",
+      "path": "./components/tag-list/test/tag-list-item-mixin-consumer.js",
+      "attributes": [
+        {
+          "name": "name",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "name",
+          "attribute": "name",
+          "type": "string"
+        }
+      ]
+    },
     {
       "name": "d2l-tooltip",
       "path": "./components/tooltip/tooltip.js",

package/package.json

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