@salesforcedevs/dx-components 1.3.204-alpha.1 → 1.3.204-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.204-alpha.1",
+    "version": "1.3.204-alpha.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/emptyState/emptyState.css

@@ -5,13 +5,6 @@
     --dx-c-empty-state-background: var(--dx-g-gray-95);
     --dx-c-empty-state-background-alt: var(--dx-g-indigo-vibrant-90);
     --dx-c-empty-state-image-width: 600px;
-    --dx-c-container-alt-padding: var(--dx-g-spacing-4xl)
-        var(--dx-g-spacing-3xl);
-    --dx-c-font-title-alt-size: var(--dx-g-text-2xl);
-    --dx-c-font-title-alt-margin-top: 42px;
-    --dx-c-font-body-alt-size: var(--dx-g-text-sm);
-    --dx-c-font-body-alt-margin-top: var(--dx-g-spacing-lg);
-    --dx-c-font-suggestion-alt-size: var(--dx-g-text-xs);
 
     width: 100%;
 }
@@ -29,7 +22,7 @@
 
 .container-alt {
     background: var(--dx-c-empty-state-background-alt);
-    padding: var(--dx-c-container-alt-padding);
+    padding: var(--dx-g-spacing-4xl) var(--dx-g-spacing-3xl);
     border-radius: var(--dx-g-spacing-md);
     display: flex;
     flex-direction: column;
@@ -88,18 +81,22 @@
     top: 40%;
 }
 
+.dx-text-display-4 {
+    line-height: var(--dx-g-spacing-2xl);
+}
+
 .title {
     font-size: var(--dx-g-text-2xl);
 }
 
 .title-alt {
-    font-size: var(--dx-c-font-title-alt-size);
-    margin-top: var(--dx-c-font-title-alt-margin-top);
+    font-size: var(--dx-g-text-2xl);
+    margin-top: 42px;
 }
 
 .body {
-    font-size: var(--dx-c-font-body-alt-size);
-    margin-top: var(--dx-c-font-body-alt-margin-top);
+    font-size: var(--dx-g-text-sm);
+    margin-top: var(--dx-g-spacing-lg);
 }
 
 ul {
@@ -111,15 +108,11 @@ ul {
 }
 
 .suggestion {
-    font-size: var(--dx-c-font-suggestion-alt-size);
+    font-size: var(--dx-g-text-xs);
     font-family: var(--dx-g-font-sans);
     color: var(--dx-g-blue-vibrant-20);
 }
 
-.suggestion:first-of-type {
-    margin-top: var(--dx-g-spacing-sm);
-}
-
 .suggestion:not(:first-of-type) {
     margin-top: var(--dx-g-spacing-xs);
 }

package/src/modules/dx/searchResults/searchResults.css

@@ -295,15 +295,14 @@ a.CoveoResultLink,
 
 .dx-search-header {
     padding: var(--dx-g-spacing-xl);
-    background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg"),
+    background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
+            no-repeat 100% 0,
         linear-gradient(
             77deg,
             var(--dx-g-indigo-vibrant-30) 40.1%,
             var(--dx-g-indigo-vibrant-40) 99.07%
         );
-    background-repeat: no-repeat;
-    background-position: right;
-    background-size: auto 100%;
+    background-size: auto;
     color: white;
 }
 
@@ -335,6 +334,18 @@ a.CoveoResultLink,
     margin-top: var(--dx-g-spacing-md);
 }
 
+@media (min-width: 928px) and (max-width: 1024px) {
+    .dx-search-header {
+        background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
+                no-repeat 200% 0,
+            linear-gradient(
+                77deg,
+                var(--dx-g-indigo-vibrant-30) 40.1%,
+                var(--dx-g-indigo-vibrant-40) 99.07%
+            );
+    }
+}
+
 @media (min-width: 768px) {
     .dx-search-header {
         padding: var(--dx-g-spacing-4xl);
@@ -351,6 +362,30 @@ a.CoveoResultLink,
     }
 }
 
+@media (min-width: 768px) and (max-width: 928px) {
+    .dx-search-header {
+        background: url("https://a.sfdcstatic.com/developer-website/images/binary-trees.svg")
+                no-repeat 90% 50%,
+            linear-gradient(
+                77deg,
+                var(--dx-g-indigo-vibrant-30) 40.1%,
+                var(--dx-g-indigo-vibrant-40) 99.07%
+            );
+    }
+}
+
+@media (max-width: 768px) {
+    .dx-search-header {
+        background: url("https://a.sfdcstatic.com/developer-website/images/binary.svg")
+                no-repeat 90% 50%,
+            linear-gradient(
+                77deg,
+                var(--dx-g-indigo-vibrant-30) 40.1%,
+                var(--dx-g-indigo-vibrant-40) 99.07%
+            );
+    }
+}
+
 .dx-facet-column-header {
     display: flex;
     align-items: center;

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

@@ -1,14 +1,8 @@
 @import "dxHelpers/commonSidebar";
 
 dx-empty-state {
-    --dx-c-empty-state-background-alt: var(--sds-g-gray-1);
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
     --dx-c-empty-state-image-width: 400px;
-    --dx-c-font-title-alt-size: 18px;
-    --dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
-    --dx-c-font-body-alt-size: var(--dx-g-text-xs);
-    --dx-c-font-body-alt-margin-top: 0;
-    --dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
-    --dx-c-font-suggestion-alt-size: 10px;
 
     display: none;
 }

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

@@ -75,11 +75,8 @@
                 ></dx-sidebar-search-result>
             </template>
             <dx-empty-state
-                variant="alt"
                 class="padding-horizontal"
                 title="No Results"
-                body={emptyStateBody}
-                suggestions={emptyStateSuggestions}
                 size="small"
             ></dx-empty-state>
         </div>

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

@@ -95,17 +95,6 @@ export default class Sidebar extends SidebarBase {
         );
     }
 
-    private get emptyStateBody(): string {
-        return "Search Tips:";
-    }
-
-    private get emptyStateSuggestions(): string {
-        return JSON.stringify([
-            "Please consider misspellings",
-            "Try different search keywords"
-        ]);
-    }
-
     private get isNearBottomOfSearchResults(): boolean {
         const scrollArea = this.template.querySelector(
             ".sidebar-content-search"

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

@@ -5,14 +5,8 @@
 }
 
 dx-empty-state {
-    --dx-c-empty-state-background-alt: var(--sds-g-gray-1);
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
     --dx-c-empty-state-image-width: 400px;
-    --dx-c-font-title-alt-size: 18px;
-    --dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
-    --dx-c-font-body-alt-size: var(--dx-g-text-xs);
-    --dx-c-font-body-alt-margin-top: 0;
-    --dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
-    --dx-c-font-suggestion-alt-size: 10px;
 
     padding-bottom: var(--dx-g-spacing-md);
 }

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

@@ -62,12 +62,9 @@
                 ></dx-tree>
             </div>
             <dx-empty-state
-                variant="alt"
                 class="padding-horizontal"
                 size="small"
                 title="No Results"
-                body={emptyStateBody}
-                suggestions={emptyStateSuggestions}
                 if:false={anyResultMatch}
             ></dx-empty-state>
         </template>

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

@@ -71,17 +71,6 @@ export default class Sidebar extends SidebarBase {
         return this.expanded ? "close" : "custom-rows";
     }
 
-    private get emptyStateBody(): string {
-        return "Search Tips:";
-    }
-
-    private get emptyStateSuggestions(): string {
-        return JSON.stringify([
-            "Please consider misspellings",
-            "Try different search keywords"
-        ]);
-    }
-
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`