@brightspace-ui/core 3.135.6 → 3.136.0

package/components/button/button-icon.js

@@ -1,20 +1,21 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { ButtonMixin } from './button-mixin.js';
 import { buttonStyles } from './button-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
 import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 /**
  * A button component that can be used just like the native button for instances where only an icon is displayed.
  * @slot icon - Optional slot for a custom icon
  */
-class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(LitElement)))) {
+class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(LitElement))))) {
 
 	static get properties() {
 		return {
@@ -30,18 +31,6 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 			 */
 			hAlign: { type: String, reflect: true, attribute: 'h-align' },
 
-			/**
-			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
-			 * @type {string}
-			 */
-			icon: {
-				type: String,
-				reflect: true,
-				required: {
-					validator: (_value, elem, hasValue) => hasValue || elem._hasCustomIcon
-				}
-			},
-
 			/**
 			 * ACCESSIBILITY: REQUIRED: Accessible text for the button
 			 * @type {string}
@@ -57,7 +46,7 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 	}
 
 	static get styles() {
-		return [ buttonStyles, visibleOnAncestorStyles,
+		return [super.styles, buttonStyles, visibleOnAncestorStyles,
 			css`
 				:host {
 					--d2l-button-icon-background-color: transparent;
@@ -118,18 +107,9 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 					background-color: var(--d2l-button-icon-background-color-hover);
 				}
 
-				slot[name="icon"]::slotted(*) {
-					display: none;
-				}
-				slot[name="icon"]::slotted(d2l-icon-custom) {
-					display: inline-flex;
-				}
-
 				d2l-icon,
 				slot[name="icon"]::slotted(d2l-icon-custom) {
 					color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
-					height: 0.9rem;
-					width: 0.9rem;
 				}
 
 				:host([translucent]) button {
@@ -162,12 +142,10 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 		this._buttonId = getUniqueId();
 		/** @internal */
 		this._describedById = getUniqueId();
-		/** @internal */
-		this._hasCustomIcon = false;
+		this._iconRequired = true;
 	}
 
 	render() {
-		const icon = this.icon ? html`<d2l-icon icon="${this.icon}"></d2l-icon>` : nothing;
 		return html`
 			<button
 				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
@@ -187,19 +165,13 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 				name="${ifDefined(this.name)}"
 				title="${ifDefined(this.text)}"
 				type="${this._getType()}">
-				<slot name="icon" @slotchange="${this._handleSlotChange}">${icon}</slot>
+				${this._renderIcon()}
 		</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/button/button-subtle.js

@@ -1,19 +1,20 @@
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { ButtonMixin } from './button-mixin.js';
 import { buttonStyles } from './button-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { labelStyles } from '../typography/styles.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
 
 /**
  * A button component that can be used just like the native button, but for advanced or de-emphasized actions.
  * @slot - Default content placed inside of the button
  * @slot icon - Optional slot for a custom icon
  */
-class ButtonSubtle extends ButtonMixin(LitElement) {
+class ButtonSubtle extends SlottedIconMixin(ButtonMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -29,12 +30,6 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 			 */
 			hAlign: { type: String, reflect: true, attribute: 'h-align' },
 
-			/**
-			 * Preset icon key (e.g. "tier1:gear")
-			 * @type {string}
-			 */
-			icon: { type: String, reflect: true },
-
 			/**
 			 * Indicates that the icon should be rendered on right
 			 * @type {boolean}
@@ -51,13 +46,12 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 			 * ACCESSIBILITY: REQUIRED: Text for the button
 			 * @type {string}
 			 */
-			text: { type: String, reflect: true },
-			_hasCustomIcon: { state: true }
+			text: { type: String, reflect: true }
 		};
 	}
 
 	static get styles() {
-		return [ labelStyles, buttonStyles,
+		return [super.styles, labelStyles, buttonStyles,
 			css`
 				:host {
 					--d2l-count-badge-background-color: var(--d2l-color-celestine);
@@ -72,8 +66,11 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 				button {
 					--d2l-button-subtle-padding-inline-start: 0.6rem;
 					--d2l-button-subtle-padding-inline-end: 0.6rem;
+					align-items: center;
 					background-color: transparent;
 					border-color: transparent;
+					column-gap: 0.3rem;
+					display: inline-flex;
 					font-family: inherit;
 					padding-block-end: 0;
 					padding-block-start: 0;
@@ -138,42 +135,23 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 					--d2l-count-badge-background-color: var(--d2l-color-celestine-minus-1);
 				}
 
-
-				.d2l-button-subtle-has-icon .d2l-button-subtle-content-wrapper {
-					padding-inline: 1.2rem 0;
-				}
-
-				:host([icon-right]) .d2l-button-subtle-has-icon .d2l-button-subtle-content-wrapper {
-					padding-inline: 0 1.2rem;
-				}
-
-				slot[name="icon"]::slotted(*) {
-					display: none;
-				}
-
-				d2l-icon.d2l-button-subtle-icon,
+				.property-icon,
 				slot[name="icon"]::slotted(d2l-icon-custom) {
 					color: var(--d2l-color-celestine);
-					display: inline-block;
-					height: 0.9rem;
-					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
-					width: 0.9rem;
 				}
 
-				button:hover:not([disabled]) d2l-icon.d2l-button-subtle-icon,
-				button:focus:not([disabled]) d2l-icon.d2l-button-subtle-icon,
-				:host([active]:not([disabled])) button d2l-icon.d2l-button-subtle-icon,
+				button:hover:not([disabled]) .property-icon,
+				button:focus:not([disabled]) .property-icon,
+				:host([active]:not([disabled])) button .property-icon,
 				button:hover:not([disabled]) slot[name="icon"]::slotted(d2l-icon-custom),
 				button:focus:not([disabled]) slot[name="icon"]::slotted(d2l-icon-custom),
 				:host([active]:not([disabled])) slot[name="icon"]::slotted(d2l-icon-custom) {
 					color: var(--d2l-color-celestine-minus-1);
 				}
 
-				:host([icon-right]) .d2l-button-subtle-has-icon d2l-icon.d2l-button-subtle-icon,
+				:host([icon-right]) .property-icon,
 				:host([icon-right]) slot[name="icon"]::slotted(d2l-icon-custom) {
-					inset-inline-end: var(--d2l-button-subtle-padding-inline-end);
+					order: 1;
 				}
 
 				:host([disabled]) button {
@@ -191,13 +169,11 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 
 		this._buttonId = getUniqueId();
 		this._describedById = getUniqueId();
-		this._hasCustomIcon = false;
 	}
 
 	render() {
-		const icon = this.icon ? html`<d2l-icon icon="${this.icon}" class="d2l-button-subtle-icon"></d2l-icon>` : nothing;
 		const buttonClasses = {
-			'd2l-button-subtle-has-icon': this._hasCustomIcon || this.icon,
+			'd2l-button-subtle-has-icon': this.hasIcon(),
 			'd2l-label-text': true
 		};
 		return html`
@@ -219,7 +195,7 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 				id="${this._buttonId}"
 				name="${ifDefined(this.name)}"
 				type="${this._getType()}">
-				<slot name="icon" @slotchange="${this._handleIconSlotChange}">${icon}</slot>
+				${this._renderIcon()}
 				<span class="d2l-button-subtle-content-wrapper">
 					<span class="d2l-button-subtle-content">${this.text}</span>
 					<slot></slot>
@@ -230,13 +206,6 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 		`;
 	}
 
-	_handleIconSlotChange(e) {
-		const icon = e && e.target && e.target.assignedNodes({ flatten: true }).filter((node) => {
-			return node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-ICON-CUSTOM';
-		});
-		this._hasCustomIcon = icon.length === 1;
-	}
-
 }
 
 customElements.define('d2l-button-subtle', ButtonSubtle);

package/components/icons/slotted-icon-mixin.js

@@ -0,0 +1,64 @@
+import '../icons/icon.js';
+import { css, html, nothing } from 'lit';
+
+export const SlottedIconMixin = superclass => class extends superclass {
+
+	static get properties() {
+		return {
+
+			/**
+			 * Preset icon key (e.g. "tier1:gear")
+			 * @type {string}
+			 */
+			icon: {
+				type: String,
+				reflect: true,
+				required: {
+					validator: (_value, elem, hasValue) => hasValue || elem._hasCustomIcon || !elem._iconRequired
+				}
+			},
+			_hasCustomIcon: { state: true }
+		};
+	}
+
+	static get styles() {
+		const styles = [ css`
+			slot[name="icon"]::slotted(*) {
+				display: none;
+			}
+			slot[name="icon"]::slotted(d2l-icon-custom) {
+				display: inline-flex;
+			}
+
+			d2l-icon.property-icon,
+			slot[name="icon"]::slotted(d2l-icon-custom) {
+				height: 0.9rem;
+				width: 0.9rem;
+			}
+		`];
+
+		super.styles && styles.unshift(super.styles);
+		return styles;
+	}
+
+	constructor() {
+		super();
+		/** @internal */
+		this._hasCustomIcon = false;
+		this._iconRequired = false;
+	}
+
+	hasIcon() {
+		return !!(this.icon || this._hasCustomIcon);
+	}
+
+	_renderIcon() {
+		const icon = this.icon ? html`<d2l-icon icon="${this.icon}" class="property-icon"></d2l-icon>` : nothing;
+		return html`<slot name="icon" @slotchange="${this.#handleIconSlotChange}">${icon}</slot>`;
+	}
+
+	#handleIconSlotChange(e) {
+		const icon = e.target.assignedElements({ flatten: true }).filter((node) => node.tagName === 'D2L-ICON-CUSTOM');
+		this._hasCustomIcon = icon.length === 1;
+	}
+};

package/components/tooltip/demo/tooltip.html

@@ -9,6 +9,7 @@
 		import '../../button/button.js';
 		import '../../colors/colors.js';
 		import '../../demo/demo-page.js';
+		import '../../icons/icon-custom.js';
 		import '../../inputs/input-text.js';
 		import '../../link/link.js';
 		import '../tooltip.js';
@@ -199,6 +200,22 @@
 					This is some sample text.
 					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
 				</p>
+				<p class="d2l-body-compact">
+					Using an icon.
+					<d2l-tooltip-help icon="tier1:edit" text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+				</p>
+				<p class="d2l-body-compact">
+					Using a custom icon.
+					<d2l-tooltip-help text="Helpful label" inherit-font-style>
+						Contents should elaborate on the label (be short and concise)
+						<d2l-icon-custom slot="icon">
+							<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
+		 						<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
+		 						<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
+		 					</svg>
+						</d2l-icon-custom>
+					</d2l-tooltip-help>
+				</p>
 			</template>
 		</d2l-demo-snippet>
 

package/components/tooltip/tooltip-help.js

@@ -7,12 +7,13 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
 
 /**
  * A component used to display additional information when users focus or hover over some text.
  * @slot - Default content placed inside of the tooltip
  */
-class TooltipHelp extends SkeletonMixin(FocusMixin(LitElement)) {
+class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -47,9 +48,12 @@ class TooltipHelp extends SkeletonMixin(FocusMixin(LitElement)) {
 				display: none;
 			}
 			#d2l-tooltip-help-text {
+				align-items: baseline;
 				background: none;
 				border: none;
+				column-gap: 0.3rem;
 				cursor: inherit;
+				display: inline-flex;
 				font-family: inherit;
 				padding: 0;
 				text-decoration-line: underline;
@@ -57,6 +61,11 @@ class TooltipHelp extends SkeletonMixin(FocusMixin(LitElement)) {
 				text-decoration-thickness: 1px;
 				text-underline-offset: 0.1rem;
 			}
+			d2l-icon,
+			slot[name="icon"]::slotted(d2l-icon-custom) {
+				align-self: center;
+			}
+
 			#d2l-tooltip-help-text:focus {
 				outline-style: none;
 			}
@@ -109,6 +118,7 @@ class TooltipHelp extends SkeletonMixin(FocusMixin(LitElement)) {
 		};
 		return html`
 			<button id="d2l-tooltip-help-text" class="${classMap(classes)}" type="button">
+				${this._renderIcon()}
 				${this.text}
 			</button>
 			${!this.skeleton ? html`

package/custom-elements.json

@@ -410,11 +410,6 @@
           "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
           "type": "'text'|'text-end'|''"
         },
-        {
-          "name": "icon",
-          "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
-          "type": "string"
-        },
         {
           "name": "text",
           "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
@@ -426,6 +421,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
         {
           "name": "expanded",
           "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
@@ -456,12 +456,6 @@
           "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
           "type": "'text'|'text-end'|''"
         },
-        {
-          "name": "icon",
-          "attribute": "icon",
-          "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
-          "type": "string"
-        },
         {
           "name": "text",
           "attribute": "text",
@@ -475,6 +469,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
         {
           "name": "expanded",
           "attribute": "expanded",
@@ -797,11 +797,6 @@
           "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
           "type": "'text'|'text-end'|''"
         },
-        {
-          "name": "icon",
-          "description": "Preset icon key (e.g. \"tier1:gear\")",
-          "type": "string"
-        },
         {
           "name": "text",
           "description": "ACCESSIBILITY: REQUIRED: Text for the button",
@@ -819,6 +814,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
         {
           "name": "expanded",
           "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
@@ -849,12 +849,6 @@
           "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
           "type": "'text'|'text-end'|''"
         },
-        {
-          "name": "icon",
-          "attribute": "icon",
-          "description": "Preset icon key (e.g. \"tier1:gear\")",
-          "type": "string"
-        },
         {
           "name": "text",
           "attribute": "text",
@@ -875,6 +869,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
         {
           "name": "expanded",
           "attribute": "expanded",
@@ -14068,6 +14068,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
@@ -14099,6 +14104,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",

package/package.json

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