@brightspace-ui/core 2.177.1 → 2.177.3

package/components/list/README.md

@@ -163,6 +163,99 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
     - Image: max dimensions: `width: 216px` and `height: 120px` and has `20px margin` from the main content;
     - default break: `843px < x`  where `x` is the width of the component.
 
+### add-button Property
+
+The `add-button` attribute inserts the `d2l-button-add` component above and below each item in a list. Each nested list that wants to have this functionality will need to have this attribute on the nested `d2l-list` as well. Each list item needs to have its own `key` in order to communicate where a new item should be positioned.
+
+Adding new items to the list is handled entirely by consumers by listening for the `d2l-list-add-button-click` event. A simple example scenario is below.
+
+<!-- docs: demo code display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/list/list.js';
+  import '@brightspace-ui/core/components/list/list-controls.js';
+  import '@brightspace-ui/core/components/list/list-item.js';
+  import '@brightspace-ui/core/components/list/list-item-content.js';
+  import '@brightspace-ui/core/components/selection/selection-action.js';
+  import { css, html, LitElement } from 'lit';
+  import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
+
+  class ListDemoAddButton extends LitElement {
+
+    _handleListAddButtonClick(e) {
+      const newItem = this._newItem();
+      const siblingItem = this.shadowRoot.querySelector(`[key="${e.detail.key}"]`);
+
+      if (e.detail.position === 'before') {
+        siblingItem.insertAdjacentElement('beforebegin', newItem);
+      } else {
+        siblingItem.insertAdjacentElement('afterend', newItem);
+      }
+    }
+
+    _newItem() {
+      const elem = document.createElement('d2l-list-item');
+      const key = getUniqueId();
+      elem.key = key;
+      elem.label = 'New Item';
+      elem.selectable = true;
+
+      const childElem = document.createElement('d2l-list-item-content');
+      childElem.textContent = `Item ${key}`;
+
+      elem.appendChild(childElem);
+      return elem;
+    }
+
+    render() {
+      return html`
+        <d2l-list grid add-button @d2l-list-add-button-click="${this._handleListAddButtonClick}">
+          <d2l-list-controls slot="controls">
+            <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
+          </d2l-list-controls>
+          <d2l-list-item selectable expandable key="expand-1" label="Expandable item #1">
+            <d2l-list-item-content>
+              <div>Expandable item #1</div>
+              <div slot="supporting-info">Supporting information</div>
+            </d2l-list-item-content>
+            <d2l-list grid add-button slot="nested" @d2l-list-add-button-click="${this._handleListAddButtonClick}">
+              <d2l-list-item selectable key="nested-1" label="Nested 1">
+                <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
+              </d2l-list-item>
+              <d2l-list-item selectable key="nested-2" label="Nested 2">
+                <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+              </d2l-list-item>
+            </d2l-list>
+          </d2l-list-item>
+          <d2l-list-item selectable expandable expanded key="expand-2" label="Expandable item #2">
+            <d2l-list-item-content>
+              <div>Expandable Item #2</div>
+              <div slot="supporting-info">Supporting information</div>
+            </d2l-list-item-content>
+            <d2l-list grid add-button slot="nested" @d2l-list-add-button-click="${this._handleListAddButtonClick}">
+              <d2l-list-item selectable key="nested-3" label="Nested 3">
+                <d2l-list-item-content><div>Nested item #3</div></d2l-list-item-content>
+              </d2l-list-item>
+              <d2l-list-item selectable key="nested-4" label="Nested 4">
+                <d2l-list-item-content><div>Nested item #4</div></d2l-list-item-content>
+              </d2l-list-item>
+            </d2l-list>
+          </d2l-list-item>
+          <d2l-list-item selectable key="expand-3" label="Item with no children">
+            <d2l-list-item-content>
+              <div>Item with no children</div>
+              <div slot="supporting-info">Supporting information</div>
+            </d2l-list-item-content>
+          </d2l-list-item>
+        </d2l-list>
+      `;
+    }
+  }
+  customElements.define('d2l-list-demo-add-button', ListDemoAddButton);
+</script>
+<d2l-list-demo-add-button></d2l-list-demo-add-button>
+```
+
 ### Methods
 
 - `getItems()` (Array): returns the list items within the list

package/components/list/demo/demo-list-nested.js

@@ -19,6 +19,7 @@ class ListDemoNested extends LitElement {
 
 	static get properties() {
 		return {
+			addButton: { type: Boolean, attribute: 'add-button' },
 			demoItemKey: { type: String, attribute: 'demo-item-key' },
 			isDraggable: { attribute: 'is-draggable', type: Boolean },
 			selectable: { type: Boolean },
@@ -169,7 +170,11 @@ class ListDemoNested extends LitElement {
 
 	_renderList(items, nested, includeControls = false, showLoadMore = false) {
 		return html`
-			<d2l-list ?grid="${!this.disableListGrid}" drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}" item-count="${this._items.length}">
+			<d2l-list
+				?grid="${!this.disableListGrid}"
+				drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}"
+				item-count="${this._items.length}"
+				?add-button="${this.addButton}">
 				${ includeControls ? this._renderListControls() : nothing }
 				${repeat(items, item => item.key, item => html`
 					${this._renderListItem(item)}

package/components/list/demo/list-drag-and-drop.html

@@ -38,6 +38,14 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Add Button</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested add-button demo-item-key="imgPrimaryAndSupporting" is-draggable selectable></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
 
 	</d2l-demo-page>
 

package/components/list/demo/list-expand-collapse.html

@@ -18,6 +18,7 @@
 			<template>
 				<d2l-demo-list-nested
 					demo-item-key="imgPrimaryAndSupporting"
+					add-button
 					is-draggable
 					selectable
 					expandable
@@ -45,6 +46,7 @@
 			<template>
 				<d2l-demo-list-nested
 					demo-item-key="imgPrimaryAndSupporting"
+					add-button
 					is-draggable
 					selectable
 					expandable

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

@@ -131,7 +131,7 @@
 								<div>Earth Sciences (L1)</div>
 								<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
 							</d2l-list-item-content>
-							<d2l-list slot="nested" grid separators="all">
+							<d2l-list add-button slot="nested" grid separators="all">
 								<d2l-list-item selectable key="L2-1" label="Label for L2-1">
 									<d2l-list-item-content>
 										<div>Introductory Earth Sciences (L2)</div>

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

@@ -153,8 +153,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host([_focusing-primary-action]) [slot="control-container"]::after,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::before,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::after,
-			:host([_show-add-button]) [slot="control-container"]::after,
 			:host([_show-add-button]) [slot="control-container"]::before,
+			:host([_show-add-button]) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -413,7 +413,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-top: -11.5px;
 			}
 			:host([draggable][selectable][_hovering]) [slot="add"],
-			:host([draggable][selectable][_focusing]) [slot="add"] {
+			:host([draggable][selectable][_focusing]) [slot="add"],
+			:host([draggable][selectable][_hovering]) [slot="add-top"],
+			:host([draggable][selectable][_focusing]) [slot="add-top"] {
 				padding-inline-end: 6px;
 			}
 			.dragging [slot="add"] {
@@ -719,7 +721,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					class="d2l-list-item-actions-container">
 					<slot name="actions" class="d2l-list-item-actions">${actions}</slot>
 				</div>
-				${this._showAddButton && !this._hasNestedListAddButton ? html`
+				${this._showAddButton && (!this._hasNestedListAddButton || (this.expandable && !this.expanded)) ? html`
 				<div slot="add">
 					<d2l-button-add text="${addButtonText}" mode="icon-when-interacted" @click="${this._handleButtonAddClick}"></d2l-button-add>
 				</div>

package/custom-elements.json

@@ -7785,6 +7785,10 @@
       "name": "d2l-demo-list-nested",
       "path": "./components/list/demo/demo-list-nested.js",
       "attributes": [
+        {
+          "name": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "demo-item-key",
           "type": "string"
@@ -7835,6 +7839,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "addButton",
+          "attribute": "add-button",
+          "type": "boolean"
+        },
         {
           "name": "demoItemKey",
           "attribute": "demo-item-key",

package/package.json

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