@brightspace-ui/core 2.143.1 → 2.144.0

package/components/button/README.md

@@ -139,6 +139,24 @@ To make your `d2l-button-icon` accessible, use the following properties when app
 | `aria-label` | Acts as a primary label. If `text` AND `aria-label` are provided, `aria-label` is used as the primary label, `text` is used as the tooltip. |
 | `description` | Use when text on button does not provide enough context. |
 
+### Icon Button with Custom Icon
+
+<!-- docs: demo code  -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button-icon.js';
+  import '@brightspace-ui/core/components/icons/icon-custom.js';
+</script>
+<d2l-button-icon text="Custom Icon Button">
+  <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-button-icon>
+```
+
 ## Floating Buttons [d2l-floating-buttons]
 
 See [floating buttons](https://github.com/BrightspaceUI/core/tree/main/components/button/floating-buttons.md).

package/components/button/button-icon.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } 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';
@@ -13,6 +13,7 @@ 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 ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(LitElement)))) {
 
@@ -117,7 +118,15 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 					box-shadow: var(--d2l-button-icon-focus-box-shadow);
 				}
 
-				.d2l-button-icon {
+				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) {
 					height: 0.9rem;
 					width: 0.9rem;
 				}
@@ -155,6 +164,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 	}
 
 	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)}"
@@ -174,7 +184,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				name="${ifDefined(this.name)}"
 				title="${ifDefined(this.text)}"
 				type="${this._getType()}">
-				<d2l-icon icon="${ifDefined(this.icon)}" class="d2l-button-icon"></d2l-icon>
+				<slot name="icon">${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>` : ''}

package/components/button/demo/button-icon.html

@@ -6,6 +6,7 @@
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
 			import '../../demo/demo-page.js';
+			import '../../icons/icon-custom.js';
 			import '../button-icon.js';
 		</script>
 		<style>
@@ -137,6 +138,21 @@
 					<d2l-button-icon icon="tier1:search" text="Search" class="custom"></d2l-button-icon>
 				</template>
 			</d2l-demo-snippet>
+
+			<h2>Icon Button with Custom Icon</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-icon text="Custom Icon Button">
+						<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-button-icon>
+				</template>
+			</d2l-demo-snippet>
 		</d2l-demo-page>
 
 		<script>

package/custom-elements.json

@@ -436,6 +436,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "slots": [
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
+        }
       ]
     },
     {

package/package.json

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