@brightspace-ui/core 2.142.0 → 2.142.2

package/components/button/button-icon.js

@@ -106,14 +106,10 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				button::-moz-focus-inner {
 					border: 0;
 				}
-				button[disabled]:hover,
-				button[disabled]:focus,
-				:host([active]) button[disabled] {
-					background-color: var(--d2l-button-icon-background-color);
-				}
-				button:hover,
-				button:focus,
-				:host([active]) button {
+
+				button:hover:not([disabled]),
+				button:focus:not([disabled]),
+				:host([active]) button:not([disabled]) {
 					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
 					background-color: var(--d2l-button-icon-background-color-hover);
 				}

package/components/button/floating-buttons.js

@@ -1,12 +1,14 @@
 import '../colors/colors.js';
 import '../../helpers/requestIdleCallback.js';
 import { css, html, LitElement } from 'lit';
-import { getBoundingAncestor, getComposedParent } from '../../helpers/dom.js';
+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 { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-height: 500px)');
+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.
@@ -113,6 +115,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		this._isIntersecting = false;
 		this._recalculateFloating = this._recalculateFloating.bind(this);
 		this._testElem = null;
+		this._scrollIfFloatObsuringFocus = this._scrollIfFloatObsuringFocus.bind(this);
 	}
 
 	connectedCallback() {
@@ -144,6 +147,8 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			}
 		}, { timeout: 5000 });
 
+		document.addEventListener('focusin', this._scrollIfFloatObsuringFocus);
+
 	}
 
 	disconnectedCallback() {
@@ -154,6 +159,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
 			this._testElem.parentNode.removeChild(this._testElem);
 			this._testElem = null;
 		}
+		document.removeEventListener('focusin', this._scrollIfFloatObsuringFocus);
 	}
 
 	render() {
@@ -270,6 +276,27 @@ class FloatingButtons extends RtlMixin(LitElement) {
 		});
 	}
 
+	_scrollIfFloatObsuringFocus() {
+
+		if (!this._floating) return;
+
+		const currentFocusedItem = getComposedActiveElement();
+		if (isComposedAncestor(this, currentFocusedItem)) return;
+
+		const { y: focusedY, height: focusedHeight } = currentFocusedItem.getBoundingClientRect();
+		const { y: floatingY, height: floatingHeight } = this.shadowRoot.querySelector('.d2l-floating-buttons-container').getBoundingClientRect();
+		if (focusedY === 0 || floatingY === 0) return;
+
+		const isObscuring = (floatingY - focusedY) < Math.min(MINIMUM_TARGET_SIZE, focusedHeight);
+		if (!isObscuring) return;
+
+		const prev = currentFocusedItem.style.scrollMarginBottom;
+		currentFocusedItem.style.scrollMarginBottom = `${floatingHeight}px`;
+		currentFocusedItem.scrollIntoView(false);
+		currentFocusedItem.style.scrollMarginBottom = prev;
+
+	}
+
 }
 
 customElements.define('d2l-floating-buttons', FloatingButtons);

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