@brightspace-ui/core 3.5.2 → 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/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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.5.2",
+  "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",