@brightspace-ui/core 3.35.0 → 3.35.2

package/components/button/button-icon.js

@@ -36,7 +36,13 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
 			 * @type {string}
 			 */
-			icon: { type: String, reflect: true, required: true },
+			icon: {
+				type: String,
+				reflect: true,
+				required: {
+					validator: (_value, elem, hasValue) => hasValue || elem._hasCustomIcon
+				}
+			},
 
 			/**
 			 * ACCESSIBILITY: REQUIRED: Accessible text for the button
@@ -162,6 +168,8 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 		this._buttonId = getUniqueId();
 		/** @internal */
 		this._describedById = getUniqueId();
+		/** @internal */
+		this._hasCustomIcon = false;
 	}
 
 	render() {
@@ -185,13 +193,19 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 				name="${ifDefined(this.name)}"
 				title="${ifDefined(this.text)}"
 				type="${this._getType()}">
-				<slot name="icon">${icon}</slot>
+				<slot name="icon" @slotchange="${this._handleSlotChange}">${icon}</slot>
 		</button>
 		${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
 		${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
 		`;
 	}
 
+	_handleSlotChange(e) {
+		this._hasCustomIcon = e.target.assignedNodes().find(
+			node => node.nodeType === 1 && node.tagName.toLowerCase() === 'd2l-icon-custom'
+		) !== undefined;
+	}
+
 }
 
 customElements.define('d2l-button-icon', ButtonIcon);

package/components/demo/demo/demo-snippet.html

@@ -19,6 +19,12 @@
 					<d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
 			</d2l-demo-snippet>
 
+			<h2>Demo Snippet (custom width)</h2>
+
+			<d2l-demo-snippet style="max-width: 80%;">
+					<d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
+			</d2l-demo-snippet>
+
 			<h2>Demo Snippet (using template)</h2>
 
 			<d2l-demo-snippet>

package/components/demo/demo-snippet.js

@@ -101,7 +101,7 @@ class DemoSnippet extends LitElement {
 				border-top-left-radius: 0;
 				border-top-right-radius: 0;
 				margin: 0;
-				max-width: inherit;
+				max-width: 100%;
 			}
 			:host([code-view-hidden]) d2l-code-view {
 				display: none;

package/package.json

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