@brightspace-ui/core 3.333.6 → 3.334.1

package/components/filter/filter.js

@@ -436,11 +436,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		}
 		return this._dimensions.map((dimension) => {
 			const builtDimension = this._buildDimension(dimension);
-			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}">
+			return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}. ${filtersAppliedText}">
 				<div slot="supporting">
-					<d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
+					<d2l-count-badge number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
 				</div>
 				${builtDimension}
 			</d2l-menu-item>`;

package/components/view-switcher/README.md

@@ -45,6 +45,8 @@ A segmented component to switch between views. Use a view switcher to change bet
 |---|---|---|
 |`key` | String, required | Key for the button. |
 |`text`| String, required  | Text for the button. |
+|`text-hidden`| Boolean, default: `false` | Hides the text visually. Will reset to false unless an icon is set |
+| `icon` | String | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
 |`selected`| Boolean, default: `false` | Indicates if the item is selected. |
 
 ### Events

package/components/view-switcher/view-switcher-button.js

@@ -1,16 +1,20 @@
 import '../colors/colors.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { labelStyles } from '../typography/styles.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 /**
  * A button component to be used in d2l-view-switcher.
  * @fires d2l-view-switcher-select - Dispatched when the item is selected
+ * @slot icon - Optional slot for a custom icon
  */
-class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
+class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(SlottedIconMixin(LitElement))) {
 
 	static properties = {
 		/**
@@ -28,6 +32,11 @@ class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
 		 * @type {boolean}
 		 */
 		selected: { type: Boolean, reflect: true },
+		/**
+		 * Hides the text visually
+		 * @type {boolean}
+		 */
+		textHidden: { type: Boolean, attribute: 'text-hidden' }
 	};
 
 	static styles = [labelStyles, buttonStyles, css`
@@ -39,7 +48,8 @@ class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
 		button {
 			background-color: transparent;
 			border-radius: 0.2rem;
-			display: block;
+			column-gap: 0.3rem;
+			display: inline-flex;
 			font-family: inherit;
 			min-height: auto;
 			padding-block: 0.3rem;
@@ -58,11 +68,16 @@ class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
 			background-color: var(--d2l-color-tungsten);
 			color: #ffffff;
 		}
+		:host([selected]) d2l-icon,
+		:host([selected]) ::slotted(d2l-icon-custom) {
+			color: #ffffff;
+		}
 	`];
 
 	constructor() {
 		super();
 		this.selected = false;
+		this.textHidden = false;
 	}
 
 	static get focusElementSelector() {
@@ -70,13 +85,21 @@ class ViewSwitcherButton extends PropertyRequiredMixin(FocusMixin(LitElement)) {
 	}
 
 	render() {
+		const hideText = this.textHidden && this.hasIcon();
+		const label = hideText ? this.text : undefined;
+		const iconPaddingOverride = {
+			paddingInline: hideText ? '0.3rem' : (this.hasIcon() ? '0.6rem' : undefined)
+		};
 		return html`
 			<button
+				aria-label="${ifDefined(label)}"
 				aria-pressed="${this.selected ? 'true' : 'false'}"
 				class="d2l-label-text"
 				@click="${this.#handleClick}"
+				style="${styleMap(iconPaddingOverride)}"
 				type="button">
-				${this.text}
+				${this._renderIcon()}
+				${hideText ? nothing : this.text}
 			</button>
 		`;
 	}

package/custom-elements.json

@@ -18159,6 +18159,17 @@
           "description": "Indicates if the item is selected",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "text-hidden",
+          "description": "Hides the text visually",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
         }
       ],
       "properties": [
@@ -18185,6 +18196,19 @@
           "description": "Indicates if the item is selected",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "textHidden",
+          "attribute": "text-hidden",
+          "description": "Hides the text visually",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
         }
       ],
       "events": [
@@ -18192,6 +18216,12 @@
           "name": "d2l-view-switcher-select",
           "description": "Dispatched when the item is selected"
         }
+      ],
+      "slots": [
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
+        }
       ]
     },
     {

package/package.json

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