@brightspace-ui/core 2.95.0 → 2.96.0

package/components/card/card-footer-link.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import '../count-badge/count-badge-icon.js';
 import '../icons/icon.js';
 import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
@@ -10,7 +11,7 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
  * An icon link that can be placed in the `footer` slot.
  * @slot tooltip - slot for the link tooltip
  */
-class CardFooterLink extends RtlMixin(LitElement) {
+class CardFooterLink extends FocusMixin(RtlMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -100,6 +101,10 @@ class CardFooterLink extends RtlMixin(LitElement) {
 		this.secondaryCountType = 'notification';
 	}
 
+	static get focusElementSelector() {
+		return 'a';
+	}
+
 	render() {
 		const noNumber = this.secondaryCount === undefined;
 		return html`

package/components/collapsible-panel/collapsible-panel.js

@@ -4,6 +4,7 @@ import '../expand-collapse/expand-collapse-content.js';
 import { css, html, LitElement } from 'lit';
 import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -25,7 +26,7 @@ const defaultHeading = 3;
  * @fires d2l-collapsible-panel-expand - Dispatched when the panel is expanded
  * @fires d2l-collapsible-panel-collapse - Dispatched when the panel is collapsed
  */
-class CollapsiblePanel extends RtlMixin(LitElement) {
+class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -271,6 +272,10 @@ class CollapsiblePanel extends RtlMixin(LitElement) {
 		this._scrolled = false;
 	}
 
+	static get focusElementSelector() {
+		return 'button.d2l-offscreen';
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();

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

@@ -2,11 +2,12 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-class CountBadgeIcon extends CountBadgeMixin(LitElement) {
+class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -78,6 +79,10 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 		this._badgeId = getUniqueId();
 	}
 
+	static get focusElementSelector() {
+		return 'd2l-icon';
+	}
+
 	render() {
 		let numberStyles = {
 			border: '2px solid white',

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

@@ -1,11 +1,12 @@
 import '../colors/colors.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-class CountBadge extends CountBadgeMixin(LitElement) {
+class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 
 	static get styles() {
 		return [super.styles, css`
@@ -38,6 +39,10 @@ class CountBadge extends CountBadgeMixin(LitElement) {
 		this._badgeId = getUniqueId();
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-count-badge-wrapper';
+	}
+
 	render() {
 		const tabbable = (this.tabStop || this.hasTooltip) && !(this.hideZero && this.number === 0) && !this.skeleton;
 		const innerHtml =  html`

package/components/filter/filter-dimension-set.js

@@ -1,10 +1,5 @@
 import { html, LitElement } from 'lit';
 
-export const EmptyStateType = {
-	Search: 'search',
-	Set: 'set'
-};
-
 /**
  * A component to represent the main filter dimension type - a set of possible values that can be selected.
  * This component does not render anything, but instead gathers data needed for the d2l-filter.
@@ -104,11 +99,11 @@ class FilterDimensionSet extends LitElement {
 	}
 
 	getSearchEmptyState() {
-		return this._getEmptyState(this._searchEmptyStateSlot);
+		return this._getEmptyState(this._searchEmptyStateSlot, 'search');
 	}
 
 	getSetEmptyState() {
-		return this._getEmptyState(this._setEmptyStateSlot);
+		return this._getEmptyState(this._setEmptyStateSlot, 'set');
 	}
 
 	getValues() {
@@ -134,7 +129,7 @@ class FilterDimensionSet extends LitElement {
 		}));
 	}
 
-	_getEmptyState(emptyStateSlot) {
+	_getEmptyState(emptyStateSlot, emptyStateType) {
 		if (!emptyStateSlot) return null;
 		const nodes = emptyStateSlot.assignedNodes({ flatten: true });
 		const emptyState = nodes.find((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'd2l-filter-dimension-set-empty-state');
@@ -142,7 +137,8 @@ class FilterDimensionSet extends LitElement {
 		return {
 			actionHref: emptyState.actionHref,
 			actionText: emptyState.actionText,
-			description: emptyState.description
+			description: emptyState.description,
+			type: emptyStateType
 		};
 	}
 

package/components/filter/filter.js

@@ -22,7 +22,6 @@ import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '../typog
 import { css, html, LitElement, nothing } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { EmptyStateType } from './filter-dimension-set.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -415,7 +414,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		`;
 	}
 
-	_createEmptyState(emptyState, dimensionKey, type) {
+	_createEmptyState(emptyState, dimensionKey) {
 		let emptyStateAction = nothing;
 		if (emptyState.actionText && emptyState.actionHref) {
 			emptyStateAction = html`
@@ -430,7 +429,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				<d2l-empty-state-action-button
 					@d2l-empty-state-action="${this._handleEmptyStateAction}"
 					data-dimension-key="${dimensionKey}"
-					data-type="${type}"
+					data-type="${emptyState.type}"
 					text="${emptyState.actionText}">
 				</d2l-empty-state-action-button>
 			`;
@@ -454,7 +453,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		if (this._isDimensionEmpty(dimension)) {
 			const emptyState = dimension.setEmptyState
-				? this._createEmptyState(dimension.setEmptyState, dimension.key, EmptyStateType.Set)
+				? this._createEmptyState(dimension.setEmptyState, dimension.key)
 				: html`
 					<d2l-empty-state-simple
 						class="d2l-filter-dimension-info-message"
@@ -476,7 +475,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				'd2l-offscreen': count !== 0
 			};
 			const emptyState = dimension.searchEmptyState && count === 0
-				? this._createEmptyState(dimension.searchEmptyState, dimension.key, EmptyStateType.Search)
+				? this._createEmptyState(dimension.searchEmptyState, dimension.key)
 				: html`
 					<d2l-empty-state-simple
 						class="d2l-filter-dimension-info-message"

package/mixins/focus-mixin.md

@@ -12,13 +12,14 @@ Apply the mixin and set the static `focusElementSelector` to a CSS query selecto
 import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
 
 class MyComponent extends FocusMixin(LitElement) {
-  
+
   // delegate focus to the underlying input
   static get focusElementSelector() {
-		return 'input';
+    return 'input';
+  }
 
   render() {
-	  return html`<input type="text">`;
+    return html`<input type="text">`;
   }
 
 }

package/package.json

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