@salesforcedevs/dx-components 1.3.104-alpha06 → 1.3.104-alpha08

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/footer/footer.css +1 -1
  3. package/src/modules/dx/scrollManager/scrollManager.ts +17 -5
  4. package/src/modules/dxHelpers/commonHeader/commonHeader.css +7 -3
  5. package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +6 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.104-alpha06",
3
+ "version": "1.3.104-alpha08",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/dx/footer/footer.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @import "dxHelpers/text";
3
3
 
4
4
  .content-container {
5
- padding: 0 var(--dx-g-header-padding-horizontal);
5
+ padding: 0 var(--dx-g-global-header-padding-horizontal);
6
6
  }
7
7
 
8
8
  a {
package/src/modules/dx/scrollManager/scrollManager.ts CHANGED
@@ -4,6 +4,8 @@ import { track } from "dxUtils/analytics";
4
4
 
5
5
  const RESTORE_SCROLL_EVENT_NAME = "restore-scroll";
6
6
  const LOAD_TIME_SCROLL_RESTORE_DELAY = 750;
7
+ const REDUNDANT_INSTANCE_ERROR_MESSAGE =
8
+ "Multiple <dx-scroll-manager>s detected, this should never be the case.";
7
9
 
8
10
  declare module globalThis {
9
11
  let singletonScrollManagerRendered: boolean;
@@ -81,9 +83,7 @@ export default class ScrollManager extends LightningElement {
81
83
  }, LOAD_TIME_SCROLL_RESTORE_DELAY);
82
84
  }
83
85
  } else {
84
- console.error(
85
- "Multiple <dx-scroll-manager>s detected, this should never be the case."
86
- );
86
+ console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
87
87
  }
88
88
  }
89
89
 
@@ -93,9 +93,20 @@ export default class ScrollManager extends LightningElement {
93
93
  window.addEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
94
94
 
95
95
  document.body.addEventListener("scroll", this.manualScrollListener);
96
+ window.addEventListener("scroll", this.onWindowScroll);
96
97
  } else {
97
- console.error(
98
- "Multiple <dx-scroll-manager>s detected, this should never be the case."
98
+ console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
99
+ }
100
+ }
101
+
102
+ onWindowScroll() {
103
+ const html = document.querySelector("html");
104
+ if (html) {
105
+ html.setAttribute(
106
+ "style",
107
+ `--dx-g-global-header-nav-row-count: ${
108
+ html.scrollTop >= 72 ? 1 : 2
109
+ }`
99
110
  );
100
111
  }
101
112
  }
@@ -177,5 +188,6 @@ export default class ScrollManager extends LightningElement {
177
188
 
178
189
  disconnectedCallback(): void {
179
190
  window.removeEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
191
+ window.removeEventListener("scroll", this.onWindowScroll);
180
192
  }
181
193
  }
package/src/modules/dxHelpers/commonHeader/commonHeader.css CHANGED
@@ -36,6 +36,10 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
36
36
 
37
37
  .subtitle {
38
38
  color: var(--dx-g-blue-vibrant-20);
39
+ display: inline-block;
40
+ white-space: nowrap;
41
+ overflow: hidden;
42
+ text-overflow: ellipsis;
39
43
  }
40
44
 
41
45
  /* First row */
@@ -43,7 +47,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
43
47
  .header_l1 {
44
48
  height: var(--dx-g-spacing-3xl);
45
49
  background: var(--dx-g-brand-current-color-background-2);
46
- padding: 0 var(--dx-g-header-padding-horizontal);
50
+ padding: 0 var(--dx-g-global-header-padding-horizontal);
47
51
  position: relative;
48
52
  }
49
53
 
@@ -59,7 +63,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
59
63
 
60
64
  .header_l2 {
61
65
  background: var(--dx-g-brand-current-color-background);
62
- padding: var(--dx-g-spacing-lg) var(--dx-g-header-padding-horizontal);
66
+ padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
63
67
  }
64
68
 
65
69
  .header_l2_group {
@@ -120,7 +124,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
120
124
 
121
125
  @media (max-width: 768px) {
122
126
  .header_l2_group-nav {
123
- padding-left: calc(var(--dx-g-header-padding-horizontal) - 4px);
127
+ padding-left: calc(var(--dx-g-global-header-padding-horizontal) - 4px);
124
128
  }
125
129
 
126
130
  .header_l2_group-nav_overflow {
package/src/modules/dxHelpers/commonSidebar/commonSidebar.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --dx-c-sidebar-button-color-hover: white;
10
10
  --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
11
11
  --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
12
- --dx-c-sidebar-left-padding: var(--dx-g-header-padding-horizontal);
12
+ --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
13
13
  --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
14
14
  }
15
15
 
@@ -52,6 +52,11 @@ dx-tree:not(:last-child) {
52
52
  width: var(--dx-g-spacing-xl);
53
53
  }
54
54
 
55
+ .container.collapsed .header {
56
+ padding-left: var(--dx-g-global-header-padding-horizontal);
57
+ padding-right: var(--dx-g-global-header-padding-horizontal);
58
+ }
59
+
55
60
  .container {
56
61
  background-color: var(--dx-g-gray-95);
57
62
  display: flex;