@brightspace-ui/core 3.140.0 → 3.141.0

package/components/button/button-add.js

@@ -3,6 +3,7 @@ import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -15,6 +16,7 @@ const MODE = {
 	icon_and_text: 'icon-and-text',
 	icon_when_interacted: 'icon-when-interacted'
 };
+const whiteAddButtonBackgroundFlag = getFlag('GAUD-7495-add-button-white-background', true);
 
 /**
  * A component for quickly adding items to a specific locaiton.
@@ -31,7 +33,8 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 			 * ACCESSIBILITY: The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.
 			 * @type {string}
 			 */
-			text: { type: String, required: true }
+			text: { type: String, required: true },
+			_whiteBackgroundAddButton: { type: Boolean, attribute: '_white-background-add-button', reflect: true }
 		};
 	}
 
@@ -102,9 +105,14 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 			}
 
 			button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
+				background-color: white;
 				border-radius: 0.3rem;
 				box-shadow: 0 0 0 2px var(--d2l-button-add-hover-focus-color);
 			}
+			/* remove when GAUD-7495-add-button-white-background is cleaned up */
+			:host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
+				background-color: transparent;
+			}
 			:host([mode="icon-when-interacted"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text,
 			:host([mode="icon"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
 				border-radius: 0.2rem;
@@ -159,6 +167,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 		this.mode = MODE.icon;
 
 		this._buttonId = getUniqueId();
+		this._whiteBackgroundAddButton = whiteAddButtonBackgroundFlag;
 	}
 
 	static get focusElementSelector() {
@@ -237,13 +246,25 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
 	}
 
 	render() {
-		return html`
+		const whiteBackgroundAddButton = html`
+			<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+				<g>
+					<circle cx="9" cy="9" r="9" fill="#fff"/>
+					<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2a7 7 0 1 1-7 7 7.008 7.008 0 0 1 7-7Zm0-2a9 9 0 1 0 0 18A9 9 0 0 0 9 0Z"/>
+					<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5a1 1 0 0 0-2 0v3H5a1 1 0 0 0 0 2h3v3a1 1 0 1 0 2 0v-3h3a1 1 0 1 0 0-2h-3V5Z"/>
+				</g>
+			</svg>
+		`;
+		const translucentBackgroundAddButton = html`
 			<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
 				<g>
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C10.3845 2 11.7378 2.41054 12.889 3.17971C14.0401 3.94888 14.9373 5.04213 15.4672 6.32122C15.997 7.6003 16.1356 9.00777 15.8655 10.3656C15.5954 11.7235 14.9287 12.9708 13.9497 13.9497C12.9708 14.9287 11.7235 15.5954 10.3656 15.8655C9.00777 16.1356 7.6003 15.997 6.32122 15.4672C5.04213 14.9373 3.94888 14.0401 3.17971 12.889C2.41054 11.7378 2 10.3845 2 9C2.00212 7.14413 2.7403 5.36489 4.05259 4.05259C5.36489 2.7403 7.14413 2.00212 9 2V2ZM9 0C6.61305 0 4.32387 0.948212 2.63604 2.63604C0.948212 4.32387 0 6.61305 0 9C0 11.3869 0.948212 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948212 11.3869 0 9 0V0Z" />
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 4.44772 9.55228 4 9 4C8.44772 4 8 4.44772 8 5V8H5C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10H8V13C8 13.5523 8.44772 14 9 14C9.55228 14 10 13.5523 10 13V10H13C13.5523 10 14 9.55228 14 9C14 8.44772 13.5523 8 13 8H10V5Z" />
 				</g>
 			</svg>
+		`;
+		return html`
+			${whiteAddButtonBackgroundFlag ? whiteBackgroundAddButton : translucentBackgroundAddButton}
 			${this.text ? html`<span class="d2l-label-text">${this.text}</span>` : nothing}
 		`;
 	}

package/components/button/floating-buttons.js

@@ -4,7 +4,7 @@ import { css, html, LitElement } from 'lit';
 import { getBoundingAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
 import { getLegacyOffsetParent } from '../../helpers/offsetParent-legacy.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-height: 500px)');
@@ -14,7 +14,7 @@ const MINIMUM_TARGET_SIZE = 24;
  * A wrapper component to display floating workflow buttons. When the normal position of the workflow buttons is below the bottom edge of the viewport, they will dock at the bottom edge. When the normal position becomes visible, they will undock.
  * @slot - Content to be displayed in the floating container
  */
-class FloatingButtons extends RtlMixin(LitElement) {
+class FloatingButtons extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -26,8 +26,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			_containerMarginLeft: { attribute: false, type: String },
 			_containerMarginRight: { attribute: false, type: String },
 			_floating: { type: Boolean, reflect: true },
-			_innerContainerLeft: { attribute: false, type: String },
-			_innerContainerRight: { attribute: false, type: String }
+			_innerContainerLeft: { attribute: false, type: String }
 		};
 	}
 
@@ -80,21 +79,14 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			.d2l-floating-buttons-inner-container ::slotted(d2l-button),
 			.d2l-floating-buttons-inner-container ::slotted(button),
 			.d2l-floating-buttons-inner-container ::slotted(.d2l-button) {
+				margin-inline-end: 0.75rem !important;
 				margin-bottom: 0.75rem !important;
-				margin-right: 0.75rem !important;
 			}
 
 			.d2l-floating-buttons-inner-container ::slotted(d2l-overflow-group) {
 				padding-bottom: 0.75rem !important;
 			}
 
-			:host([dir="rtl"]) .d2l-floating-buttons-inner-container ::slotted(d2l-button),
-			:host([dir="rtl"]) .d2l-floating-buttons-inner-container ::slotted(button),
-			:host([dir="rtl"]) .d2l-floating-buttons-inner-container ::slotted(.d2l-button) {
-				margin-left: 0.75rem !important;
-				margin-right: 0 !important;
-			}
-
 			@media (prefers-reduced-motion: reduce) {
 				:host([_floating]:not([always-float])) .d2l-floating-buttons-container {
 					transition: none;
@@ -110,7 +102,6 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		this._containerMarginRight = '';
 		this._floating = false;
 		this._innerContainerLeft = '';
-		this._innerContainerRight = '';
 		this._intersectionObserver = null;
 		this._isIntersecting = false;
 		this._recalculateFloating = this._recalculateFloating.bind(this);
@@ -125,13 +116,15 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		// if browser doesn't support IntersectionObserver, we don't float
 		if (typeof(IntersectionObserver) !== 'function') {
 			this._isIntersecting = true;
+			this.resolveLoadingComplete();
 			return;
 		}
-		this._intersectionObserver = this._intersectionObserver || new IntersectionObserver((entries) => {
-			entries.forEach((entry) => {
+		this._intersectionObserver = this._intersectionObserver || new IntersectionObserver(async(entries) => {
+			for (const entry of entries) {
 				this._isIntersecting = entry.isIntersecting;
-				this._recalculateFloating();
-			});
+				await this._recalculateFloating();
+			}
+			this.resolveLoadingComplete();
 		});
 
 		// observe intersection of a fake sibling element since host is sticky
@@ -164,13 +157,12 @@ class FloatingButtons extends RtlMixin(LitElement) {
 
 	render() {
 		const containerStyle = {
-			marginLeft: this._containerMarginLeft,
-			marginRight: this._containerMarginRight
+			marginInlineStart: this._containerMarginLeft,
+			marginInlineEnd: this._containerMarginRight
 		};
 
 		const innerContainerStyle = {
-			marginLeft: this._innerContainerLeft,
-			marginRight: this._innerContainerRight
+			marginInlineStart: this._innerContainerLeft
 		};
 
 		return html`
@@ -193,7 +185,6 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		this._containerMarginLeft = '';
 		this._containerMarginRight = '';
 		this._innerContainerLeft = '';
-		this._innerContainerRight = '';
 
 		if (!this._floating) return;
 
@@ -218,12 +209,8 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			this._containerMarginRight = `-${containerRight}px`;
 		}
 
-		if (this.dir !== 'rtl') {
-			if (containerLeft !== 0) {
-				this._innerContainerLeft = `${containerLeft}px`;
-			}
-		} else {
-			this._innerContainerRight = `${containerRight}px`;
+		if (containerLeft !== 0) {
+			this._innerContainerLeft = `${containerLeft}px`;
 		}
 
 	}
@@ -251,29 +238,30 @@ class FloatingButtons extends RtlMixin(LitElement) {
 
 	}
 
-	_recalculateFloating() {
-		requestAnimationFrame(() => {
-
-			if (this.alwaysFloat) {
-				this._floating = true;
-				this._calcContainerPosition();
-				return;
-			}
+	async _recalculateFloating() {
+		await new Promise(resolve => requestAnimationFrame(resolve));
 
-			const viewportIsLessThanMinHeight = mediaQueryList.matches;
-			if (viewportIsLessThanMinHeight) {
-				this._floating = false;
-				this._calcContainerPosition();
-				return;
-			}
+		if (this.alwaysFloat) {
+			this._floating = true;
+			this._calcContainerPosition();
+			await this.updateComplete;
+			return;
+		}
 
-			const shouldFloat = !this._isIntersecting;
-			if (shouldFloat !== this._floating) {
-				this._floating = shouldFloat;
-				this._calcContainerPosition();
-			}
+		const viewportIsLessThanMinHeight = mediaQueryList.matches;
+		if (viewportIsLessThanMinHeight) {
+			this._floating = false;
+			this._calcContainerPosition();
+			await this.updateComplete;
+			return;
+		}
 
-		});
+		const shouldFloat = !this._isIntersecting;
+		if (shouldFloat !== this._floating) {
+			this._floating = shouldFloat;
+			this._calcContainerPosition();
+			await this.updateComplete;
+		}
 	}
 
 	_scrollIfFloatObsuringFocus() {

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

@@ -13,6 +13,7 @@ class ListDemoNav extends LitElement {
 
 	static get properties() {
 		return {
+			addButton: { type: Boolean, attribute: 'add-button' },
 			_currentItem: { state: true }
 		};
 	}
@@ -36,6 +37,7 @@ class ListDemoNav extends LitElement {
 
 	constructor() {
 		super();
+		this.addButton = false;
 		this._currentItem = null;
 	}
 
@@ -43,6 +45,7 @@ class ListDemoNav extends LitElement {
 		return html`
 			<div @d2l-list-items-move="${this._handleListItemsMove}">
 				<d2l-list 
+					?add-button="${this.addButton}"
 					grid 
 					drag-multiple
 					@d2l-list-item-link-click="${this._handleItemClick}">
@@ -151,7 +154,7 @@ class ListDemoNav extends LitElement {
 					}
 				</d2l-list-item-content>
 				${hasSubList ? html`
-					<d2l-list slot="nested" grid>
+					<d2l-list slot="nested" grid ?add-button="${this.addButton}">
 						${repeat(item.items, (subItem) => subItem.key, (subItem) => this._renderItem(subItem))}
 					</d2l-list>`
 						: nothing

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

@@ -80,7 +80,7 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Side nav list (more complex with drag & drop)</h2>
+			<h2>Side nav list (draggable)</h2>
 
 			<d2l-demo-snippet>
 				<template>
@@ -88,6 +88,14 @@
 					</template>
 			</d2l-demo-snippet>
 
+			<h2>Side nav list (draggable, add-button)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-list-nav add-button></d2l-demo-list-nav>
+					</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

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

@@ -110,6 +110,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_listItemNewStyles: { type: Boolean, reflect: true, attribute: '_list-item-new-styles' },
 			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
 			_siblingHasColor: { state: true },
+			_whiteBackgroundAddButton: { type: Boolean, attribute: '_white-background-add-button', reflect: true },
 		};
 	}
 
@@ -144,11 +145,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				position: absolute;
 				width: 100%;
 			}
-			:host([_has-nested-list-add-button]) [slot="before-content"] {
+			:host(:not([_white-background-add-button])[_has-nested-list-add-button]) [slot="before-content"] {
 				border-bottom: 1px solid var(--d2l-color-mica);
 				margin-bottom: -1px;
 			}
-			:host([_has-nested-list-add-button]:not([selection-disabled]):not([skeleton])[selected]) [slot="before-content"] {
+			:host(:not([_white-background-add-button])[_has-nested-list-add-button]:not([selection-disabled]):not([skeleton])[selected]) [slot="before-content"] {
 				border-bottom-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
 			}
 			:host(:first-of-type) [slot="control-container"]::before {
@@ -172,9 +173,9 @@ 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"]::before,
+			:host(:not([_white-background-add-button])[_show-add-button]) [slot="control-container"]::before,
 			.hide-bottom-border[slot="control-container"]::after,
-			:host([_has-nested-list-add-button]) [slot="control-container"]::after,
+			:host(:not([_white-background-add-button])[_has-nested-list-add-button]) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -331,7 +332,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-color: var(--d2l-color-mica);
 				margin-bottom: -1px;
 			}
-			/* below hides the border under the d2l-button-add */
+			/* below hides the border under the d2l-button-add; clean up with GAUD-7495-add-button-white-background */
 			:host([_hovering-control]) [slot="outside-control-container"].hide-bottom-border,
 			:host([_hovering-primary-action]) [slot="outside-control-container"].hide-bottom-border,
 			:host([_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
@@ -479,6 +480,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._listItemInteractiveEnabled = listItemInteractiveFlag;
 		this._listItemNewStyles = useNewStylesFlag;
 		this._siblingHasColor = false;
+		this._whiteBackgroundAddButton = getFlag('GAUD-7495-add-button-white-background', true);
 	}
 
 	get color() {
@@ -713,7 +715,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'd2l-skeletize': this.color
 		};
 		const bottomBorderClasses = {
-			'hide-bottom-border': this._showAddButton && (!this._hasNestedList || this._hasNestedListAddButton)
+			'hide-bottom-border': !this._whiteBackgroundAddButton && (this._showAddButton && (!this._hasNestedList || this._hasNestedListAddButton))
 		};
 
 		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this._listItemInteractiveEnabled && this.expandable && !this.selectable)) ? 'control' : undefined;

package/custom-elements.json

@@ -1039,6 +1039,14 @@
           "description": "Indicates to display buttons as always floating",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ],
       "slots": [
@@ -8383,7 +8391,22 @@
     },
     {
       "name": "d2l-demo-list-nav",
-      "path": "./components/list/demo/demo-list-nav.js"
+      "path": "./components/list/demo/demo-list-nav.js",
+      "attributes": [
+        {
+          "name": "add-button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "addButton",
+          "attribute": "add-button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
     },
     {
       "name": "d2l-demo-list-nested-iterations-helper",

package/package.json

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