@brightspace-ui/core 2.177.1 → 2.177.2

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.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",