@brightspace-ui/core 1.199.1 → 1.202.0

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

@@ -120,7 +120,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
 			
 			:host([type="count"]) .d2l-count-badge-number {
 				background-color: var(--d2l-color-gypsum);
-				color: var(--d2l-color-tungsten);
+				color: var(--d2l-color-ferrite);
 			}
 			
 			:host([size="small"]) .d2l-count-badge-number {

package/components/demo/demo-snippet.js

@@ -8,6 +8,7 @@ class DemoSnippet extends LitElement {
 	static get properties() {
 		return {
 			codeViewHidden: { type: Boolean, reflect: true, attribute: 'code-view-hidden' },
+			fullscreen: { type: Boolean, reflect: true },
 			noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
 			overflowHidden: { type: Boolean, reflect: true, attribute: 'overflow-hidden' },
 			_code: { type: String },
@@ -30,6 +31,9 @@ class DemoSnippet extends LitElement {
 			:host([hidden]) {
 				display: none;
 			}
+			:host([fullscreen]) {
+				max-width: unset;
+			}
 			.d2l-demo-snippet-demo-wrapper {
 				display: flex;
 			}
@@ -66,6 +70,7 @@ class DemoSnippet extends LitElement {
 
 	constructor() {
 		super();
+		this.fullscreen = false;
 		this._dir = document.documentElement.dir;
 		this._hasSkeleton = false;
 		this._skeletonOn = false;

package/components/filter/filter.js

@@ -244,10 +244,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			const countBadgeId = `filters-applied-count-${dimension.key}`;
 			const filtersAppliedText = `${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
 			return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}." aria-describedby="${countBadgeId}">
-				${builtDimension}
 				<div slot="supporting">
 					<d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
 				</div>
+				${builtDimension}
 			</d2l-menu-item>`;
 		});
 	}
@@ -364,6 +364,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				id="${SET_DIMENSION_ID_PREFIX}${dimension.key}"
 				@d2l-list-selection-change="${this._handleChangeSetDimension}"
 				extend-separators
+				grid
 				?selection-single="${dimension.selectionSingle}">
 				${dimension.values.map(item => html`
 					<d2l-list-item

package/custom-elements.json

@@ -1386,6 +1386,11 @@
         {
           "name": "overflow-hidden",
           "type": "boolean"
+        },
+        {
+          "name": "fullscreen",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1403,6 +1408,12 @@
           "name": "overflowHidden",
           "attribute": "overflow-hidden",
           "type": "boolean"
+        },
+        {
+          "name": "fullscreen",
+          "attribute": "fullscreen",
+          "type": "boolean",
+          "default": "false"
         }
       ]
     },

package/helpers/README.md

@@ -21,6 +21,25 @@ import { AsyncStateEvent } from '@brightspace-ui/core/helpers/asyncStateEvent.js
 const asyncStateEvent = new AsyncStateEvent(pendingPromise);
 ```
 
+## composeMixins
+
+A helper function for cleanly incorporating a list of mixins into a base class. Designed for use with Lit components with a large amount of reusable functionality.
+
+```js
+// other imports...
+import { composeMixins } from '@brightspace-ui/core/helpers/composeMixins.js';
+
+class ExampleComponent extends composeMixins(
+  LitElement,
+  EntityMixin,
+  LocalizeMixin,
+) {
+  // ...
+}
+```
+
+Read more about mixins on [the `open-wc` docs](https://open-wc.org/docs/development/dedupe-mixin/#what-is-a-mixin).
+
 ## Dismissible
 
 Dismissible components are those that should be dismissible when the user presses
@@ -196,4 +215,3 @@ import '@brightspace-ui/core/helpers/viewport-size.js';
     min-width: calc(var(--d2l-vw, 1vw) * 100);
 }
 ```
-

package/helpers/composeMixins.js

@@ -0,0 +1,2 @@
+export const composeMixins = (base, ...mixins) =>
+	mixins.reduce((subclass, superclass) => superclass(subclass), base);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.199.1",
+  "version": "1.202.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "repository": "https://github.com/BrightspaceUI/core.git",
   "publishConfig": {
@@ -57,7 +57,7 @@
     "eslint-plugin-sort-class-members": "^1",
     "lit-analyzer": "^1",
     "node-sass": "^6",
-    "sinon": "^11",
+    "sinon": "^12",
     "stylelint": "^13"
   },
   "dependencies": {