@brightspace-ui/core 3.333.5 → 3.334.0

package/components/dialog/dialog-mixin.js

@@ -104,9 +104,7 @@ export const DialogMixin = superclass => class extends superclass {
 		window.removeEventListener('d2l-mvc-dialog-open', this.#handleMvcDialogOpen);
 
 		// If the dialog is disconnected before the close animation finishes
-		if (!this.#closeHandled) {
-			this._handleClose();
-		}
+		this._handleClose();
 	}
 
 	async updated(changedProperties) {
@@ -376,6 +374,8 @@ export const DialogMixin = superclass => class extends superclass {
 	}
 
 	_handleClose() {
+		if (this.#closeHandled) return;
+		this.#closeHandled = true;
 		/* reset state if native dialog closes unexpectedly. ex. user highlights
 		text and then hits escape key - this is not caught by our key handler */
 		this._removeHandlers();
@@ -392,7 +392,6 @@ export const DialogMixin = superclass => class extends superclass {
 				detail: { action: this._action }
 			}
 		));
-		this.#closeHandled = true;
 	}
 
 	_handleDialogCloseWithinNative(e) {

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.5",
+  "version": "3.334.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",