@brightspace-ui/core 2.178.1 → 2.178.3

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

@@ -72,9 +72,9 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-template-rows:
 					[start add-top-start] minmax(0, min-content)
 					[add-top-end main-start] minmax(0, min-content)
-					[main-end add-start] minmax(0, min-content)
-					[add-end nested-start] minmax(0, min-content)
-					[nested-end end];
+					[main-end nested-start] minmax(0, min-content)
+					[nested-end add-start] minmax(0, min-content)
+					[add-end end];
 			}
 
 			:host([align-nested="control"]) ::slotted([slot="nested"]) {
@@ -242,8 +242,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			<slot name="actions" class="d2l-cell" data-cell-num="7"></slot>
 
 			<slot name="drop-target"></slot>
-			<slot name="add" class="d2l-cell" data-cell-num="9"></slot>
 			<slot name="nested"></slot>
+			<slot name="add" class="d2l-cell" data-cell-num="9"></slot>
 		`;
 	}
 

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

@@ -83,6 +83,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_displayKeyboardTooltip: { type: Boolean },
 			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
 			_hasNestedList: { type: Boolean, reflect: true, attribute: '_has-nested-list' },
+			_hasNestedListAddButton: { type: Boolean, reflect: true, attribute: '_has-nested-list-add-button' },
 			_hovering: { type: Boolean, reflect: true },
 			_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
 			_focusing: { type: Boolean, reflect: true },
@@ -125,11 +126,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				position: absolute;
 				width: 100%;
 			}
-			:host([_show-add-button][_has-nested-list]) [slot="before-content"] {
+			:host([_has-nested-list-add-button]) [slot="before-content"] {
 				border-bottom: 1px solid var(--d2l-color-mica);
 				margin-bottom: -1px;
 			}
-			:host([_show-add-button][_has-nested-list]:not([selection-disabled]):not([skeleton])[selected]) [slot="before-content"] {
+			:host([_has-nested-list-add-button]:not([selection-disabled]):not([skeleton])[selected]) [slot="before-content"] {
 				border-bottom-color: #b6cbe8;
 			}
 			:host(:first-of-type) [slot="control-container"]::before {
@@ -154,7 +155,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			: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"]::before,
-			:host([_show-add-button]) [slot="control-container"]::after,
+			.hide-bottom-border[slot="control-container"]::after,
+			:host([_has-nested-list-add-button]) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -305,19 +307,19 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-bottom: -1px;
 			}
 			/* below hides the border under the d2l-button-add */
-			:host([_hovering-primary-action][_show-add-button]) [slot="outside-control-container"],
-			:host([_hovering-selection][_show-add-button]) [slot="outside-control-container"],
-			:host([_focusing-primary-action][_show-add-button]) [slot="outside-control-container"],
-			:host(:not([selection-disabled]):not([skeleton])[selected][_show-add-button]) [slot="outside-control-container"],
-			:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection][_show-add-button]) [slot="outside-control-container"],
-			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing][_show-add-button]) [slot="outside-control-container"] {
+			:host([_hovering-primary-action]) [slot="outside-control-container"].hide-bottom-border,
+			:host([_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
+			:host([_focusing-primary-action]) [slot="outside-control-container"].hide-bottom-border,
+			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border,
+			:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
+			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border {
 				background-clip: content-box, border-box;
 				background-image: linear-gradient(white, white), linear-gradient(to right, #b6cbe8 20%, transparent 20%, transparent 80%, #b6cbe8 80%);
 				background-origin: border-box;
 				border: double 1px transparent;
 				border-radius: 6px;
 			}
-			:host(:not([selection-disabled]):not([skeleton])[selected][_show-add-button]) [slot="outside-control-container"] {
+			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border {
 				background-image: linear-gradient(#f3fbff, #f3fbff), linear-gradient(to right, #b6cbe8 20%, transparent 20%, transparent 80%, #b6cbe8 80%);
 			}
 			:host([_hovering-primary-action]) d2l-button-add,
@@ -640,7 +642,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		const nestedList = this._getNestedList();
 		if (this._hasNestedList !== !!nestedList) {
 			this._hasNestedList = !!nestedList;
-			this._hasNestedListAddButton = nestedList.hasAttribute('add-button');
+			this._hasNestedListAddButton = this._hasNestedList && nestedList.hasAttribute('add-button');
 			/** @ignore */
 			this.dispatchEvent(new CustomEvent('d2l-list-item-nested-change', { bubbles: true, composed: true }));
 		}
@@ -659,6 +661,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'd2l-list-item-color-inner': true,
 			'd2l-skeletize': this.color
 		};
+		const bottomBorderClasses = {
+			'hide-bottom-border': this._showAddButton && (!this._hasNestedList || this._hasNestedListAddButton)
+		};
 
 		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color)) ? 'control' : undefined;
 		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId) : null);
@@ -678,12 +683,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					<d2l-button-add text="${addButtonText}" mode="icon-when-interacted" @click="${this._handleButtonAddClick}" data-is-first></d2l-button-add>
 				</div>
 				` : nothing}
-				<div slot="outside-control-container"></div>
+				<div slot="outside-control-container" class="${classMap(bottomBorderClasses)}"></div>
 				<div slot="before-content"></div>
 				${this._renderDropTarget()}
 				${this._renderDragHandle(this._renderOutsideControl)}
 				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
-				<div slot="control-container"></div>
+				<div slot="control-container" class="${classMap(bottomBorderClasses)}"></div>
 				${this._hasColorSlot ? html`
 				<div slot="color-indicator" class="d2l-list-item-color-outer">
 					<div class="${classMap(colorClasses)}" style="${styleMap(colorStyles)}"></div>
@@ -721,12 +726,12 @@ 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._renderNested(nested)}
 				${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>
 				` : nothing}
-				${this._renderNested(nested)}
 			</d2l-list-item-generic-layout>
 		`;
 

package/package.json

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