@brightspace-ui/core 2.144.0 → 2.145.0

package/components/button/README.md

@@ -101,6 +101,24 @@ To make your `d2l-button-subtle` accessible, use the following properties when a
 | `aria-haspopup` | [Indicate clicking the button opens a menu](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-haspopup). Example: [d2l-dropdown](https://github.com/BrightspaceUI/core/blob/main/components/dropdown/dropdown-opener-mixin.js#L46). |
 | `description` | Use when text on button does not provide enough context. |
 
+### Subtle Button with Custom Icon
+
+<!-- docs: demo code  -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button-subtle.js';
+  import '@brightspace-ui/core/components/icons/icon-custom.js';
+</script>
+<d2l-button-subtle text="Subtle 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-subtle>
+```
+
 ## Icon Button [d2l-button-icon]
 
 The `d2l-button-icon` element can be used just like the native `button`, for instances where only an icon is displayed.

package/components/button/button-subtle.js

@@ -1,18 +1,19 @@
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } 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 { RtlMixin } from '../../mixins/rtl/rtl-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(RtlMixin(LitElement)) {
+class ButtonSubtle extends ButtonMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -50,7 +51,8 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 			 * REQUIRED: Text for the button
 			 * @type {string}
 			 */
-			text: { type: String, reflect: true }
+			text: { type: String, reflect: true },
+			_hasCustomIcon: { state: true }
 		};
 	}
 
@@ -70,36 +72,31 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 					background-color: transparent;
 					border-color: transparent;
 					font-family: inherit;
-					padding: 0 var(--d2l-button-subtle-padding-inline-end) 0 var(--d2l-button-subtle-padding-inline-start);
+					padding-block-end: 0;
+					padding-block-start: 0;
+					padding-inline-end: var(--d2l-button-subtle-padding-inline-end);
+					padding-inline-start: var(--d2l-button-subtle-padding-inline-start);
 					position: relative;
 				}
 
-				:host([dir="rtl"]) button {
-					padding: 0 var(--d2l-button-subtle-padding-inline-start) 0 var(--d2l-button-subtle-padding-inline-end);
-				}
-
 				:host([slim]) button {
 					--d2l-button-subtle-padding-inline-start: 0.5rem;
 					--d2l-button-subtle-padding-inline-end: 0.5rem;
 					min-height: 1.5rem;
 				}
 
-				:host([slim][icon]) button {
+				:host([slim]) button.d2l-button-subtle-has-icon {
 					--d2l-button-subtle-padding-inline-start: 0.4rem;
 					--d2l-button-subtle-padding-inline-end: 0.5rem;
 				}
 
-				:host([slim][icon][icon-right]) button {
+				:host([slim][icon-right]) button.d2l-button-subtle-has-icon {
 					--d2l-button-subtle-padding-inline-start: 0.5rem;
 					--d2l-button-subtle-padding-inline-end: 0.4rem;
 				}
 
 				:host([h-align="text"]) button {
-					left: calc(var(--d2l-button-subtle-padding-inline-start) * -1);
-				}
-				:host([dir="rtl"][h-align="text"]) button {
-					left: 0;
-					right: calc(var(--d2l-button-subtle-padding-inline-start) * -1);
+					inset-inline-start: calc(var(--d2l-button-subtle-padding-inline-start) * -1);
 				}
 
 				/* Firefox includes a hidden border which messes up button dimensions */
@@ -125,20 +122,21 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 				:host([active]:not([disabled])) button .d2l-button-subtle-content {
 					color: var(--d2l-color-celestine-minus-1);
 				}
-				:host([icon]) .d2l-button-subtle-content,
-				:host([dir="rtl"][icon][icon-right]) .d2l-button-subtle-content {
-					padding-left: 1.2rem;
-					padding-right: 0;
+				.d2l-button-subtle-has-icon .d2l-button-subtle-content {
+					padding-inline: 1.2rem 0;
 				}
-				:host([dir="rtl"][icon]) .d2l-button-subtle-content,
-				:host([icon][icon-right]) .d2l-button-subtle-content {
-					padding-left: 0;
-					padding-right: 1.2rem;
+				:host([icon-right]) .d2l-button-subtle-has-icon .d2l-button-subtle-content {
+					padding-inline: 0 1.2rem;
 				}
 
-				d2l-icon.d2l-button-subtle-icon {
-					color: var(--d2l-color-celestine);
+				slot[name="icon"]::slotted(*) {
 					display: none;
+				}
+
+				d2l-icon.d2l-button-subtle-icon,
+				slot[name="icon"]::slotted(d2l-icon-custom) {
+					color: var(--d2l-color-celestine);
+					display: inline-block;
 					height: 0.9rem;
 					position: absolute;
 					top: 50%;
@@ -148,19 +146,16 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 
 				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 {
+				:host([active]:not([disabled])) button d2l-icon.d2l-button-subtle-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]) d2l-icon.d2l-button-subtle-icon {
-					display: inline-block;
-				}
-				:host([icon][icon-right]) d2l-icon.d2l-button-subtle-icon {
-					right: var(--d2l-button-subtle-padding-inline-end);
-				}
-				:host([dir="rtl"][icon][icon-right]) d2l-icon.d2l-button-subtle-icon {
-					left: var(--d2l-button-subtle-padding-inline-end);
-					right: auto;
+				:host([icon-right]) .d2l-button-subtle-has-icon d2l-icon.d2l-button-subtle-icon,
+				:host([icon-right]) slot[name="icon"]::slotted(d2l-icon-custom) {
+					inset-inline-end: var(--d2l-button-subtle-padding-inline-end);
 				}
 
 				:host([disabled]) button {
@@ -176,15 +171,17 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 		this.iconRight = false;
 		this.slim = false;
 
-		/** @internal */
 		this._buttonId = getUniqueId();
-		/** @internal */
 		this._describedById = getUniqueId();
+		this._hasCustomIcon = false;
 	}
 
 	render() {
-		const icon = this.icon ?
-			html`<d2l-icon icon="${this.icon}" class="d2l-button-subtle-icon"></d2l-icon>` : '';
+		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-label-text': true
+		};
 		return html`
 			<button
 				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
@@ -193,7 +190,7 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
 				aria-label="${ifDefined(this.ariaLabel)}"
 				?autofocus="${this.autofocus}"
-				class="d2l-label-text"
+				class="${classMap(buttonClasses)}"
 				?disabled="${this.disabled && !this.disabledTooltip}"
 				form="${ifDefined(this.form)}"
 				formaction="${ifDefined(this.formaction)}"
@@ -204,7 +201,7 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 				id="${this._buttonId}"
 				name="${ifDefined(this.name)}"
 				type="${this._getType()}">
-				${icon}
+				<slot name="icon" @slotchange="${this._handleIconSlotChange}">${icon}</slot>
 				<span class="d2l-button-subtle-content">${this.text}</span>
 				<slot></slot>
 			</button>
@@ -213,6 +210,13 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(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/button/demo/button-subtle.html

@@ -74,6 +74,38 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Subtle Button with Slot Content</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-subtle text="Subtle Button">Slot Content</d2l-button-subtle>
+					<d2l-button-subtle slim text="Slim Subtle Button">Slim Slot Content</d2l-button-subtle>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Subtle Button with Custom Icon</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-subtle text="Subtle 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-subtle>
+					<d2l-button-subtle slim text="Slim Subtle 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-subtle>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 		<script>

package/custom-elements.json

@@ -652,6 +652,10 @@
         {
           "name": "",
           "description": "Default content placed inside of the button"
+        },
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
         }
       ]
     },

package/package.json

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