@brightspace-ui/core 1.231.0 → 1.233.0

package/components/dialog/README.md

@@ -184,7 +184,7 @@ The `d2l-dialog-confirm` element is a simple confirmation dialog for prompting t
 
 | Property | Type | Description |
 |--|--|--|
-| `text` | String, required | The required text content for the confirmation dialog |
+| `text` | String, required | The text content for the confirmation dialog. Newline characters (`
` in HTML or `\n` in JavaScript) will render as multiple paragraphs. |
 | `opened` | Boolean | Whether or not the dialog is open |
 | `title-text` | String | The optional title for the confirmation dialog |
 

package/components/dialog/demo/dialog-confirm.html

@@ -37,6 +37,26 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Confirm Dialog (Multi Paragraph)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openConfirmMultiParagraph">Show Confirm</d2l-button>
+					<d2l-dialog-confirm id="confirmMultiParagraph" title-text="Confirm Title" text="Are you sure you want more cookies?&#10;Are you sure you want more donuts?">
+						<d2l-button slot="footer" primary data-dialog-action="ok">Yes</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>No</d2l-button>
+					</d2l-dialog-confirm>
+					<script>
+						document.querySelector('#openConfirmMultiParagraph').addEventListener('click', () => {
+							document.querySelector('#confirmMultiParagraph').opened = true;
+						});
+						document.querySelector('#confirmMultiParagraph').addEventListener('d2l-dialog-close', (e) => {
+							console.log('confirm action:', e.detail.action);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Confirm Dialog (No Title)</h2>
 
 			<d2l-demo-snippet>

package/components/dialog/dialog-confirm.js

@@ -14,7 +14,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
 	static get properties() {
 		return {
 			/**
-			 * REQUIRED: The text content for the confirmation dialog
+			 * REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\n` in JavaScript) will render as multiple paragraphs.
 			 * @type {string}
 			 */
 			text: { type: String }
@@ -36,6 +36,18 @@ class DialogConfirm extends DialogMixin(LitElement) {
 				padding-top: 0;
 			}
 
+			.d2l-dialog-content p {
+				margin: 1rem 0;
+			}
+
+			.d2l-dialog-content p:first-child {
+				margin-top: 0;
+			}
+
+			.d2l-dialog-content p:last-child {
+				margin-bottom: 0;
+			}
+
 			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
 
 				dialog.d2l-dialog-outer,
@@ -65,7 +77,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
 						<div><h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2></div>
 					</div>` : null}
 				<div id="${this._textId}" class="d2l-dialog-content">
-					<div>${this.text}</div>
+					<div>${this.text ? this.text.split('\n').map(line => html`<p>${line}</p>`) : null}</div>
 				</div>
 				<div class="d2l-dialog-footer">
 					<slot name="footer" class="d2l-dialog-footer-slot"></slot>

package/components/dropdown/dropdown-content-mixin.js

@@ -273,6 +273,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.__onAutoCloseClick = this.__onAutoCloseClick.bind(this);
 		this.__toggleScrollStyles = this.__toggleScrollStyles.bind(this);
 		this._handleMobileResize = this._handleMobileResize.bind(this);
+		this.__disconnectResizeObserver = this.__disconnectResizeObserver.bind(this);
 	}
 
 	get opened() {
@@ -312,6 +313,8 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		}
 		clearDismissible(this.__dismissibleId);
 		this.__dismissibleId = null;
+
+		if (this.__resizeObserver) this.__resizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {
@@ -374,6 +377,17 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._showBackdrop = this._useMobileStyling && this.mobileTray;
 	}
 
+	/**
+	 * Waits for the next resize when elem has a height > 0px,
+	 * then calls the __position function.
+	*/
+	requestRepositionNextResize(elem) {
+		if (!elem) return;
+		if (this.__resizeObserver) this.__resizeObserver.disconnect();
+		this.__resizeObserver = new ResizeObserver(this.__disconnectResizeObserver);
+		this.__resizeObserver.observe(elem);
+	}
+
 	async resize() {
 		if (!this.opened) {
 			return;
@@ -403,6 +417,20 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		}
 	}
 
+	__disconnectResizeObserver(entries) {
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i];
+			if (this.__resizeObserver && entry.contentRect.height !== 0) {
+				this.__resizeObserver.disconnect();
+				// wrap in rAF for Firefox
+				requestAnimationFrame(() => {
+					if (this.opened) this.__position();
+				});
+				break;
+			}
+		}
+	}
+
 	__getContentBottom() {
 		return this.shadowRoot && this.shadowRoot.querySelector('.d2l-dropdown-content-bottom');
 	}

package/components/filter/demo/filter.html

@@ -90,7 +90,20 @@
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter>
-					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="course" text="Course" loading select-all>
+						<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+					</d2l-filter-dimension-set>
+					
 				</d2l-filter>
 				<d2l-filter>
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>

package/components/filter/filter.js

@@ -256,7 +256,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		let dimensionHTML;
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':
-				dimensionHTML = html`<div aria-live="polite">${this._createSetDimension(dimension)}</div>`;
+				dimensionHTML = html`
+				<div aria-live="polite" class="d2l-filter-container">
+					${this._createSetDimension(dimension)}
+				</div>`;
 				break;
 		}
 
@@ -519,7 +522,8 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		let shouldUpdate = false,
 			shouldSearch = false,
-			shouldRecount = false;
+			shouldRecount = false,
+			shouldResizeDropdown = false;
 		changes.forEach((newValue, prop) => {
 			if (toUpdate[prop] === newValue) return;
 
@@ -538,13 +542,23 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			} else if (prop === 'values') {
 				if (dimension.searchValue) shouldSearch = true;
 				shouldRecount = true;
+				shouldResizeDropdown = true;
 				this._activeFiltersSubscribers.updateSubscribers();
+			} else if (prop === 'loading') {
+				shouldResizeDropdown = true;
 			}
 		});
 
 		if (shouldSearch) this._performDimensionSearch(dimension);
 		if (shouldRecount) this._setFilterCounts(dimension);
-		if (shouldUpdate) this.requestUpdate();
+		if (shouldUpdate)  this.requestUpdate();
+		if (shouldResizeDropdown) {
+			const singleDimension = this._dimensions.length === 1;
+			if (singleDimension && this.opened) {
+				const dropdown = this.shadowRoot.querySelector('d2l-dropdown-content');
+				dropdown.requestRepositionNextResize(this.shadowRoot.querySelector('.d2l-filter-container'));
+			}
+		}
 	}
 
 	_handleDimensionHide() {

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

@@ -80,7 +80,7 @@ search.addEventListener('d2l-input-search-searched', (e) => {
 When the input is cleared, the same event will be fired with an empty value.
 <!-- docs: end hidden content -->
 
-### Accessibility
+### Accessibility Properties
 
 To make your usage of `d2l-input-search` accessible, use the following property when applicable:
 

package/components/list/README.md

@@ -311,6 +311,7 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 | Property | Type | Description |
 |---|---|---|
+| `no-selection` | Boolean | Whether to render select-all and selection summary |
 | `padding-type` | String | Header whitespace (`normal` (default), `slim`) |
 | `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
 <!-- docs: end hidden content -->

package/components/list/list-header.js

@@ -15,12 +15,10 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	static get properties() {
 		return {
 			/**
-			 * @ignore
-			 * Whether to render a header with reduced whitespace
-			 * TODO: Remove
+			 * Whether to render select-all and selection summary
 			 * @type {boolean}
 			 */
-			slim: { reflect: true, type: Boolean },
+			noSelection: { type: Boolean, attribute: 'no-selection' },
 			/**
 			 * How much padding to render list items with
 			 * @type {'normal'|'slim'}
@@ -31,6 +29,13 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			 * @type {boolean}
 			 */
 			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
+			/**
+			 * @ignore
+			 * Whether to render a header with reduced whitespace
+			 * TODO: Remove
+			 * @type {boolean}
+			 */
+			slim: { reflect: true, type: Boolean }
 		};
 	}
 
@@ -87,21 +92,24 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 
 	constructor() {
 		super();
-		this.slim = false;
+		this.noSelection = false;
 		this.paddingType = 'normal';
 		this.selectAllPagesAllowed = false;
+		this.slim = false;
 	}
 
 	render() {
 		return html`
 			<div class="d2l-list-header-container">
-				<d2l-selection-select-all></d2l-selection-select-all>
-				<d2l-selection-summary
-					aria-hidden="true"
-					class="d2l-list-header-summary"
-					no-selection-text="${this.localize('components.selection.select-all')}">
-				</d2l-selection-summary>
-				${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : null}
+				${this.noSelection ? null : html`
+					<d2l-selection-select-all></d2l-selection-select-all>
+					<d2l-selection-summary
+						aria-hidden="true"
+						class="d2l-list-header-summary"
+						no-selection-text="${this.localize('components.selection.select-all')}">
+					</d2l-selection-summary>
+					${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : null}
+				`}
 				<div class="d2l-list-header-actions">
 					<d2l-overflow-group opener-type="icon"><slot></slot></d2l-overflow-group>
 				</div>

package/components/selection/selection-action-dropdown.js

@@ -9,6 +9,7 @@ import { SelectionActionMixin } from './selection-action-mixin.js';
 /**
  * A dropdown opener associated with a selection component.
  * @slot - Dropdown content (e.g., "d2l-dropdown-content", "d2l-dropdown-menu" or "d2l-dropdown-tabs")
+ * @fires d2l-selection-observer-subscribe - Internal event
  */
 class ActionDropdown extends LocalizeCoreElement(SelectionActionMixin(DropdownOpenerMixin(LitElement))) {
 

package/components/table/README.md

@@ -114,11 +114,11 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
 <!-- docs: start hidden content -->
 ### Properties
 
-| Property | Type | Description |
-|---|---|---|
-| `no-column-border` | Boolean, default: `false` | Hides the column borders on "default" table type |
-| `sticky-headers` | Boolean, default: `false` | Whether to make the header row sticky |
-| `type` | String, default: `'default'` | Type of the table style. Can be one of  `default`, `light`. |
+| Property | Type | Description | Default Value |
+|---|---|---|---|
+| `no-column-border` | boolean | Hides the column borders on "default" table type | false |
+| `sticky-headers` | boolean | Whether to make the header row sticky | false |
+| `type` | string | Type of the table style. Can be one of  `default`, `light`. | 'default' |
 
 ## Light Type
 
@@ -241,10 +241,10 @@ When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used t
 
 ### Properties
 
-| Property | Type | Description |
-|---|---|---|
-| `desc` | Boolean, default: `false` | Whether sort direction is descending |
-| `nosort` | Booealn, default: `false` | Column is not currently sorted. Hides the ascending/descending sort icon. |
+| Property | Type | Description | Default Value |
+|---|---|---|---|
+| `desc` | boolean | Whether sort direction is descending | false |
+| `nosort` | boolean | Column is not currently sorted. Hides the ascending/descending sort icon. | false |
 
 ## Selection
 

package/custom-elements.json

@@ -1460,7 +1460,7 @@
       "attributes": [
         {
           "name": "text",
-          "description": "REQUIRED: The text content for the confirmation dialog",
+          "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.",
           "type": "string"
         },
         {
@@ -1479,7 +1479,7 @@
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: The text content for the confirmation dialog",
+          "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.",
           "type": "string"
         },
         {
@@ -6673,6 +6673,12 @@
       "path": "./components/list/list-header.js",
       "description": "A header for list components containing select-all, etc.",
       "attributes": [
+        {
+          "name": "no-selection",
+          "description": "Whether to render select-all and selection summary",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "padding-type",
           "description": "How much padding to render list items with",
@@ -6688,7 +6694,9 @@
       ],
       "properties": [
         {
-          "name": "slim",
+          "name": "noSelection",
+          "attribute": "no-selection",
+          "description": "Whether to render select-all and selection summary",
           "type": "boolean",
           "default": "false"
         },
@@ -6705,6 +6713,11 @@
           "description": "Whether all pages can be selected",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "slim",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [
@@ -8538,7 +8551,8 @@
       ],
       "events": [
         {
-          "name": "d2l-selection-observer-subscribe"
+          "name": "d2l-selection-observer-subscribe",
+          "description": "Internal event"
         }
       ],
       "slots": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.231.0",
+  "version": "1.233.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -44,7 +44,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/eslint-parser": "^7",
-    "@brightspace-ui/stylelint-config": "^0.3",
+    "@brightspace-ui/stylelint-config": "^0.4",
     "@open-wc/testing": "^2",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.13",