@brightspace-ui/core 3.208.6 → 3.209.1

package/components/overflow-group/overflow-group-mixin.js

@@ -133,7 +133,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 
 		const containerStyles = {
 			flexWrap: this._wrapping ? 'wrap' : 'nowrap',
-			minHeight: this.autoShow ? 'none' : (this._itemHeight ? `${this._itemHeight}px` : 'auto'),
+			minHeight: this.autoShow ? 'auto' : (this._itemHeight ? `${this._itemHeight}px` : 'auto'),
 			maxHeight: this.autoShow ? 'none' : (this._itemHeight ? `${this._itemHeight}px` : 'auto')
 		};
 

package/components/progress/demo/progress.html

@@ -68,22 +68,32 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<button>Start Animation</button>
-					<d2l-progress label="Uploading..." announce-label></d2l-progress>
+					<button id="start">Start Animation</button><button id="reset">Reset</button>
+					<d2l-progress label="Waiting..." announce-label></d2l-progress>
 					<script data-demo-hide>
 						(demo => {
-							const button = demo.querySelector('button');
+							const startButton = demo.querySelector('#start');
+							const resetButton = demo.querySelector('#reset');
 							const progress = demo.querySelector('d2l-progress');
-							button.addEventListener('click', () => {
-								for (let i = 0; i < 5; i++) {
-									setTimeout(() => {
-										if (i === 4) progress.label = 'Complete';
-										else if (i >= 2) progress.label = 'Validating...';
-										else progress.label = 'Uploading...';
-										progress.value = i * 25;
-									}, i * 1000);
-
-								}
+							let to = null;
+							startButton.addEventListener('click', () => {
+								let i = 0;
+								const step = () => {
+									console.log(i);
+
+									if (i === 4) progress.label = 'Complete';
+									else if (i >= 2) progress.label = 'Validating...';
+									else progress.label = 'Uploading...';
+									progress.value = i * 25;
+									i++;
+									if (i < 5) to = setTimeout(step, 1000);
+								};
+								step();
+							});
+							resetButton.addEventListener('click', () => {
+								clearTimeout(to);
+								progress.value = undefined;
+								progress.label = 'Waiting...';
 							});
 						})(document.currentScript.parentNode);
 					</script>

package/components/progress/progress.js

@@ -1,6 +1,6 @@
 import '../../components/colors/colors.js';
 import { bodyCompactStyles, bodySmallStyles } from '../typography/styles.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { formatPercent } from '@brightspace-ui/intl';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -19,7 +19,7 @@ class Progress extends LocalizeCoreElement(LitElement) {
 			 * The current value of the progress bar
 			 * @type {number}
 			 */
-			value: { type: Number },
+			value: { type: Number, reflect: true },
 			/**
 			 * REQUIRED: Label for the progress bar
 			 * @type {string}
@@ -39,7 +39,7 @@ class Progress extends LocalizeCoreElement(LitElement) {
 			 * Hide the bar's value
 			 * @type {boolean}
 			 */
-			valueHidden: { type: Boolean, attribute: 'value-hidden' },
+			valueHidden: { type: Boolean, attribute: 'value-hidden', reflect: true },
 			/**
 			 * The size of the progress bar
 			 * @type {'small'|'medium'|'large'}
@@ -52,19 +52,20 @@ class Progress extends LocalizeCoreElement(LitElement) {
 		return [bodySmallStyles, bodyCompactStyles, css`
 				:host {
 					align-items: center;
-					display: flex;
-					flex-wrap: wrap;
+					display: grid;
+					grid-template: auto auto / 1fr auto;
+					grid-template-areas:
+						"label label"
+						"bar value";
 					min-width: 6rem;
 				}
 				:host([hidden]) {
 					display: none;
 				}
-				:host([value-hidden]) {
-					row-gap: 0.3rem;
-				}
 
 				#label {
-					flex: 1 0 100%;
+					grid-area: label;
+					width: 100%;
 				}
 
 				progress {
@@ -73,38 +74,41 @@ class Progress extends LocalizeCoreElement(LitElement) {
 					-webkit-appearance: none;
 					appearance: none;
 					background-color: var(--d2l-color-gypsum);
+					box-shadow: inset 0 2px var(--d2l-color-mica);
+					width: 100%;
+				}
+				.bar {
 					border: none;
 					border-radius: 0.9rem;
-					box-shadow: inset 0 2px var(--d2l-color-mica);
 					display: block;
-					flex: 1;
+					grid-area: bar;
 					height: 0.6rem;
-					margin-inline-end: 0.4rem;
 				}
 				.value {
+					grid-area: value;
+					margin-inline-start: 0.4rem;
 					text-align: end;
 					width: 2.42rem;
 				}
 
 				:host([size="small"]) {
-					progress {
+					.bar {
 						height: 0.3rem;
-						margin-inline-end: 0.3rem;
 					}
 
 					.value {
+						margin-inline-start: 0.3rem;
 						width: 2.15rem;
 					}
 				}
 
 				:host([size="large"]) {
 					line-height: 1.5rem;
-					progress {
+					.bar {
 						height: 0.9rem;
-						margin-inline-end: 0.5rem;
 					}
-
 					.value {
+						margin-inline-start: 0.5rem;
 						width: 2.82rem;
 					}
 				}
@@ -116,6 +120,33 @@ class Progress extends LocalizeCoreElement(LitElement) {
 				progress::-webkit-progress-bar {
 					background-color: transparent;
 				}
+
+
+				:host(:not([value-hidden]):not([value])) .bar {
+					margin-bottom: 0.3rem;
+				}
+
+				:host(:not([value]):not([label-hidden])),
+				:host([value-hidden]:not([label-hidden])) {
+					row-gap: 0.3rem;
+				}
+
+				.indeterminate-bar-container {
+					overflow: hidden;
+				}
+				.indeterminate-bar {
+					--d2l-progress-indeterminate-width: calc(100% / 3);
+					animation: 1450ms 50ms ease-in-out indeterminateState alternate infinite;
+					background-color: var(--d2l-color-celestine);
+					height: 100%;
+					margin-inline-start: calc(var(--d2l-progress-indeterminate-width) * -0.75);
+					width: var(--d2l-progress-indeterminate-width);
+				}
+				@keyframes indeterminateState {
+					100% {
+						margin-inline-start: calc(100% - var(--d2l-progress-indeterminate-width) * 0.25);
+					}
+				}
 			`,
 		/* comma separating the selectors for these pseudo-elements causes them to break */
 		/* note: unable to get firefox to animate the width... seems animation is not implemented for progress in FF */
@@ -127,9 +158,14 @@ class Progress extends LocalizeCoreElement(LitElement) {
 					transition: width 0.4s ease-out;
 				}
 				/* these are necessary to avoid showing border when value is 0 */
+				progress:not([value])::${unsafeCSS(selector)},
 				progress[value="0"]::${unsafeCSS(selector)} {
 					border: none;
 				}
+
+				progress:not([value])::${unsafeCSS(selector)} {
+					transition: none;
+				}
 				@media (prefers-reduced-motion: reduce) {
 					progress::${unsafeCSS(selector)} {
 						transition: none;
@@ -145,7 +181,6 @@ class Progress extends LocalizeCoreElement(LitElement) {
 		this.labelHidden = false;
 		this.max = 100;
 		this.size = 'medium';
-		this.value = 0;
 		this.valueHidden = false;
 	}
 
@@ -155,26 +190,33 @@ class Progress extends LocalizeCoreElement(LitElement) {
 
 	render() {
 		const classes = {
-			'complete': this.isComplete
+			'complete': this.isComplete,
+			'bar': true
 		};
 		const textClasses = {
 			'd2l-body-small': this.size === 'small',
 			'd2l-body-compact': this.size === 'medium'
 		};
 		const valueClasses = { ...textClasses, value: true };
+		const isIndeterminate = this.value === undefined;
 
-		const percentageText = formatPercent(this.isComplete ? 1 : Math.floor(100 * this.value / this.max) / 100);
+		const percentageText = isIndeterminate ? undefined : formatPercent(this.isComplete ? 1 : Math.floor(100 * this.value / this.max) / 100);
 		return html`
 			<div aria-live=${this.announceLabel ? 'polite' : 'off'} ?hidden=${this.labelHidden} id="label" class=${classMap(textClasses)}>${this.label}</div>
 			<progress
 				aria-labelledby="${ifDefined(this.labelHidden ? undefined : 'label')}"
 				aria-label="${ifDefined(this.labelHidden ? this.label : undefined)}"
-				aria-valuetext="${percentageText}"
+				aria-valuetext="${ifDefined(percentageText)}"
 				class="${classMap(classes)}"
-				value="${this.value}"
+				value="${ifDefined(this.value)}"
 				max="${this.max}">
 			</progress>
-			<div ?hidden=${this.valueHidden} class=${classMap(valueClasses)}>${percentageText}</div>
+			${isIndeterminate ? html`
+				<div class="indeterminate-bar-container bar">
+					<div class="indeterminate-bar bar"></div>
+				</div>
+			` : nothing}
+			<div ?hidden=${this.valueHidden || isIndeterminate} class=${classMap(valueClasses)}>${percentageText}</div>
 		`;
 	}
 

package/custom-elements.json

@@ -12389,6 +12389,11 @@
       "name": "d2l-progress",
       "path": "./components/progress/progress.js",
       "attributes": [
+        {
+          "name": "value",
+          "description": "The current value of the progress bar",
+          "type": "number"
+        },
         {
           "name": "label",
           "description": "REQUIRED: Label for the progress bar",
@@ -12418,12 +12423,6 @@
           "type": "'small'|'medium'|'large'",
           "default": "\"medium\""
         },
-        {
-          "name": "value",
-          "description": "The current value of the progress bar",
-          "type": "number",
-          "default": "0"
-        },
         {
           "name": "value-hidden",
           "description": "Hide the bar's value",
@@ -12432,6 +12431,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The current value of the progress bar",
+          "type": "number"
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -12470,13 +12475,6 @@
           "type": "'small'|'medium'|'large'",
           "default": "\"medium\""
         },
-        {
-          "name": "value",
-          "attribute": "value",
-          "description": "The current value of the progress bar",
-          "type": "number",
-          "default": "0"
-        },
         {
           "name": "valueHidden",
           "attribute": "value-hidden",

package/package.json

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