@brightspace-ui/labs 2.33.2 → 2.34.1

package/package.json

@@ -114,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2.1.2"
   },
-  "version": "2.33.2"
+  "version": "2.34.1"
 }

package/src/components/grade-result/README.md

@@ -57,7 +57,7 @@ Components used for rendering grades in Brightspace.
 | `includeReportsButton`            | All            | `boolean`                   | `false`     | Determines whether the reports icon button is rendered.      |
 | `gradeButtonTooltip`              | All            | `string`                    | `''`        | The text that is inside of the tooltip when hovering over the grades button. |
 | `reportsButtonTooltip`            | All            | `string`                    | `''`        | The text that is inside of the tooltip when hovering over the reports button. |
-| `readOnly`                        | All            | `boolean`                   | `false`     | Set to `true` if the user does not have permissions to edit the grade. |
+| `readonly`                        | All            | `boolean`                   | `false`     | Set to `true` if the user does not have permissions to edit the grade. |
 | `isManualOverrideActive`          | All            | `boolean`                   | `false`     | Set to `true` if the user is currently manually overriding the grade. This will display the button to 'Clear Manual Override'. |
 | `hideTitle`                       | All            | `boolean`                   | `false`     | This property will hide the "Overall Grade" title above the component. |
 | `customManualOverrideClearText`   | All            | `string`                    | `undefined` | This property will substitute the stock text on the "Clear Manual Override" button. |

package/src/components/grade-result/grade-result-letter-score.js

@@ -12,8 +12,8 @@ export class D2LGradeResultLetterScore extends LocalizeLabsElement(LitElement) {
 		return {
 			availableOptions: { type: Object },
 			label: { type: String },
-			selectedOption: { type: String },
-			readOnly: { type: Boolean }
+			selectedOption: { attribute: 'selected-option', type: String },
+			readonly: { type: Boolean }
 		};
 	}
 
@@ -39,7 +39,7 @@ export class D2LGradeResultLetterScore extends LocalizeLabsElement(LitElement) {
 	}
 
 	render() {
-		if (!this.readOnly) {
+		if (!this.readonly) {
 			return html`
 				<div class="d2l-grade-result-letter-score-container">
 					<select

package/src/components/grade-result/grade-result-numeric-score.js

@@ -21,12 +21,12 @@ export class D2LGradeResultNumericScore extends LocalizeLabsElement(LitElement)
 	static get properties() {
 		return {
 			label: { type: String },
-			scoreNumerator: { type: Number, converter: numberConverter },
-			scoreDenominator: { type: Number },
-			readOnly: { type: Boolean },
+			scoreNumerator: { attribute: 'score-numerator', type: Number, converter: numberConverter },
+			scoreDenominator: { attribute: 'score-denominator', type: Number },
+			readonly: { type: Boolean },
 			required: { type: Boolean },
-			allowNegativeScore: { type: Boolean },
-			showFlooredScoreWarning: { type: Boolean },
+			allowNegativeScore: { attribute: 'allow-negative-score', type: Boolean },
+			showFlooredScoreWarning: { attribute: 'show-floored-score-warning', type: Boolean },
 		};
 	}
 
@@ -57,7 +57,7 @@ export class D2LGradeResultNumericScore extends LocalizeLabsElement(LitElement)
 
 		return html`
 			<div class="d2l-grade-result-numeric-score-container">
-				${!this.readOnly ? html`
+				${!this.readonly ? html`
 					<div class="d2l-grade-result-numeric-score-score">
 						<d2l-form>
 							<d2l-input-number

package/src/components/grade-result/grade-result-presentational.js

@@ -89,7 +89,7 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 			 * Set to true if the user does not have permissions to edit the grade
 			 * @type {boolean}
 			 */
-			readOnly: { type: Boolean },
+			readonly: { type: Boolean },
 			/**
 			 * The text that is inside of the tooltip when hovering over the reports button
 			 * @type {string}
@@ -167,7 +167,7 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 		this.includeReportsButton = false;
 		this.isManualOverrideActive = false;
 		this.labelHeadingLevel = undefined;
-		this.readOnly = false;
+		this.readonly = false;
 		this.selectedLetterGrade = '';
 		this.showFlooredScoreWarning = false;
 		this.subtitleText = undefined;
@@ -191,10 +191,6 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 		`;
 	}
 
-	_isReadOnly() {
-		return Boolean(this.readOnly);
-	}
-
 	_onGradeButtonClick() {
 		this.dispatchEvent(new CustomEvent('d2l-grade-result-grade-button-click', {
 			bubbles: true,
@@ -248,9 +244,9 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 		return html`
 			<d2l-labs-grade-result-letter-score
 				.availableOptions=${this.letterGradeOptions}
-				.label=${this.inputLabelText}
-				.readOnly=${this._isReadOnly()}
-				.selectedOption=${this.selectedLetterGrade}
+				label=${this.inputLabelText}
+				?readonly=${this.readonly}
+				selected-option=${ifDefined(this.selectedLetterGrade)}
 			></d2l-labs-grade-result-letter-score>
 		`;
 	}
@@ -275,13 +271,13 @@ export class D2LGradeResultPresentational extends LocalizeLabsElement(LitElement
 	_renderNumericScoreComponent() {
 		return html`
 			<d2l-labs-grade-result-numeric-score
-				?allowNegativeScore=${this.allowNegativeScore}
-				.label=${this.inputLabelText}
-				.readOnly=${this._isReadOnly()}
+				?allow-negative-score=${this.allowNegativeScore}
+				label=${this.inputLabelText}
+				?readonly=${this.readonly}
 				?required=${this.required}
-				.scoreDenominator=${this.scoreDenominator}
-				.scoreNumerator=${this.scoreNumerator}
-				?showFlooredScoreWarning=${this.showFlooredScoreWarning}
+				score-denominator=${ifDefined(this.scoreDenominator)}
+				score-numerator=${ifDefined(this.scoreNumerator)}
+				?show-floored-score-warning=${this.showFlooredScoreWarning}
 			></d2l-labs-grade-result-numeric-score>
 		`;
 	}

package/src/utilities/router/README.md

@@ -222,31 +222,6 @@ describe('Page Routing', () => {
 
 ### Route order inversion issue
 
-There's currently an issue with the way registered routes are processed that can cause the order of matching to appear to be inverted. This is not noticeable in many cases since it's often the case that only a single route will match regardless of the order. This does however come up when dealing with wildcard (`*`) routes (e.g. 404 redirect routes).
+This issue is resolved by default but the fix can be bypassed (for backwards compatibility) by setting the `disableRouteOrderFix` option to `true`.
 
-If you notice that you have to put any routes with wildcards (`*`) before those without instead of after, this is the reason why.
-
-#### Issue Fix
-
-There is currently a fix available for this ordering issue, but it requires setting the `enableRouteOrderFix` option to `true`. Ex:
-
-```js
-registerRoutes([
-  {
-    pattern: '/home',
-    view: () => html`...`
-  },
-  {
-    pattern: '/404',
-    view: () => html`...`
-  },
-  {
-    pattern: '*',
-    to: '/404'
-  }
-], {
-  enableRouteOrderFix: true
-});
-```
-
-Note: The reason this is an opt-in fix is that a lot of existing implementations of lit-router have worked around this issue by putting the wildcard routes at the start, which would break if the issue were fixed for everyone automatically.
+Bypassing the fix causes a warning to appear in the dev console. To resolve the warning, remove the `disaableRouteOrderFix` option and thoroughly test your routing. If your routes contain wildcards (`*`, typically for 404s), you may need to register them last.

package/src/utilities/router/router.js

@@ -39,10 +39,9 @@ const _handleRouteView = (context, next, r) => {
 
 const _handleRouteLoader = r => (context, next) => {
 	const disableRouteOrderFix = _lastOptions?.disableRouteOrderFix ?? false;
-	const enableRouteOrderFix = _lastOptions?.enableRouteOrderFix ?? false;
 
 	// Skip further pattern matches if the route has already been handled
-	if (!disableRouteOrderFix && enableRouteOrderFix && context.handled) {
+	if (!disableRouteOrderFix && context.handled) {
 		next();
 		return;
 	}
@@ -52,7 +51,7 @@ const _handleRouteLoader = r => (context, next) => {
 			_handleRouteView(context, next, r);
 		});
 	} else if (r.pattern && r.to) {
-		if (!disableRouteOrderFix && enableRouteOrderFix) {
+		if (!disableRouteOrderFix) {
 			activePage.redirect(r.to);
 		} else {
 			activePage.redirect(r.pattern, r.to);
@@ -94,7 +93,7 @@ export const registerRoutes = (routes, options) => {
 	if (hasRegistered) throw new Error('May not construct multiple routers.');
 	hasRegistered = true;
 
-	if (!options?.enableRouteOrderFix) console.warn('lit-router: The enableRouteOrderFix option is not enabled. This may cause issues with route handling. See here for details: https://github.com/BrightspaceUI/labs/tree/main/src/utilities/router#route-order-inversion-issue');
+	if (options?.disableRouteOrderFix) console.warn('lit-router: The disableRouteOrderFix option is enabled, which may cause issues with route handling. See here for details: https://github.com/BrightspaceUI/labs/tree/main/src/utilities/router#route-order-inversion-issue');
 
 	configure(options);