@brightspace-ui/core 3.5.1 → 3.6.0

package/components/button/button-subtle.js

@@ -60,8 +60,11 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 		return [ labelStyles, buttonStyles,
 			css`
 				:host {
+					--d2l-count-badge-background-color: var(--d2l-color-celestine);
+					--d2l-count-badge-foreground-color: #ffffff;
 					display: inline-block;
 				}
+
 				:host([hidden]) {
 					display: none;
 				}
@@ -103,11 +106,13 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 				button::-moz-focus-inner {
 					border: 0;
 				}
+
 				button[disabled]:hover,
 				button[disabled]:focus,
 				:host([active]) button[disabled] {
 					background-color: transparent;
 				}
+
 				button:hover,
 				button:focus,
 				:host([active]) button {
@@ -117,14 +122,24 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 				.d2l-button-subtle-content {
 					color: var(--d2l-color-celestine);
 				}
+
 				button:hover:not([disabled]) .d2l-button-subtle-content,
 				button:focus:not([disabled]) .d2l-button-subtle-content,
 				:host([active]:not([disabled])) button .d2l-button-subtle-content {
 					color: var(--d2l-color-celestine-minus-1);
 				}
+
+				button:hover:not([disabled]),
+				button:focus:not([disabled]),
+				:host([active]:not([disabled])) {
+					--d2l-count-badge-background-color: var(--d2l-color-celestine-minus-1);
+				}
+
+
 				.d2l-button-subtle-has-icon .d2l-button-subtle-content-wrapper {
 					padding-inline: 1.2rem 0;
 				}
+
 				:host([icon-right]) .d2l-button-subtle-has-icon .d2l-button-subtle-content-wrapper {
 					padding-inline: 0 1.2rem;
 				}

package/components/count-badge/count-badge-mixin.js

@@ -106,26 +106,26 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 			:host([hidden]) {
 				display: none;
 			}
-			
+
 			:host {
 				display: inline-block;
 				min-width: 0.9rem;
 			}
-			
+
 			.d2l-count-badge-number {
 				font-weight: bold;
 			}
-			
+
 			:host([type="notification"]) .d2l-count-badge-number {
 				background-color: var(--d2l-color-carnelian-minus-1);
 				color: white;
 			}
-			
+
 			:host([type="count"]) .d2l-count-badge-number {
-				background-color: var(--d2l-color-gypsum);
-				color: var(--d2l-color-ferrite);
+				background-color: var(--d2l-count-badge-background-color, var(--d2l-color-gypsum));
+				color: var(--d2l-count-badge-foreground-color, var(--d2l-color-ferrite));
 			}
-			
+
 			:host([size="small"]) .d2l-count-badge-number {
 				border-radius: 0.55rem;
 				font-size: 0.6rem;
@@ -133,7 +133,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 				padding-left: 0.3rem;
 				padding-right: 0.3rem;
 			}
-			
+
 			:host([size="large"]) .d2l-count-badge-number {
 				border-radius: 0.7rem;
 				font-size: 0.8rem;
@@ -203,7 +203,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 		}
 		return html`
 			<div class="d2l-count-badge-number" style=${styleMap(numberStyles)}>
-					<div aria-hidden="true">${this.getNumberString()}</div>		
+					<div aria-hidden="true">${this.getNumberString()}</div>
 			</div>
 		`;
 	}

package/components/count-badge/demo/count-badge.html

@@ -41,6 +41,19 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Override Colorway of Count Badge</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-count-badge id="colorway-override" size="large" text="1 new notification." type="count" number="1"></d2l-count-badge>
+					<style>
+						#colorway-override {
+							--d2l-count-badge-background-color: purple;
+							--d2l-count-badge-foreground-color: #ffffff;
+						}
+					</style>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Small Notification Badge with Tooltip</h2>
 			<d2l-demo-snippet>
 				<template>

package/components/filter/filter.js

@@ -2,7 +2,7 @@ import '../colors/colors.js';
 import '../count-badge/count-badge.js';
 import '../button/button-icon.js';
 import '../button/button-subtle.js';
-import '../dropdown/dropdown-button-subtle.js';
+import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-content.js';
 import '../dropdown/dropdown-menu.js';
 import '../empty-state/empty-state-action-button.js';
@@ -208,7 +208,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	static get focusElementSelector() {
-		return 'd2l-dropdown-button-subtle';
+		return 'd2l-button-subtle';
 	}
 
 	firstUpdated(changedProperties) {
@@ -228,9 +228,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const header = this._buildHeader(singleDimension);
 		const dimensions = this._buildDimensions(singleDimension);
 
-		const filterCount = this._formatFilterCount(this._totalAppliedCount);
-		let buttonText = singleDimension ? this._dimensions[0].text : (this.text || this.localize('components.filter.filters'));
-		if (filterCount) buttonText = `${buttonText} (${filterCount})`;
+		const buttonText = singleDimension ? this._dimensions[0].text : (this.text || this.localize('components.filter.filters'));
 
 		let description = singleDimension ? this.localize('components.filter.singleDimensionDescription', { filterName: this._dimensions[0].text }) : this.localize('components.filter.filters');
 		description += `. ${this.localize('components.filter.filterCountDescription', { number: this._totalAppliedCount })}`;
@@ -266,17 +264,34 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				</d2l-dropdown-menu>
 			`;
 
+		const countBadgeTemplate = this._totalAppliedCount ?
+			html`
+				<d2l-count-badge
+					aria-hidden="true"
+					max-digits="2"
+					type="count"
+					number="${this._totalAppliedCount}">
+				</d2l-count-badge>`
+			: nothing;
+
 		return html`
-			<d2l-dropdown-button-subtle
-				class="vdiff-target"
+			<d2l-dropdown
 				@d2l-dropdown-close="${this._handleDropdownClose}"
 				@d2l-dropdown-open="${this._handleDropdownOpen}"
 				@d2l-dropdown-position="${this._stopPropagation}"
-				text="${buttonText}"
-				description="${description}"
+				class="vdiff-target"
 				?disabled="${this.disabled}">
+				<d2l-button-subtle
+					class="d2l-dropdown-opener"
+					description="${description}"
+					text="${buttonText}"
+					icon="tier1:chevron-down"
+					icon-right
+					?disabled="${this.disabled}">
+					${countBadgeTemplate}
+				</d2l-button-subtle>
 				${dropdownContent}
-			</d2l-dropdown-button-subtle>
+			</d2l-dropdown>
 			<slot @slotchange="${this._handleSlotChange}"></slot>
 		`;
 	}
@@ -608,12 +623,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		}
 	}
 
-	_formatFilterCount(count) {
-		if (count === 0) return;
-		else if (count >= 100) return '99+';
-		else return `${count}`;
-	}
-
 	_getActiveDimension() {
 		return !this._activeDimensionKey ? this._dimensions[0] : this._getDimensionByKey(this._activeDimensionKey);
 	}

package/components/hierarchical-view/README.md

@@ -241,3 +241,4 @@ class MyComponent extends HierarchicalViewMixin(LitElement) {
 - `d2l-hierarchical-view-show-complete`: dispatched when child view is shown (when animation ends)
 - `d2l-hierarchical-view-hide-start`: dispatched when child view will be hidden (before animation begins)
 - `d2l-hierarchical-view-hide-complete`: dispatched when child view is hidden (when animation ends)
+- `d2l-hierarchical-view-resize`: dispatched when child view is resized

package/components/hierarchical-view/hierarchical-view.js

@@ -1,6 +1,13 @@
 import { css, html, LitElement } from 'lit';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 
+/**
+ * @fires d2l-hierarchical-view-show-start - Dispatched when child view will be shown (before animation begins)
+ * @fires d2l-hierarchical-view-show-complete - Dispatched when child view is shown (when animation ends)
+ * @fires d2l-hierarchical-view-hide-start - Dispatched when child view will be hidden (before animation begins)
+ * @fires d2l-hierarchical-view-hide-complete - Dispatched when child view is hidden (when animation ends)
+ * @fires d2l-hierarchical-view-resize - Dispatched when child view is resized
+ */
 class HierarchicalView extends HierarchicalViewMixin(LitElement) {
 
 	static get styles() {

package/components/table/README.md

@@ -132,7 +132,9 @@ For long tables, the header row can be made to "stick" in place as the user scro
 
 ## Sortable Column Buttons [d2l-table-col-sort-button]
 
-When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used to provide an interactive sort button as well as arrows to indicate the ascending/descending sort direction.
+When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used to provide an interactive sort button as well as arrows to indicate the ascending/descending sort direction. This is meant to be used within a `d2l-table-wrapper`.
+
+Note that the example below hides much of the implementation. See the code in [Multi-Faceted Sort Button](#multi-faceted-sort-button) for a more detailed implementation example.
 
 <!-- docs: demo -->
 ```html
@@ -210,15 +212,17 @@ When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used t
 ```
 
 ```html
-<table class="d2l-table">
-  <thead>
-    <tr>
-      <th><d2l-table-col-sort-button>Ascending</d2l-table-col-sort-button></th>
-      <th><d2l-table-col-sort-button desc>Descending</d2l-table-col-sort-button></th>
-      <th><d2l-table-col-sort-button nosort>Not Sorted</d2l-table-col-sort-button></th>
-    </tr>
-  </thead>
-</table>
+<d2l-table-wrapper>
+  <table class="d2l-table">
+    <thead>
+      <tr>
+        <th><d2l-table-col-sort-button>Ascending</d2l-table-col-sort-button></th>
+        <th><d2l-table-col-sort-button desc>Descending</d2l-table-col-sort-button></th>
+        <th><d2l-table-col-sort-button nosort>Not Sorted</d2l-table-col-sort-button></th>
+      </tr>
+    </thead>
+  </table>
+</d2l-table-wrapper>
 ```
 
 ### Properties
@@ -228,7 +232,134 @@ When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used t
 | `desc` | boolean | Whether sort direction is descending | false |
 | `nosort` | boolean | Column is not currently sorted. Hides the ascending/descending sort icon. | false |
 | `position` | string | Position of the button content. Accepted values are 'start', 'center', and 'end'. | 'start' |
-| `source-type` | string | The type of data in the column. Used to set the title. Accepted values are 'words', 'numbers', and 'dates'. | 'unknown' |
+| `source-type` | string | The type of data in the column. Used to set the title. Accepted values are 'words', 'numbers', and 'dates'. This is only applicable to cases that are not using the multi-faceted dropdown. | 'unknown' |
+
+### Slots
+| Name | Description |
+|---|---|
+| `Default` | Column header text |
+| `items` | Multi-facted sort items. Generally assigned to the `slot` attribute on a nested `d2l-table-col-sort-button-item`. |
+
+### Slotted Item [d2l-table-col-sort-button-item]
+
+This is a radio menu item to be used within the `d2l-table-col-sort-button` component for a [multi-faceted sort](#multi-faceted-sort-button).
+
+<!-- docs: demo code properties autoSize:false align:start name:d2l-table-col-sort-button-item -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/table/table-col-sort-button.js';
+  import '@brightspace-ui/core/components/table/table-col-sort-button-item.js';
+</script>
+<!-- docs: start hidden content -->
+<style>
+  d2l-table-col-sort-button {
+    --d2l-table-cell-padding: 10px;
+  }
+</style>
+<!-- docs: end hidden content -->
+<d2l-table-col-sort-button desc>
+  Items
+  <d2l-table-col-sort-button-item text="Item 1" slot="items" value="item1"></d2l-table-col-sort-button-item>
+  <d2l-table-col-sort-button-item text="Item 2" slot="items" value="item2"></d2l-table-col-sort-button-item>
+</d2l-table-col-sort-button>
+```
+
+### Multi-Faceted Sort Button
+
+When a single column is responsible for sorting in multiple facets (e.g., first name and last name), it is recommended to use the dropdown menu approach by slotting `d2l-table-col-sort-button-item` components within the `d2l-table-col-sort-button`. Please note that the consumer is responsible for all sort logic, including when `desc` and `nosort` are set on `d2l-table-col-sort-button`.
+
+**WARNING**: Do NOT use this if the table is using `sticky-headers` AND multiple header rows. It is not currently supported. In that siuation, continue to put multiple `d2l-table-col-sort-button` components in the same column.
+
+<!-- docs: demo code display:block -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/table/table-col-sort-button.js';
+  import '@brightspace-ui/core/components/table/table-col-sort-button-item.js';
+  import { html, LitElement } from 'lit';
+  import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
+  const data = () => [
+    { firstname: 'John', lastname: 'Smith', grade: 85 },
+    { firstname: 'Emily', lastname: 'Jones', grade: 92 },
+    { firstname: 'Michael', lastname: 'Davis', grade: 78 },
+    { firstname: 'Sarah', lastname: 'Brown', grade: 90 },
+    { firstname: 'David', lastname: 'Wilson', grade: 88 },
+    { firstname: 'Jessica', lastname: 'Taylor', grade: 95 },
+    { firstname: 'Christopher', lastname: 'Martinez', grade: 83 }
+  ];
+  class MyComplexSortableTableElem extends LitElement {
+    static get properties() {
+      return {
+        _desc: { state: true },
+        _field: { state: true }
+      };
+    }
+    static get styles() {
+      return tableStyles;
+    }
+    constructor() {
+      super();
+      this._data = data();
+      this._desc = false;
+    }
+    render() {
+      const rowData = this._field ? this._data.sort((a, b) => {
+        if (this._desc) {
+          if (a[this._field] > b[this._field]) return -1;
+          if (a[this._field] < b[this._field]) return 1;
+        } else {
+          if (a[this._field] < b[this._field]) return -1;
+          if (a[this._field] > b[this._field]) return 1;
+        }
+        return 0;
+      }) : this._data;
+      const rows = rowData.map(i => {
+        return html`<tr>
+            <td>${i.firstname} ${i.lastname}</td>
+            <td>${i.grade}</td>
+          </tr>
+        `;
+      });
+      return html`
+        <d2l-table-wrapper>
+          <table class="d2l-table">
+            <thead>
+              <tr>
+                <th>
+                  <d2l-table-col-sort-button ?desc="${this._desc}" ?nosort="${this._field !== 'firstname' && this._field !== 'lastname'}">
+                    Learner
+                    <d2l-table-col-sort-button-item slot="items" text="First Name, A to Z" data-field="firstname" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="1"></d2l-table-col-sort-button-item>
+                    <d2l-table-col-sort-button-item slot="items" text="First Name, Z to A" data-field="firstname" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="2"></d2l-table-col-sort-button-item>
+                    <d2l-table-col-sort-button-item slot="items" text="Last Name, A to Z" data-field="lastname" @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="3"></d2l-table-col-sort-button-item>
+                    <d2l-table-col-sort-button-item slot="items" text="Last Name, Z to A" data-field="lastname" data-desc @d2l-table-col-sort-button-item-change="${this._handleSortComplex}" value="4"></d2l-table-col-sort-button-item>
+                  </d2l-table-col-sort-button>
+                </th>
+                <th>
+                  <d2l-table-col-sort-button ?desc="${this._desc}" data-field="grade" @click="${this._handleSort}" ?nosort="${this._field !== 'grade'}">Grade</d2l-table-col-sort-button>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              ${rows}
+            </tbody>
+          </table>
+        </d2l-table-wrapper>
+      `;
+    }
+    _handleSort(e) {
+      const field = e.target.getAttribute('data-field');
+      const desc = e.target.hasAttribute('desc');
+      this._desc = field === this._field ? !desc : false;
+      this._field = field;
+    }
+    _handleSortComplex(e) {
+      this._field = e.target.getAttribute('data-field');
+      this._desc = e.target.hasAttribute('data-desc');
+    }
+  }
+  customElements.define('d2l-my-complex-sortable-table-elem', MyComplexSortableTableElem);
+</script>
+<d2l-my-complex-sortable-table-elem></d2l-my-complex-sortable-table-elem>
+```
 
 ## Selection
 

package/components/table/table-col-sort-button-item.js

@@ -6,6 +6,9 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * A radio menu item to be used within the d2l-table-col-sort-button component for a multi-faceted sort.
+ * @fires d2l-menu-item-change - Internal event
+ * @fires d2l-menu-item-select - Internal event
+ * @fires d2l-menu-item-visibility-change - Internal event
  */
 class TableColSortButtonItem extends RtlMixin(MenuItemRadioMixin(LitElement)) {
 

package/custom-elements.json

@@ -4564,7 +4564,29 @@
     },
     {
       "name": "d2l-hierarchical-view",
-      "path": "./components/hierarchical-view/hierarchical-view.js"
+      "path": "./components/hierarchical-view/hierarchical-view.js",
+      "events": [
+        {
+          "name": "d2l-hierarchical-view-show-start",
+          "description": "Dispatched when child view will be shown (before animation begins)"
+        },
+        {
+          "name": "d2l-hierarchical-view-show-complete",
+          "description": "Dispatched when child view is shown (when animation ends)"
+        },
+        {
+          "name": "d2l-hierarchical-view-hide-start",
+          "description": "Dispatched when child view will be hidden (before animation begins)"
+        },
+        {
+          "name": "d2l-hierarchical-view-hide-complete",
+          "description": "Dispatched when child view is hidden (when animation ends)"
+        },
+        {
+          "name": "d2l-hierarchical-view-resize",
+          "description": "Dispatched when child view is resized"
+        }
+      ]
     },
     {
       "name": "d2l-html-block",
@@ -12118,21 +12140,21 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-table-col-sort-button-item-change",
-          "description": "Dispatched when the selected multi-faceted sort option changes"
-        },
         {
           "name": "d2l-menu-item-change",
-          "description": "Dispatched when the selected menu item changes"
+          "description": "Internal event"
         },
         {
           "name": "d2l-menu-item-select",
-          "description": "Dispatched when the menu item is selected"
+          "description": "Internal event"
         },
         {
           "name": "d2l-menu-item-visibility-change",
-          "description": "Dispatched when the visibility of the menu item changes"
+          "description": "Internal event"
+        },
+        {
+          "name": "d2l-table-col-sort-button-item-change",
+          "description": "Dispatched when the selected multi-faceted sort option changes"
         }
       ]
     },

package/package.json

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