@brightspace-ui/core 2.176.1 → 2.176.2

package/components/button/button-add.js

@@ -54,8 +54,9 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 				cursor: pointer;
 				display: flex;
 				font-family: inherit;
-				height: 0.9rem;
+				height: 11px;
 				justify-content: center;
+				margin: 6.5px 0; /* (d2l-button-add-icon-text height - line height) / 2 */
 				outline: none;
 				padding: 0;
 				position: relative;
@@ -64,14 +65,14 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 				width: 100%;
 				z-index: 1; /* needed for button-add to have expected hover behaviour in list (hover from below, tooltip position) */
 			}
-			:host([mode="icon-when-interacted"]) button {
-				height: 7px;
+			:host([mode="icon-and-text"]) button {
+				margin: calc((1.5rem - 11px) / 2) 0; /* (d2l-button-add-icon-text height - line height) / 2 */
 			}
 
 			.line {
 				background: var(--d2l-button-add-line-color);
 				height: 1px;
-				margin: 3px 0;
+				margin: 5px 0;
 				width: 100%;
 			}
 
@@ -167,13 +168,12 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 	render() {
 		const text = this.text || this.localize('components.button-add.addItem');
 		const id = !this.mode !== MODE.icon_and_text ? this._buttonId : undefined;
-		const offset = this.mode === MODE.icon_when_interacted ? 23 : 18;
 
 		const content = this.mode !== MODE.icon_and_text
 			? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.icon_when_interacted}" animation-type="opacity"></d2l-button-add-icon-text>`
 			: html`<d2l-button-add-icon-text text="${text}"></d2l-button-add-icon-text>`;
 		const tooltip = this.mode !== MODE.icon_and_text
-			? html`<d2l-tooltip class="vdiff-target" delay="100" offset="${offset}" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`
+			? html`<d2l-tooltip class="vdiff-target" delay="100" offset="21" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`
 			: nothing;
 
 		return html`

package/components/list/demo/list-item-actions.html

@@ -296,7 +296,7 @@
 
 			<d2l-demo-snippet id="grid-link-demo">
 				<template>
-					<d2l-list grid>
+					<d2l-list grid add-button>
 						<d2l-list-controls slot="controls">
 							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>

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

@@ -92,6 +92,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			::slotted([slot="content"]),
 			::slotted([slot="actions"]),
 			::slotted([slot="outside-control-action"]),
+			::slotted([slot="before-content"]),
 			::slotted([slot="control-action"]),
 			::slotted([slot="content-action"]),
 			::slotted([slot="outside-control-container"]),
@@ -127,6 +128,10 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: color-start / color-end;
 			}
 
+			::slotted([slot="before-content"]) {
+				grid-column: color-start / content-start;
+			}
+
 			::slotted([slot="control-action"]) ~ ::slotted([slot="content"]),
 			::slotted([slot="outside-control-action"]) ~ ::slotted([slot="content"]) {
 				pointer-events: unset;
@@ -224,6 +229,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 			<slot name="control-container"></slot>
 			<slot name="outside-control-container"></slot>
+			<slot name="before-content"></slot>
 
 			<slot name="content-action" class="d2l-cell" data-cell-num="6"></slot>
 			<slot name="outside-control" class="d2l-cell" data-cell-num="2"></slot>

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

@@ -82,6 +82,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_addButtonText: { state: true },
 			_displayKeyboardTooltip: { type: Boolean },
 			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
+			_hasNestedList: { type: Boolean, reflect: true, attribute: '_has-nested-list' },
 			_hovering: { type: Boolean, reflect: true },
 			_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
 			_focusing: { type: Boolean, reflect: true },
@@ -89,7 +90,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
 			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
-			_hasNestedList: { state: true },
 			_siblingHasColor: { state: true },
 		};
 	}
@@ -125,6 +125,13 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				position: absolute;
 				width: 100%;
 			}
+			:host([_show-add-button][_has-nested-list]) [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"] {
+				border-bottom-color: #b6cbe8;
+			}
 			:host(:first-of-type) [slot="control-container"]::before {
 				top: 0;
 			}
@@ -265,9 +272,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin: 0 -12px;
 			}
 			.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
-				border-left: none;
-				border-radius: 0;
-				border-right: none;
+				border-left: none !important;
+				border-radius: 0 !important;
+				border-right: none !important;
 			}
 			:host([draggable]) [slot="outside-control-container"],
 			.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
@@ -297,13 +304,28 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
 				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"] {
+				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"] {
+				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,
 			:host([_hovering-selection]) d2l-button-add,
 			:host([_focusing-primary-action]) d2l-button-add,
-			:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) d2l-button-add,
 			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) d2l-button-add,
 			:host(:not([selection-disabled]):not([skeleton])[selected]) d2l-button-add {
-				--d2l-button-add-line-color: #b6cbe8;
+				--d2l-button-add-line-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
 			:host([_hovering-primary-action]) [slot="outside-control-container"],
 			:host([_hovering-selection]) [slot="outside-control-container"] {
@@ -387,8 +409,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 			[slot="add"],
 			[slot="add-top"] {
-				margin-bottom: -4px;
-				margin-top: -3px;
+				margin-bottom: -12.5px;
+				margin-top: -11.5px;
 			}
 			:host([draggable][selectable][_hovering]) [slot="add"],
 			:host([draggable][selectable][_focusing]) [slot="add"] {
@@ -655,6 +677,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				</div>
 				` : nothing}
 				<div slot="outside-control-container"></div>
+				<div slot="before-content"></div>
 				${this._renderDropTarget()}
 				${this._renderDragHandle(this._renderOutsideControl)}
 				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}

package/components/list/list.js

@@ -323,9 +323,9 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	_handleListItemAddButtonClick(e) {
 		e.stopPropagation();
 		/**
-		 * Dispatched when the add button directly after the item is clicked. Event detail includes position ('before' or 'after') and key.
-		 * The key belongs to the list item adjacent to where the new item should be positioned.
-		 * The position represents where the new item should be positioned relative to the item with that key.
+		 * Dispatched when the add button directly before or after the item is clicked. Event detail includes position ('before' or 'after') and key.
+		 * The `key` belongs to the list item adjacent to where the new item should be positioned.
+		 * The `position` represents where the new item should be positioned relative to the item with that key.
 		 * */
 		this.dispatchEvent(new CustomEvent('d2l-list-add-button-click', { detail: { key: e.target.key, position: e.detail.position } }));
 	}

package/custom-elements.json

@@ -9203,7 +9203,7 @@
         },
         {
           "name": "d2l-list-add-button-click",
-          "description": "Dispatched when the add button directly after the item is clicked. Event detail includes position ('before' or 'after') and key.\nThe key belongs to the list item adjacent to where the new item should be positioned.\nThe position represents where the new item should be positioned relative to the item with that key."
+          "description": "Dispatched when the add button directly before or after the item is clicked. Event detail includes position ('before' or 'after') and key.\nThe `key` belongs to the list item adjacent to where the new item should be positioned.\nThe `position` represents where the new item should be positioned relative to the item with that key."
         }
       ],
       "slots": [

package/package.json

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