@brightspace-ui/core 3.199.0 → 3.201.0

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

@@ -467,6 +467,62 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Color Indicator</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle pressed>
+						<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
+						<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
+					</d2l-button-toggle>
+					<d2l-list layout="tiles">
+						<d2l-list-item label="item 1" key="1" color="#29a6ff" 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>
+							<div slot="actions">
+								<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
+							</div>
+						</d2l-list-item>
+						<d2l-list-item label="item 2" key="2" color="#29a6ff">
+							<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>
+							<div slot="actions">
+								<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
+							</div>
+						</d2l-list-item>
+						<d2l-list-item label="item 3" key="3" tile-header selectable color="#29a6ff">
+							<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>
+							<div slot="actions">
+								<d2l-button-icon text="Pin" icon="tier1:pin-filled"></d2l-button-icon>
+								<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
+							</div>
+						</d2l-list-item>
+						<d2l-list-item label="item 4" key="4" color="#29a6ff">
+							<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.wireupListTileToggle(demo))(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

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

@@ -169,7 +169,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
 				?disabled="${this.selectionDisabled}"
-				._disabledTooltip=${this.selectionDisabledTooltip}
+				disabled-tooltip=${this.selectionDisabledTooltip}
 				.hovering="${this._hoveringSelection}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"

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

@@ -256,13 +256,17 @@ class ListItemGenericLayout extends LitElement {
 				grid-row: start / start;
 			}
 
+			:host([layout="tile"]) ::slotted([slot="color-indicator"]) {
+				grid-column: start;
+				grid-row: content-start / content-end;
+			}
+
 			:host(:not([layout="tile"])) slot[name="header"],
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
 			:host([layout="tile"]) slot[name="before-content"],
 			:host([layout="tile"]) slot[name="outside-control"],
 			:host([layout="tile"]) slot[name="outside-control-action"],
-			:host([layout="tile"]) slot[name="color-indicator"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
 			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],

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

@@ -619,6 +619,24 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-inline: 0;
 			}
 
+			:host([layout="tile"]) .d2l-list-item-color-outer {
+				padding: 1px;
+			}
+			:host([layout="tile"]) .d2l-list-item-color-inner {
+				border-end-end-radius: 0;
+				border-end-start-radius: 6px;
+				border-start-end-radius: 0;
+				border-start-start-radius: 6px;
+				width: 5px;
+			}
+			:host([layout="tile"][tile-header]) .d2l-list-item-color-outer {
+				padding-block-start: 0;
+			}
+			:host([layout="tile"][tile-header]) .d2l-list-item-color-inner {
+				border-start-end-radius: 0;
+				border-start-start-radius: 0;
+			}
+
 		`];
 
 		super.styles && styles.unshift(super.styles);

package/components/selection/README.md

@@ -247,6 +247,7 @@ Note: `d2l-list-item` already provides a selection input for selectable list ite
 | `label` | String | Accessible hidden label for the input. |
 | `labelled-by` | String | Id reference to the accessible label for the input. **Note:** if specified, it must reference an element in the same DOM context. |
 | `disabled` | Boolean | Disables the input element(checkbox/radio btn). |
+| `disabled-tooltip` | String | Tooltip text when disabled. |
 | `selected` | Boolean | State of the input. |
 
 ### Events

package/components/selection/selection-input.js

@@ -30,6 +30,11 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
 			/**
 			 * Private. Force hovering state of input
 			 * @ignore
@@ -41,8 +46,6 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {string}
 			 */
 			key: { type: String },
-			/* passthrough for list-item */
-			_disabledTooltip: { state: true },
 			_indeterminate: { type: Boolean },
 			_provider: { type: Object }
 		};
@@ -67,7 +70,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	}
 
 	get focusDisabled() {
-		return this.disabled && !this._disabledTooltip;
+		return this.disabled && !this.disabledTooltip;
 	}
 
 	connectedCallback() {
@@ -105,10 +108,10 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 				'd2l-skeletize': true,
 				'd2l-hovering': this.hovering,
 				'd2l-disabled': this.disabled,
-				'd2l-input-radio-disabled-tooltip': this.disabled && this._disabledTooltip
+				'd2l-input-radio-disabled-tooltip': this.disabled && this.disabledTooltip
 			};
-			const disabledTooltip = this.disabled && this._disabledTooltip ?
-				html`<d2l-tooltip align="start" class="vdiff-include" for="${this.#inputId}" ?force-show="${this.hovering}" position="top">${this._disabledTooltip}</d2l-tooltip>` :
+			const disabledTooltip = this.disabled && this.disabledTooltip ?
+				html`<d2l-tooltip align="start" class="vdiff-include" for="${this.#inputId}" ?force-show="${this.hovering}" position="top">${this.disabledTooltip}</d2l-tooltip>` :
 				nothing;
 			return html`
 				<div
@@ -133,7 +136,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 					?checked="${this.selected}"
 					class="${ifDefined(this.hovering ? 'd2l-hovering' : undefined)}"
 					?disabled="${this.disabled}"
-					disabled-tooltip="${ifDefined(this._disabledTooltip)}"
+					disabled-tooltip="${ifDefined(this.disabledTooltip)}"
 					?indeterminate="${this._indeterminate}"
 					?skeleton="${this.skeleton}">
 				</d2l-input-checkbox>

package/custom-elements.json

@@ -12939,6 +12939,11 @@
           "description": "Disables the input",
           "type": "boolean"
         },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "key",
           "description": "REQUIRED: Key for the selectable",
@@ -12973,6 +12978,12 @@
           "description": "Disables the input",
           "type": "boolean"
         },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "key",
           "attribute": "key",

package/package.json

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