@salesforcedevs/dx-components 1.3.119 → 1.3.124

package/src/modules/dx/checkbox/checkbox.css

@@ -41,6 +41,7 @@ input {
 
 .checkbox-error {
     opacity: 0;
+    display: none;
     margin-top: var(--dx-g-spacing-xs);
     user-select: none;
 }
@@ -57,6 +58,7 @@ input:disabled + .checkbox-label {
 
 .container.show-error .checkbox-error {
     opacity: 1;
+    display: block;
     user-select: auto;
 }
 

package/src/modules/dx/sidebar/sidebar.css

@@ -12,10 +12,6 @@ dx-empty-state {
     padding-bottom: var(--dx-g-spacing-md);
 }
 
-.sidebar-content-tree {
-    padding: var(--dx-g-spacing-xs);
-}
-
 .loading-skeleton {
     margin-top: var(--dx-g-spacing-md);
 }
@@ -37,6 +33,20 @@ dx-empty-state {
     display: none;
 }
 
+.header-toggle-icon dx-button {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
+
+    width: 10px;
+}
+
+.header-toggle-icon dx-button[aria-expanded="true"] {
+    --dx-c-button-secondary-color-hover: transparent;
+}
+
+.header-toggle-icon dx-button[aria-expanded="true"]:hover {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
+}
+
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -45,4 +55,8 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
+
+    .sidebar-content-tree {
+        padding: 0 var(--dx-g-spacing-sm);
+    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -7,12 +7,18 @@
         >
             <span class="header-title truncate">{headerMobile}</span>
             <div class="header-toggle-icon">
-                <dx-icon
+                <dx-button
                     aria-expanded={expanded}
-                    aria-label="icon"
-                    sprite="utility"
-                    symbol="chevrondown"
-                ></dx-icon>
+                    aria-label="toggle menu"
+                    type="button"
+                    variant="tertiary"
+                >
+                    <dx-icon
+                        sprite="utility"
+                        symbol={menuSymbol}
+                        color="blue-vibrant-20"
+                    ></dx-icon>
+                </dx-button>
             </div>
         </div>
 

package/src/modules/dx/sidebar/sidebar.ts

@@ -127,6 +127,10 @@ export default class Sidebar extends SidebarBase {
         );
     }
 
+    private get menuSymbol() {
+        return this.expanded ? "close" : "custom-rows";
+    }
+
     constructor() {
         super();
 
@@ -163,10 +167,23 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
     }
 
     private onToggleClick() {
         this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
     }
 
     private makeKey(): string {

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -10,3 +10,17 @@ dx-empty-state {
 
     padding-bottom: var(--dx-g-spacing-md);
 }
+
+.header-toggle-icon dx-button {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
+
+    width: 10px;
+}
+
+.header-toggle-icon dx-button[aria-expanded="true"] {
+    --dx-c-button-secondary-color-hover: transparent;
+}
+
+.header-toggle-icon dx-button[aria-expanded="true"]:hover {
+    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
+}

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -7,12 +7,18 @@
         >
             <span class="header-title truncate">{headerMobile}</span>
             <div class="header-toggle-icon">
-                <dx-icon
+                <dx-button
                     aria-expanded={expanded}
-                    aria-label="icon"
-                    sprite="utility"
-                    symbol="chevrondown"
-                ></dx-icon>
+                    aria-label="toggle menu"
+                    type="button"
+                    variant="tertiary"
+                >
+                    <dx-icon
+                        sprite="utility"
+                        symbol={menuSymbol}
+                        color="blue-vibrant-20"
+                    ></dx-icon>
+                </dx-button>
             </div>
         </div>
 

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -67,6 +67,10 @@ export default class Sidebar extends SidebarBase {
         );
     }
 
+    private get menuSymbol() {
+        return this.expanded ? "close" : "custom-rows";
+    }
+
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
@@ -93,10 +97,23 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
     }
 
     private onToggleClick() {
         this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
     }
 
     /*

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -44,17 +44,12 @@ dx-tree:not(:last-child) {
     color: var(--dx-g-blue-vibrant-30);
 }
 
-.header-toggle-icon dx-icon {
-    transition: var(--dx-g-transition-transform-2x);
-}
-
 .container.collapsed {
     width: var(--dx-g-spacing-xl);
 }
 
 .container.collapsed .header {
     padding-left: var(--dx-g-global-header-padding-horizontal);
-    padding-right: var(--dx-g-global-header-padding-horizontal);
 }
 
 .container {
@@ -96,13 +91,7 @@ dx-tree:not(:last-child) {
 }
 
 .container.container-mobile:not(.collapsed) .header {
-    background-color: #dddbda;
-}
-
-/* This class checks if an element with container class has an elemnt with container-mobile class and 
-must not contain any collapsed class and finally must have a mobile-header class (to which this css will be applied) */
-.container.container-mobile:not(.collapsed) .mobile-header {
-    background-color: var(--dx-g-gray-95);
+    background-color: var(--dx-g-gray-90);
 }
 
 .container.container-mobile .header-title {
@@ -120,10 +109,6 @@ must not contain any collapsed class and finally must have a mobile-header class
     margin-bottom: 0;
 }
 
-.container.container-mobile.collapsed .header-toggle-icon dx-icon {
-    transform: rotateZ(-90deg);
-}
-
 .container.container-border-active {
     --border-color: var(--dx-c-sidebar-button-color);
 }
@@ -141,3 +126,10 @@ must not contain any collapsed class and finally must have a mobile-header class
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+@media screen and (max-width: 768px) {
+    .padding-horizontal {
+        padding-left: var(--dx-g-spacing-lg);
+        padding-right: var(--dx-g-spacing-md);
+    }
+}