@salesforcedevs/dx-components 1.3.335 → 1.3.337

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.335",
+    "version": "1.3.337",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "2862c96ace8525a40000901f23ef6ede22b269e9"
+    "gitHead": "604c4f8536df2795687fa98f1eb2cd0c81bc4edc"
 }

package/src/modules/dx/alert/alert.css

@@ -95,11 +95,6 @@ dx-button {
     color: var(--dx-g-blue-vibrant-50);
 }
 
-.dismissible-icon {
-    margin-left: auto;
-    cursor: pointer;
-}
-
 /* Small Devices */
 @media screen and (max-width: 480px) {
     .alert-container {

package/src/modules/dx/alert/alert.html

@@ -10,21 +10,22 @@
             ></dx-icon>
             <p class="alert-title dx-text-body-3">{alertTitle}</p>
             <dx-button
-                if:true={hideable}
+                lwc:if={hideable}
                 variant="inline"
                 onclick={onShowHide}
                 aria-label={hideBodyText}
             >
                 {hideBodyText}
             </dx-button>
-            <dx-icon
-                class="dismissible-icon"
+            <dx-button
+                lwc:if={dismissible}
+                aria-label="Dismiss"
+                icon-color="status-icon-color"
+                icon-size="large"
+                icon-symbol="close"
                 onclick={onDismiss}
-                if:true={dismissible}
-                symbol="close"
-                size="large"
-                color="status-icon-color"
-            ></dx-icon>
+                variant="icon-only"
+            ></dx-button>
         </div>
         <!--
             NOTE: Here we are rendering mark up using lwc:dom & innerHTML

package/src/modules/dx/button/button.css

@@ -54,7 +54,8 @@
 }
 
 .button.variant_inline dx-icon,
-.button.variant_inline-inherit dx-icon {
+.button.variant_inline-inherit dx-icon,
+.button.variant_icon-only dx-icon {
     display: inline-block;
 }
 
@@ -196,16 +197,26 @@
     pointer-events: none;
 }
 
-/* custom */
+/* custom and icon-only */
+.button.variant_icon-only {
+    padding: 0;
+    height: unset;
+    width: unset;
+}
+
 .button.variant_custom,
-.button.variant_custom:hover.state-disabled {
+.button.variant_icon-only,
+.button.variant_custom:hover.state-disabled,
+.button.variant_icon-only:hover.state-disabled {
     color: var(--dx-c-button-custom-color);
     background: var(--dx-c-button-custom-background);
     border: 1px solid var(--dx-c-button-custom-border);
 }
 
 .button.variant_custom:hover,
-:host([aria-expanded="true"]) .button.variant_custom {
+.button.variant_icon-only:hover,
+:host([aria-expanded="true"]) .button.variant_custom,
+:host([aria-expanded="true"]) .button.variant_icon-only {
     color: var(--dx-c-button-custom-color-hover);
     background: var(--dx-c-button-custom-background-hover);
     border-color: var(--dx-c-button-custom-border-hover);

package/src/modules/dx/button/button.html

@@ -12,6 +12,7 @@
         </span>
         <dx-icon
             if:true={showIcon}
+            color={iconColor}
             sprite={iconSprite}
             size={iconSize}
             symbol={iconSymbol}
@@ -34,6 +35,7 @@
         </span>
         <dx-icon
             if:true={showIcon}
+            color={iconColor}
             sprite={iconSprite}
             size={iconSize}
             symbol={iconSymbol}

package/src/modules/dx/button/button.ts

@@ -7,14 +7,14 @@ import {
     ButtonSize,
     IconSprite,
     IconSize,
-    IconSymbol,
-    LightningSlotElement
+    IconSymbol
 } from "typings/custom";
 
 export default class Button extends LightningElement {
     private _didSetFormAttribute = false;
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
+    @api iconColor?: string;
     @api iconSize?: IconSize = "small";
     @api iconSprite?: IconSprite = "utility";
     @api iconSymbol?: IconSymbol;
@@ -51,17 +51,22 @@ export default class Button extends LightningElement {
     }
 
     private get className(): string {
+        const isIconOnly = this.variant === "icon-only";
+        const iconPositionClassName = `icon-${this.iconPosition || "left"}`;
+        const inlineTextColorClassName = `${this.inlineTextColor}-text`;
         return cx(
             "button",
-            this.variant === "inline" && `${this.inlineTextColor}-text`,
-            this.disabled && "state-disabled",
-            `variant_${this.variant}`,
-            this.loading && "state-loading",
-            `size-${this.size}`,
-            !!this.iconSymbol && "style-icon",
-            this.isSlotEmpty && !this.loading && "slot-empty",
             `font-${this.font}`,
-            this.iconPosition === "right" ? "icon-right" : "icon-left"
+            `size-${this.size}`,
+            `variant_${this.variant}`,
+            {
+                "slot-empty": !isIconOnly && !this.loading && this.isSlotEmpty,
+                "state-disabled": this.disabled,
+                "state-loading": this.loading,
+                "style-icon": !!this.iconSymbol,
+                [iconPositionClassName]: !isIconOnly,
+                [inlineTextColorClassName]: this.variant === "inline"
+            }
         );
     }
 
@@ -78,8 +83,8 @@ export default class Button extends LightningElement {
         }
     }
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
+    private onSlotChange(e: Event) {
+        const slot = e.target as HTMLSlotElement;
         this.isSlotEmpty = slot.assignedNodes().length === 0;
     }
 }

package/src/modules/dx/footer/footer.css

@@ -210,6 +210,7 @@ footer.signup-variant-no-signup {
 
 .terms a {
     color: var(--dx-g-blue-vibrant-70);
+    text-decoration: underline;
 }
 
 .terms > span,