@brightspace-ui/core 3.207.1 → 3.208.0

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

@@ -243,6 +243,53 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Selectable (show selection when one or more selected or on hover/focus)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-view-switcher label="Layout Options">
+						<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
+						<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
+					</d2l-view-switcher>
+					<d2l-list layout="tiles" selection-when-interacted>
+						<d2l-list-item label="item 1" key="1" selectable tile-header>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Identify categories of physical activities</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation A1.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 2" key="2" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.1</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 3" key="3" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 4" key="4" selectable tile-header>
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+					<script data-demo-hide>
+						(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Actions</h2>
 
 			<d2l-demo-snippet>

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

@@ -124,9 +124,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
 			_focusing: { type: Boolean, reflect: true },
 			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
+			_forceShowSelection: { type: Boolean, attribute: '_force-show-selection', reflect: true },
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
 			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
+			_selectionWhenInteracted: { type: Boolean, attribute: '_selection-when-interacted', reflect: true },
 			_siblingHasColor: { state: true },
 		};
 	}
@@ -467,6 +469,35 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				padding: 0;
 			}
 
+			:host([layout="tile"][_selection-when-interacted]) [slot="control"] {
+				opacity: 0;
+				transform: translateY(-10px);
+				transition: opacity 200ms ease-out, transform 0ms ease-out 300ms;
+			}
+			:host([layout="tile"][_selection-when-interacted]) [slot="control"]:hover,
+			:host([layout="tile"][_selection-when-interacted][_focusing]) [slot="control"],
+			:host([layout="tile"][_selection-when-interacted][_force-show-selection]) [slot="control"],
+			:host([layout="tile"][_selection-when-interacted][_hovering-selection]) [slot="control"],
+			:host([layout="tile"][_selection-when-interacted][_hovering]) [slot="control"] {
+				opacity: 1;
+				transform: none;
+				transition: opacity 200ms ease-out, transform 200ms ease-out;
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				:host([layout="tile"][_selection-when-interacted]) [slot="control"] {
+					transform: none;
+					transition: none;
+				}
+				:host([layout="tile"][_selection-when-interacted]) [slot="control"]:hover,
+				:host([layout="tile"][_selection-when-interacted][_focusing]) [slot="control"],
+				:host([layout="tile"][_selection-when-interacted][_force-show-selection]) [slot="control"],
+				:host([layout="tile"][_selection-when-interacted][_hovering-selection]) [slot="control"],
+				:host([layout="tile"][_selection-when-interacted][_hovering]) [slot="control"] {
+					transition: none;
+				}
+			}
+
 			:host([layout="tile"]) [slot="content"] ::slotted([slot="illustration"]),
 			:host([layout="tile"]) .d2l-list-item-illustration > * {
 				border-end-end-radius: 0;
@@ -649,11 +680,13 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this.isVisibleOnAncestorTarget = true;
 		this.noPrimaryAction = false;
 		this.paddingType = 'normal';
+		this._selectionWhenInteracted = false;
 		this.tileHeader = false;
 		this.tilePaddingType = 'normal';
 		this._addButtonTopId = getUniqueId();
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
+		this._forceShowSelection = false;
 		this._hasColorSlot = false;
 		this._hasListItemContent = true;
 		this._hasNestedList = false;
@@ -955,7 +988,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					</d2l-button-add>
 				</div>
 				` : nothing}
-				<div slot="header"></div>
+				<div slot="header" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}"></div>
 				<div slot="outside-control-container" class="${classMap(outsideClasses)}"></div>
 				<div slot="before-content"></div>
 				${this._renderDropTarget()}

package/components/list/list.js

@@ -95,6 +95,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			 * @default "all"
 			 */
 			separators: { type: String, reflect: true },
+			/**
+			 * Show selection only on hover, focus or if at least one item is selected. Exclusive for the tile layout
+			 * @type {boolean}
+			 */
+			selectionWhenInteracted: { type: Boolean, attribute: 'selection-when-interacted', reflect: true },
 			_breakpoint: { type: Number, reflect: true },
 			_slimColor: { type: Boolean, reflect: true, attribute: '_slim-color' }
 		};
@@ -216,6 +221,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		// check if list items are expandable on first render so we adjust sibling spacing appropriately
 		this._handleListItemNestedChange();
 		this.addEventListener('d2l-list-item-selected', e => {
+			this._updateItemShowSelection();
 
 			// batch the changes from select-all and nested lists
 			if (this._listItemChanges.length === 0) {
@@ -269,6 +275,9 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		if (changedProperties.has('layout') && changedProperties.get('layout') !== undefined && this.layout) {
 			this._updateItemLayouts();
 		}
+		if (changedProperties.has('selectionWhenInteracted')) {
+			this._updateItemShowSelection();
+		}
 		if (changedProperties.has('dragHandleShowAlways')) {
 			this._updateItemDragHandleShowAlways();
 		}
@@ -508,6 +517,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		});
 
 		this._updateItemLayouts(items);
+		this._updateItemShowSelection(items);
 		this._updateItemDragHandleShowAlways(items);
 
 		/** @ignore */
@@ -540,6 +550,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		if (!items) items = this.getItems();
 		items.forEach(item => item.layout = (this.layout === listLayouts.tiles ? 'tile' : 'normal'));
 	}
+	_updateItemShowSelection(items) {
+		if (!items) items = this.getItems();
+		const state = this.getSelectionInfo().state;
+		items.forEach(item => {
+			item._selectionWhenInteracted = this.selectionWhenInteracted;
+			item._forceShowSelection = this.selectionWhenInteracted && (state === SelectionInfo.states.some || state === SelectionInfo.states.all);
+		});
+	}
+
 }
 
 customElements.define('d2l-list', List);

package/custom-elements.json

@@ -10619,6 +10619,11 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "selection-when-interacted",
+          "description": "Show selection only on hover, focus or if at least one item is selected. Exclusive for the tile layout",
+          "type": "boolean"
+        },
         {
           "name": "add-button",
           "description": "When true, show the inline add button after each list item.",
@@ -10699,6 +10704,12 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "selectionWhenInteracted",
+          "attribute": "selection-when-interacted",
+          "description": "Show selection only on hover, focus or if at least one item is selected. Exclusive for the tile layout",
+          "type": "boolean"
+        },
         {
           "name": "addButton",
           "attribute": "add-button",

package/package.json

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