@brightspace-ui/core 2.187.2 → 2.187.4

package/components/button/README.md

@@ -138,7 +138,7 @@ The `d2l-button-icon` element can be used just like the native `button`, for ins
 |--|--|--|
 | `description` | String | A description to be added to the `button` for accessibility for additional context |
 | `icon` | String, required | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
-| `text` | String, required | Accessible text for the buton |
+| `text` | String, required | Accessible text for the button |
 | `disabled` | Boolean | Disables the button |
 | `disabledTooltip` | String | Tooltip text when disabled |
 | `h-align` | String | Possible values are undefined (default) or `text`. If `text`, aligns the button content to the leading edge of text. |

package/components/inputs/demo/input-radio-spacer-test.js

@@ -1,20 +1,43 @@
 import '../input-radio-spacer.js';
 import { html, LitElement } from 'lit';
+import { bodySmallStyles } from '../../typography/styles.js';
 import { radioStyles } from '../input-radio-styles.js';
 
 class TestInputRadioSpacer extends LitElement {
 
 	static get styles() {
-		return radioStyles;
+		return [ radioStyles, bodySmallStyles ];
 	}
 
 	render() {
 		return html`
-			<input type="radio" class="d2l-input-radio" aria-label="Option 1"> Option 1
-			<d2l-input-radio-spacer>
-				Additional content can go here and will
-				line up nicely with the edge of the radio.
-			</d2l-input-radio-spacer>
+			<div>
+				<label class="d2l-input-radio-label">
+					<input type="radio" name="myGroup" value="normal" checked>
+					Option 1
+				</label>
+				<d2l-input-radio-spacer>
+					Additional content can go here and will line up nicely with the edge of the radio.
+				</d2l-input-radio-spacer>
+			</div>
+			<div>
+				<label class="d2l-input-radio-label">
+					<input type="radio" name="myGroup" value="normal">
+					Option 1 (A really really long label that will wrap to the next line where the indentation will be applied. All the text should align.)
+				</label>
+				<d2l-input-radio-spacer>
+					Additional content can go here and will line up nicely with the edge of the radio.
+				</d2l-input-radio-spacer>
+			</div>
+			<div>
+				<label class="d2l-input-radio-label">
+					<input type="radio" name="myGroup" value="normal">
+					Option 1
+				</label>
+				<d2l-input-radio-spacer>
+					<div class="d2l-body-small">Additional content can go here and will line up nicely with the edge of the radio.</div>
+				</d2l-input-radio-spacer>
+			</div>
 		`;
 	}
 

package/components/inputs/docs/input-radio.md

@@ -116,7 +116,7 @@ If you'd like to manually link the radio input with a label, or use an ARIA labe
 
 ## Radio Spacer [d2l-input-radio-spacer]
 
-To align related content below radio buttons, the `d2l-input-radio-spacer` element can be used:
+To align related content below radio buttons, the `d2l-input-radio-spacer` element can be used in conjunction with the `d2l-input-radio-label` class:
 
 <!-- docs: demo code display:block -->
 ```html
@@ -133,11 +133,13 @@ To align related content below radio buttons, the `d2l-input-radio-spacer` eleme
 
     render() {
       return html`
-      <input type="radio" class="d2l-input-radio" aria-label="Option 1"> Option 1
-      <d2l-input-radio-spacer>
-      Additional content can go here and will
-      line up nicely with the edge of the radio.
-      </d2l-input-radio-spacer>
+        <label class="d2l-input-radio-label">
+          <input type="radio" value="normal" checked>
+          Option 1
+        </label>
+        <d2l-input-radio-spacer>
+          Additional content can go here and will line up nicely with the edge of the radio.
+        </d2l-input-radio-spacer>
       `;
     }
 

package/components/table/demo/table-test.js

@@ -16,17 +16,17 @@ import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 
-const fruits = ['Apples', 'Oranges', 'Bananas'];
+const columns = ['Population', 'Size', 'Elevation'];
 const thText = ['Additional', 'Placeholder', 'Header', 'Row'];
 
 const data = () => [
-	{ name: 'Canada', fruit: { 'apples': 356863, 'oranges': 0, 'bananas': 0 }, selected: true },
-	{ name: 'Australia', fruit: { 'apples': 308298, 'oranges': 398610, 'bananas': 354241 }, selected: true },
-	{ name: 'Mexico', fruit: { 'apples': 716931, 'oranges': 4603253, 'bananas': 2384778 }, selected: false },
-	{ name: 'Brazil', fruit: { 'apples': 1300000, 'oranges': 50000, 'bananas': 6429875 }, selected: false },
-	{ name: 'England', fruit: { 'apples': 345782, 'oranges': 4, 'bananas': 1249875 }, selected: false },
-	{ name: 'Hawaii', fruit: { 'apples': 129875, 'oranges': 856765, 'bananas': 123 }, selected: false },
-	{ name: 'Japan', fruit: { 'apples': 8534, 'oranges': 1325, 'bananas': 78382756 }, selected: false }
+	{ name: 'Ottawa, Canada', city: 'Ottawa', country: 'Canada', data: { 'population': 994837, 'size': 2790, 'elevation': 70 }, selected: true },
+	{ name: 'Toronto, Canada', city: 'Toronto', country: 'Canada', data: { 'population': 2930000, 'size': 630, 'elevation': 76 }, selected: true },
+	{ name: 'Sydney, Australia', city: 'Sydney', country: 'Australia', data: { 'population': 5312000, 'size': 12368, 'elevation': 3 }, selected: false },
+	{ name: 'Cairo, Egypt', city: 'Cairo', country: 'Egypt', data: { 'population': 9540000, 'size': 3085, 'elevation': 23 }, selected: false },
+	{ name: 'Moscow, Russia', city: 'Moscow', country: 'Russia', data: { 'population': 12712305, 'size': 2511, 'elevation': 124 }, selected: false },
+	{ name: 'London, England', city: 'London', country: 'England', data: { 'population': 8982000, 'size': 1572, 'elevation': 11 }, selected: false },
+	{ name: 'Tokyo, Japan', city: 'Tokyo', country: 'Japan', data: { 'population': 13960000, 'size': 2194, 'elevation': 40 }, selected: false }
 ];
 
 const formatter = new Intl.NumberFormat('en-US');
@@ -67,12 +67,6 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	}
 
 	render() {
-		const sorted = this._data.sort((a, b) => {
-			if (this._sortDesc) {
-				return b.fruit[this._sortField] - a.fruit[this._sortField];
-			}
-			return a.fruit[this._sortField] - b.fruit[this._sortField];
-		});
 		return html`
 			<d2l-table-wrapper item-count="${ifDefined(this.paging ? 500 : undefined)}">
 				<d2l-table-controls slot="controls" ?no-sticky="${!this.stickyControls}" select-all-pages-allowed>
@@ -92,21 +86,24 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 					<thead>
 						<tr>
 							<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
-							<th scope="col">Country</th>
-							${fruits.map(fruit => this._renderSortButton(fruit))}
+							${this._renderDoubleSortButton('City', 'Country')}
+							${columns.map(columnHeading => this._renderSortButton(columnHeading))}
 						</tr>
 					</thead>
 					<tbody>
 						<tr class="d2l-table-header">
 							<th scope="col" sticky></th>
-							${this._renderSortButton('Avocado')}
-							${fruits.map(fruit => this._renderSortButton(fruit))}
+							${thText.map(text => html`<th scope="col">${text}</th>`)}
 						</tr>
 						<tr header>
 							<th scope="col" sticky></th>
-							${thText.map(text => html`<th scope="col">${text}</th>`)}
+							${thText.map(text => html`
+								<th scope="col">
+									${text}
+								</th>
+							`)}
 						</tr>
-						${sorted.map(row => html`
+						${this._data.map(row => html`
 							<tr ?selected="${row.selected}" data-name="${row.name}">
 								<th scope="row" sticky>
 									<d2l-selection-input
@@ -117,9 +114,10 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 									</d2l-selection-input>
 								</th>
 								<th scope="row">${row.name}</th>
-								${fruits.map(fruit => html`<td>${formatter.format(row.fruit[fruit.toLowerCase()])}</td>`)}
+								${columns.map(columnHeading => html`<td>${formatter.format(row.data[columnHeading.toLowerCase()])}</td>`)}
 							</tr>
 						`)}
+
 					</tbody>
 				</table>
 				${this.paging ? html`<d2l-pager-load-more slot="pager"
@@ -134,7 +132,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	_handlePagerLoadMore(e) {
 		const startIndex = this._data.length + 1;
 		for (let i = 0; i < e.target.pageSize; i++) {
-			this._data.push({ name: `Country ${startIndex + i}`, fruit: { 'apples': 8534, 'oranges': 1325, 'bananas': 78382756 }, selected: false });
+			this._data.push({ name: `Country ${startIndex + i}`, data: { 'population': 26320000, 'size': 6340, 'elevation': 4 }, selected: false });
 		}
 		this.requestUpdate();
 		e.detail.complete();
@@ -143,18 +141,50 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 	_handleSort(e) {
 		const field = e.target.innerText.toLowerCase();
 		const desc = e.target.hasAttribute('desc');
+		this._sortDesc = field === this._sortField ? !desc : false; // if sorting on same field then reverse, otherwise sort ascending
 		this._sortField = field;
-		this._sortDesc = !desc;
+
+		this._data = this._data.sort((a, b) => {
+			if (this._sortField === 'city' || this._sortField === 'country') {
+				if (this._sortDesc) {
+					if (a[this._sortField] > b[this._sortField]) return -1;
+					if (a[this._sortField] < b[this._sortField]) return 1;
+				} else {
+					if (a[this._sortField] < b[this._sortField]) return -1;
+					if (a[this._sortField] > b[this._sortField]) return 1;
+				}
+			} else {
+				if (this._sortDesc) {
+					return b.data[this._sortField] - a.data[this._sortField];
+				}
+				return a.data[this._sortField] - b.data[this._sortField];
+			}
+		});
+	}
+
+	_renderDoubleSortButton(item1, item2) {
+		return html`
+			<th scope="col">
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item1.toLowerCase()}">${item1}</d2l-table-col-sort-button>
+				<d2l-table-col-sort-button
+					@click="${this._handleSort}"
+					?desc="${this._sortDesc}"
+					?nosort="${this._sortField !== item2.toLowerCase()}">${item2}</d2l-table-col-sort-button>
+			</th>
+		`;
 	}
 
-	_renderSortButton(fruit) {
-		const noSort = this._sortField !== fruit.toLowerCase();
+	_renderSortButton(item) {
+		const noSort = this._sortField !== item.toLowerCase();
 		return html`
 			<th scope="col">
 				<d2l-table-col-sort-button
 					@click="${this._handleSort}"
 					?desc="${this._sortDesc}"
-					?nosort="${noSort}">${fruit}</d2l-table-col-sort-button>
+					?nosort="${noSort}">${item}</d2l-table-col-sort-button>
 			</th>
 		`;
 	}

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

@@ -111,6 +111,16 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			:host(:focus-within:hover) .tag-list-item-container {
 				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
 			}
+			@supports selector(:has(a, b)) {
+				:host(:focus-within) .tag-list-item-container,
+				:host(:focus-within:hover) .tag-list-item-container {
+					box-shadow: inset 0 0 0 1px var(--d2l-color-gypsum), 0 2px 4px rgba(0, 0, 0, 0.03);
+				}
+				:host(:hover) .tag-list-item-container:has(:focus-visible),
+				.tag-list-item-container:has(:focus-visible) {
+					box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
+				}
+			}
 			:host(:hover) .tag-list-item-container,
 			:host(:focus-within) .tag-list-item-container {
 				background-color: var(--d2l-color-sylvite);

package/package.json

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