@brightspace-ui/core 2.142.1 → 2.143.0

package/components/card/card.js

@@ -318,7 +318,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 	_onBadgeResize(entries) {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];
-		this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px`;
+		requestAnimationFrame(() => this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px`);
 	}
 
 	_onDropdownClose() {
@@ -334,7 +334,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		const entry = entries[0];
 		// firefox has a rounding error when calculating the height of the contentRect
 		// with `box-sizing: border-box;` so check for numbers which are close to 0 as well
-		this._footerHidden = (entry.contentRect.height < 1);
+		requestAnimationFrame(() => this._footerHidden = (entry.contentRect.height < 1));
 	}
 
 	_onLinkBlur() {

package/components/count-badge/count-badge-mixin.js

@@ -216,7 +216,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 			aria-live="${this.announceChanges ? 'polite' : 'off'}">
 			${innerHtml}
 		</div>
-		${this.hasTooltip && !this.skeleton ? html`<d2l-tooltip for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
+		${this.hasTooltip && !this.skeleton ? html`<d2l-tooltip class="vdiff-target" for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
 		`;
 	}
 };

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

@@ -11,6 +11,7 @@
 			import '../../dropdown/dropdown-more.js';
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
+			import '../list-controls.js';
 			import '../list-item-content.js';
 			import '../list-item.js';
 			import '../list.js';
@@ -161,10 +162,6 @@
 			<d2l-demo-snippet code-view-hidden>
 				<template>
 					<d2l-list>
-						<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>
-						</d2l-list-controls>
 						<d2l-list-item key="L1-1" label="Label for L1-1" color="#ffba59" expandable expanded>
 							<d2l-list-item-content>
 								<div>Earth Sciences (L1)</div>

package/components/list/list-controls.js

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { SelectionControls } from '../selection/selection-controls.js';
 
@@ -8,7 +9,8 @@ import { SelectionControls } from '../selection/selection-controls.js';
 export class ListControls extends SelectionControls {
 	static get properties() {
 		return {
-			_extendSeparator: { state: true }
+			_extendSeparator: { state: true },
+			_siblingHasColor: { state: true }
 		};
 	}
 
@@ -22,6 +24,9 @@ export class ListControls extends SelectionControls {
 			:host([no-sticky]) {
 				z-index: auto;
 			}
+			.d2l-list-controls-color {
+				padding: 0 1.8rem;
+			}
 			.d2l-list-controls-extend-separator {
 				padding: 0 0.9rem;
 			}
@@ -31,6 +36,9 @@ export class ListControls extends SelectionControls {
 	constructor() {
 		super();
 		this._extendSeparator = false;
+		this._siblingHasColor = false;
+
+		this._parentChildUpdateSubscription = new EventSubscriberController(this, 'list-child-status');
 	}
 
 	connectedCallback() {
@@ -41,9 +49,18 @@ export class ListControls extends SelectionControls {
 		if (this._extendSeparator) this.style.setProperty('--d2l-selection-controls-padding', '0px');
 	}
 
+	updateSiblingHasChildren() {
+		// TODO: implement this in order to have consistent spacing when nested items
+	}
+
+	updateSiblingHasColor(value) {
+		this._siblingHasColor = value;
+	}
+
 	_getSelectionControlsContainerClasses() {
 		return {
 			...super._getSelectionControlsContainerClasses(),
+			'd2l-list-controls-color': this._siblingHasColor,
 			'd2l-list-controls-extend-separator': this._extendSeparator
 		};
 	}

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

@@ -70,7 +70,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 */
 			breakpoints: { type: Array },
 			/**
-			 * A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).
+			 * A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).
 			 * @type {string}
 			 */
 			color: { type: String },
@@ -91,13 +91,15 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			paddingType: { type: String, attribute: 'padding-type' },
 			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
+			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
 			_hovering: { type: Boolean, reflect: true },
 			_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
 			_focusing: { type: Boolean, reflect: true },
 			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
-			_hasNestedList: { state: true }
+			_hasNestedList: { state: true },
+			_siblingHasColor: { state: true }
 		};
 	}
 
@@ -318,10 +320,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin: 0;
 			}
 
-			:host(:not([draggable])[color]) [slot="outside-control-container"] {
+			:host(:not([draggable])[_has-color-slot]) [slot="outside-control-container"] {
 				margin-left: -6px;
 			}
-			:host(:not([draggable])[dir="rtl"][color]) [slot="outside-control-container"] {
+			:host(:not([draggable])[dir="rtl"][_has-color-slot]) [slot="outside-control-container"] {
 				margin-left: 0;
 				margin-right: -6px;
 			}
@@ -394,12 +396,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				padding-left: 12px;
 				padding-right: 0;
 			}
-			:host([expandable]) .d2l-list-item-color-outer {
-				padding-right: 6px;
+			.d2l-list-item-color-outer + .d2l-list-expand-collapse {
+				margin-left: -6px;
 			}
-			:host([dir="rtl"][expandable]) .d2l-list-item-color-outer {
-				padding-left: 6px;
-				padding-right: 0;
+			:host([dir="rtl"]) .d2l-list-item-color-outer + .d2l-list-expand-collapse {
+				margin-left: 0;
+				margin-right: -6px;
 			}
 		`];
 
@@ -415,7 +417,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
+		this._hasColorSlot = false;
 		this._hasNestedList = false;
+		this._siblingHasColor = false;
 	}
 
 	get breakpoints() {
@@ -437,6 +441,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		const oldValue = this._color;
 		this._color = getValidHexColor(value, true);
 		this.requestUpdate('value', oldValue);
+		this.dispatchEvent(new CustomEvent('d2l-list-item-property-change', { bubbles: true, composed: true, detail: { name: 'color', value: this._color } }));
 	}
 
 	connectedCallback() {
@@ -514,6 +519,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		else this.scrollIntoView({ behavior: 'smooth', block: alignToTop ? 'start' : 'end' });
 	}
 
+	updateSiblingHasColor(siblingHasColor) {
+		this._siblingHasColor = siblingHasColor;
+	}
+
+	willUpdate(changedProperties) {
+		if (changedProperties.has('_siblingHasColor') || changedProperties.has('color')) {
+			this._hasColorSlot = this.color || this._siblingHasColor;
+		}
+	}
+
 	_getFlattenedListItems(listItem) {
 		const listItems = new Map();
 		const lazyLoadListItems = new Map();
@@ -642,7 +657,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'd2l-dragging-over': this._draggingOver
 		};
 		const colorStyles = {
-			backgroundColor: this.color || undefined
+			backgroundColor: this._hasColorSlot ? this.color : undefined
 		};
 
 		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId) : null);
@@ -662,7 +677,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				${this._renderDragHandle(this._renderOutsideControl)}
 				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
 				<div slot="control-container"></div>
-				${this.color ? html`
+				${this._hasColorSlot ? html`
 				<div slot="color-indicator" class="d2l-list-item-color-outer">
 					<div class="d2l-list-item-color-inner" style="${styleMap(colorStyles)}"></div>
 				</div>` : nothing}

package/components/list/list.js

@@ -78,6 +78,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this.extendSeparators = false;
 		this.grid = false;
 		this._listItemChanges = [];
+		this._childHasColor = false;
 		this._childHasExpandCollapseToggle = false;
 
 		this._listChildrenUpdatedSubscribers = new SubscriberRegistryController(this, 'list-child-status', {
@@ -90,6 +91,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		super.connectedCallback();
 		this.addEventListener('d2l-list-item-showing-count-change', this._handleListItemShowingCountChange);
 		this.addEventListener('d2l-list-item-nested-change', (e) => this._handleListIemNestedChange(e));
+		this.addEventListener('d2l-list-item-property-change', (e) => this._handleListItemPropertyChange(e));
 	}
 
 	disconnectedCallback() {
@@ -224,17 +226,31 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			e.stopPropagation();
 		}
 		const items = this.getItems();
+		let aChildHasColor = false;
 		let aChildHasToggleEnabled = false;
 		for (const item of items) {
-			if (item.expandable) {
-				aChildHasToggleEnabled = true;
-				break;
-			}
+			if (item.color) aChildHasColor = true;
+			if (item.expandable) aChildHasToggleEnabled = true;
+			if (aChildHasToggleEnabled && aChildHasColor) break;
 		}
+		this._childHasColor = aChildHasColor;
 		this._childHasExpandCollapseToggle = aChildHasToggleEnabled;
 		this._listChildrenUpdatedSubscribers.updateSubscribers();
 	}
 
+	_handleListItemPropertyChange(e) {
+		e.stopPropagation();
+		if (e.detail.name === 'color') {
+			if (e.detail.value) {
+				this._childHasColor = true;
+				this._listChildrenUpdatedSubscribers.updateSubscribers();
+			} else {
+				// if color has had its value removed then need to loop through all the items to determine if there are still others with colors
+				this._handleListIemNestedChange(e);
+			}
+		}
+	}
+
 	_handleListItemShowingCountChange() {
 		if (this.slot === 'nested') return;
 
@@ -260,10 +276,14 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	_updateActiveSubscriber(subscriber) {
 		subscriber.updateSiblingHasChildren(this._childHasExpandCollapseToggle);
+		subscriber.updateSiblingHasColor(this._childHasColor);
 	}
 
 	_updateActiveSubscribers(subscribers) {
-		subscribers.forEach(subscriber => subscriber.updateSiblingHasChildren(this._childHasExpandCollapseToggle));
+		subscribers.forEach(subscriber => {
+			subscriber.updateSiblingHasChildren(this._childHasExpandCollapseToggle);
+			subscriber.updateSiblingHasColor(this._childHasColor);
+		});
 	}
 
 }

package/components/tooltip/tooltip.js

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { cssEscape, elemIdListAdd, elemIdListRemove, getBoundingAncestor, getOffsetParent } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { bodySmallStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isFocusable } from '../../helpers/focus.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -501,11 +502,17 @@ class Tooltip extends RtlMixin(LitElement) {
 			}
 		}
 
+		const contentClasses = {
+			'd2l-tooltip-content': true,
+			'd2l-body-small': true,
+			'vdiff-target': this.showing
+		};
+
 		// Note: role="text" is a workaround for Safari. Otherwise, list-item content is not announced with VoiceOver
 		return html`
 			<div class="d2l-tooltip-container">
 				<div class="d2l-tooltip-position" style=${styleMap(tooltipPositionStyle)}>
-					<div class="d2l-body-small d2l-tooltip-content">
+					<div class="${classMap(contentClasses)}">
 						<div role="text">
 							<slot></slot>
 						</div>

package/custom-elements.json

@@ -7895,7 +7895,7 @@
         },
         {
           "name": "color",
-          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
         {
@@ -7997,7 +7997,7 @@
         {
           "name": "color",
           "attribute": "color",
-          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
         {
@@ -8118,6 +8118,9 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-list-item-property-change"
+        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -8249,7 +8252,7 @@
         },
         {
           "name": "color",
-          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
         {
@@ -8358,7 +8361,7 @@
         {
           "name": "color",
           "attribute": "color",
-          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
         {
@@ -8483,6 +8486,9 @@
           "name": "d2l-list-item-button-click",
           "description": "Dispatched when the item's primary button action is clicked"
         },
+        {
+          "name": "d2l-list-item-property-change"
+        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -8732,7 +8738,7 @@
         },
         {
           "name": "color",
-          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
         {
@@ -8846,7 +8852,7 @@
         {
           "name": "color",
           "attribute": "color",
-          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 6 or 8 character CSS color hex code (e.g., #006fbf).",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
           "type": "string"
         },
         {
@@ -8971,6 +8977,9 @@
           "name": "d2l-list-item-link-click",
           "description": "Dispatched when the item's primary link action is clicked"
         },
+        {
+          "name": "d2l-list-item-property-change"
+        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.142.1",
+  "version": "2.143.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.30",
+    "@brightspace-ui/testing": "^0.32",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",