@salesforcedevs/dx-components 1.3.241-dh1-alpha → 1.3.241-ux-alpha1

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 (14) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/button/button.html +2 -2
  3. package/src/modules/dx/button/button.ts +1 -1
  4. package/src/modules/dx/headerNav/headerNav.css +0 -9
  5. package/src/modules/dx/sidebar/sidebar.css +0 -1
  6. package/src/modules/dx/sidebar/sidebar.html +14 -7
  7. package/src/modules/dx/sidebarOld/sidebarOld.html +9 -6
  8. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css +11 -20
  9. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html +10 -16
  10. package/src/modules/dx/tab/tab.css +4 -38
  11. package/src/modules/dx/treeTile/treeTile.css +1 -1
  12. package/src/modules/dxHelpers/commonHeader/commonHeader.css +2 -5
  13. package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +14 -13
  14. package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +15 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.241-dh1-alpha",
3
+ "version": "1.3.241-ux-alpha1",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/dx/button/button.html CHANGED
@@ -7,7 +7,7 @@
7
7
  aria-label={ariaLabel}
8
8
  part="container"
9
9
  >
10
- <span if:false={loading} part="content">
10
+ <span if:false={loading}>
11
11
  <slot onslotchange={onSlotChange}></slot>
12
12
  </span>
13
13
  <dx-icon
@@ -29,7 +29,7 @@
29
29
  aria-label={ariaLabel}
30
30
  part="container"
31
31
  >
32
- <span if:false={loading} part="content">
32
+ <span if:false={loading}>
33
33
  <slot onslotchange={onSlotChange}></slot>
34
34
  </span>
35
35
  <dx-icon
package/src/modules/dx/button/button.ts CHANGED
@@ -80,6 +80,6 @@ export default class Button extends LightningElement {
80
80
 
81
81
  private onSlotChange(e: LightningSlotElement) {
82
82
  const slot = e.target;
83
- this.isSlotEmpty = slot.assignedNodes().length === 0;
83
+ this.isSlotEmpty = slot.assignedElements().length !== 0;
84
84
  }
85
85
  }
package/src/modules/dx/headerNav/headerNav.css CHANGED
@@ -10,26 +10,17 @@ nav {
10
10
 
11
11
  .nav-list {
12
12
  display: flex;
13
- margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
14
13
  }
15
14
 
16
15
  .nav-list li {
17
16
  position: relative;
18
17
  }
19
18
 
20
- .nav-list li:not(:last-child) {
21
- margin-right: var(--dx-g-spacing-md);
22
- }
23
-
24
19
  .nav-list-item-nav-menu {
25
20
  display: none;
26
21
  }
27
22
 
28
23
  @media (max-width: 768px) {
29
- .nav-list {
30
- margin-top: 0;
31
- }
32
-
33
24
  .nav-list-item-nav-menu {
34
25
  display: flex;
35
26
  }
package/src/modules/dx/sidebar/sidebar.css CHANGED
@@ -57,7 +57,6 @@ dx-empty-state {
57
57
  --dx-g-text-body-color: var(--sds-g-gray-14);
58
58
 
59
59
  margin-bottom: var(--dx-g-spacing-sm);
60
- padding-top: var(--dx-g-spacing-smd);
61
60
  font-weight: var(--dx-g-font-bold);
62
61
  }
63
62
 
package/src/modules/dx/sidebar/sidebar.html CHANGED
@@ -16,17 +16,25 @@
16
16
  <dx-icon
17
17
  sprite="utility"
18
18
  symbol={menuSymbol}
19
- color="blue-vibrant-50"
20
- size="medium"
19
+ color="blue-vibrant-20"
21
20
  ></dx-icon>
22
21
  </dx-button>
23
22
  </div>
24
23
  </div>
25
- <div class="sidebar-header" show-shadow={showBoxShadow}>
26
- <div class="header padding-horizontal" if:false={mobile}>
24
+
25
+ <div
26
+ class="sidebar-header padding-horizontal"
27
+ show-shadow={showBoxShadow}
28
+ >
29
+ <div class="header" if:false={mobile}>
27
30
  <h2 class="dx-text-display-6 header-title">{header}</h2>
31
+ <slot name="header"></slot>
32
+ </div>
33
+ <div class="mobile-header" if:true={mobile}>
34
+ <h2 class="dx-text-display-6">{header}</h2>
35
+ <slot name="header"></slot>
28
36
  </div>
29
- <div class="search padding-horizontal">
37
+ <div class="search">
30
38
  <dx-sidebar-search
31
39
  onchange={onSearchChange}
32
40
  onloading={onSearchLoading}
@@ -36,9 +44,8 @@
36
44
  coveo-advanced-query-config={coveoAdvancedQueryConfig}
37
45
  ></dx-sidebar-search>
38
46
  </div>
39
- <slot name="version-picker"></slot>
40
47
  <h2
41
- class="results-heading dx-text-body-3 padding-horizontal"
48
+ class="results-heading dx-text-body-3"
42
49
  if:true={showResultsHeading}
43
50
  >
44
51
  Results
package/src/modules/dx/sidebarOld/sidebarOld.html CHANGED
@@ -16,19 +16,23 @@
16
16
  <dx-icon
17
17
  sprite="utility"
18
18
  symbol={menuSymbol}
19
- color="blue-vibrant-50"
20
- size="medium"
19
+ color="blue-vibrant-20"
21
20
  ></dx-icon>
22
21
  </dx-button>
23
22
  </div>
24
23
  </div>
25
24
 
26
25
  <template if:true={expanded}>
27
- <div class="sidebar-header" show-shadow={showBoxShadow}>
28
- <div class="header padding-horizontal" if:false={mobile}>
26
+ <div class="padding-horizontal" show-shadow={showBoxShadow}>
27
+ <div class="header" if:false={mobile}>
29
28
  <h2 class="dx-text-display-6 header-title">{header}</h2>
29
+ <slot name="header"></slot>
30
30
  </div>
31
- <div class="search padding-horizontal">
31
+ <div class="mobile-header" if:true={mobile}>
32
+ <h2 class="dx-text-display-6">{header}</h2>
33
+ <slot name="header"></slot>
34
+ </div>
35
+ <div class="search">
32
36
  <dx-input
33
37
  class="search-box"
34
38
  type="search"
@@ -42,7 +46,6 @@
42
46
  shortcut-key="j"
43
47
  ></dx-input>
44
48
  </div>
45
- <slot name="version-picker"></slot>
46
49
  </div>
47
50
  <div
48
51
  class={sidebarContentClass}
package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css CHANGED
@@ -9,27 +9,13 @@ a {
9
9
 
10
10
  .sidebar-item {
11
11
  padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
12
- var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
12
+ var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
13
13
  }
14
14
 
15
- .sidebar-item:not(.sidebar-item-selected):focus-visible {
16
- padding: var(--dx-g-spacing-smd) 0;
17
- margin: 0 var(--dx-g-spacing-lg) 0
18
- var(--dx-g-global-header-padding-horizontal);
19
- outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
20
- border-radius: var(--dx-g-spacing-2xs);
21
- }
22
-
23
- .sidebar-item-selected:focus-visible {
24
- padding: 0 var(--dx-g-spacing-lg) 0
25
- var(--dx-g-global-header-padding-horizontal);
26
- outline: none;
27
-
28
- .search-result {
29
- outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
30
- border-radius: var(--dx-g-spacing-2xs);
31
- padding: var(--dx-g-spacing-smd) 0;
32
- }
15
+ .sidebar-item:focus-visible {
16
+ margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
17
+ outline: 2px solid var(--dx-g-blue-vibrant-40);
18
+ border-radius: 2px;
33
19
  }
34
20
 
35
21
  .search-text {
@@ -47,7 +33,6 @@ a {
47
33
  --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
48
34
 
49
35
  font-weight: var(--dx-g-font-normal);
50
- display: block;
51
36
  }
52
37
 
53
38
  .title {
@@ -65,3 +50,9 @@ a {
65
50
  a > *:not(:last-child) {
66
51
  margin-bottom: var(--dx-g-spacing-xs);
67
52
  }
53
+
54
+ @media (max-width: 768px) {
55
+ .sidebar-item {
56
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
57
+ }
58
+ }
package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html CHANGED
@@ -1,20 +1,14 @@
1
1
  <template>
2
2
  <a class={className} href={href} onclick={onClick}>
3
- <div class="search-result">
4
- <span class="title search-text">
5
- <template for:each={titleChunks} for:item="chunk">
6
- <span class={chunk.class} key={chunk.id}>
7
- {chunk.value}
8
- </span>
9
- </template>
10
- </span>
11
- <span class="description dx-text-body-3 sidebar-item-truncate-text">
12
- <template for:each={descriptionChunks} for:item="chunk">
13
- <span class={chunk.class} key={chunk.id}>
14
- {chunk.value}
15
- </span>
16
- </template>
17
- </span>
18
- </div>
3
+ <span class="title search-text">
4
+ <template for:each={titleChunks} for:item="chunk">
5
+ <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
6
+ </template>
7
+ </span>
8
+ <span class="description dx-text-body-3 sidebar-item-truncate-text">
9
+ <template for:each={descriptionChunks} for:item="chunk">
10
+ <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
11
+ </template>
12
+ </span>
19
13
  </a>
20
14
  </template>
package/src/modules/dx/tab/tab.css CHANGED
@@ -11,31 +11,13 @@ a {
11
11
  );
12
12
 
13
13
  position: relative;
14
- height: var(--dx-g-spacing-3xl);
15
- border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
14
+ height: calc(var(--dx-g-spacing-3xl) - 4px);
16
15
  }
17
16
 
18
17
  .nav-list-item_default {
19
- padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
18
+ padding: calc(var(--dx-g-spacing-sm) + 2px) var(--dx-g-spacing-md);
20
19
  justify-content: center;
21
20
  display: flex;
22
- font-family: var(--dx-g-font-sans);
23
- font-size: var(--dx-g-text-base);
24
- line-height: var(--dx-g-spacing-lg);
25
- font-weight: var(--dx-g-font-normal);
26
- }
27
-
28
- .nav-list-item_default:hover {
29
- border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
30
- background: var(--dx-g-cloud-blue-vibrant-95);
31
- color: var(--dx-g-blue-vibrant-20);
32
- }
33
-
34
- .nav-list-item_default:focus-visible {
35
- border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
36
- background: var(--dx-g-cloud-blue-vibrant-95);
37
- color: var(--dx-g-blue-vibrant-20);
38
- outline: 2px solid var(--dx-g-blue-vibrant-60);
39
21
  }
40
22
 
41
23
  .nav-list-item_small {
@@ -84,27 +66,11 @@ button.nav-list-item:active > dx-icon,
84
66
 
85
67
  .nav-list-item_default.state-active {
86
68
  color: var(--dx-g-blue-vibrant-50);
87
- font-weight: var(--dx-g-font-bold);
88
- padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
89
- var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
69
+ font-family: var(--dx-g-font-sans);
70
+ font-size: var(--dx-g-text-base);
90
71
  border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
91
72
  }
92
73
 
93
- .nav-list-item_default.state-active:hover {
94
- border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
95
- background: var(--dx-g-cloud-blue-vibrant-95);
96
- border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
97
- color: var(--dx-g-blue-vibrant-20);
98
- }
99
-
100
- .nav-list-item_default.state-active:focus-visible {
101
- border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
102
- background: var(--dx-g-cloud-blue-vibrant-95);
103
- border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
104
- outline: 2px solid var(--dx-g-blue-vibrant-60);
105
- color: var(--dx-g-blue-vibrant-20);
106
- }
107
-
108
74
  @media (max-width: 1160px) {
109
75
  .nav-list-item_small {
110
76
  --horizontal-spacing: var(
package/src/modules/dx/treeTile/treeTile.css CHANGED
@@ -39,7 +39,7 @@
39
39
  .tile-icon {
40
40
  align-items: center;
41
41
  height: var(--tile-height);
42
- padding: 0 calc(var(--dx-g-spacing-xs) + 2px) 0 var(--dx-g-spacing-sm);
42
+ padding-right: calc(var(--dx-g-spacing-xs) + 2px);
43
43
  }
44
44
 
45
45
  .tile-label {
package/src/modules/dxHelpers/commonHeader/commonHeader.css CHANGED
@@ -3,8 +3,6 @@
3
3
 
4
4
  :host {
5
5
  z-index: var(--dx-g-z-index-500);
6
-
7
- --dx-g-doc-header-main-nav-height: 51px;
8
6
  }
9
7
 
10
8
  .header_l2_group-nav_overflow {
@@ -61,8 +59,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
61
59
 
62
60
  .header_l2 {
63
61
  background: white;
64
- padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
65
- var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
62
+ padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
66
63
  }
67
64
 
68
65
  .header_l2_group {
@@ -73,7 +70,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
73
70
 
74
71
  .header_l2_group-title {
75
72
  flex-shrink: 0;
76
- padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
73
+ padding-right: var(--dx-g-spacing-xl);
77
74
  }
78
75
 
79
76
  .header_l2_group-title
package/src/modules/dxHelpers/commonSidebar/commonSidebar.css CHANGED
@@ -11,7 +11,6 @@
11
11
  --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
12
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
- --doc-version-picker-width: 296px;
15
14
  }
16
15
 
17
16
  .header {
@@ -28,18 +27,15 @@
28
27
  }
29
28
 
30
29
  .padding-horizontal {
31
- padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-c-sidebar-left-padding);
30
+ padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
32
31
  }
33
32
 
34
- .sidebar-header[show-shadow="true"] {
33
+ .padding-horizontal[show-shadow="true"] {
35
34
  box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
36
35
  }
37
36
 
38
37
  .header-title {
39
- line-height: 28px;
40
- letter-spacing: -0.08px;
41
- font-size: var(--dx-g-text-lg);
42
- font-weight: var(--dx-g-font-demi);
38
+ line-height: inherit;
43
39
  }
44
40
 
45
41
  .header-toggle-icon {
@@ -69,6 +65,7 @@
69
65
  var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
70
66
  );
71
67
 
68
+ border-right: 1px solid var(--dx-g-gray-90);
72
69
  box-shadow: 2px 0 0 0 var(--border-color);
73
70
  min-height: var(--dx-c-sidebar-min-height);
74
71
  padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
@@ -104,7 +101,7 @@
104
101
 
105
102
  .container.container-mobile.collapsed {
106
103
  height: unset;
107
- padding: 4px 0;
104
+ padding-bottom: 0;
108
105
  }
109
106
 
110
107
  .container.container-mobile.collapsed .header {
@@ -116,7 +113,7 @@
116
113
  }
117
114
 
118
115
  .search {
119
- padding-bottom: var(--dx-g-spacing-md);
116
+ padding-bottom: var(--dx-g-spacing-smd);
120
117
  }
121
118
 
122
119
  .search-box {
@@ -148,10 +145,14 @@
148
145
  margin-bottom: var(--dx-g-spacing-2xl);
149
146
  }
150
147
 
148
+ @media screen and (max-width: 1279px) {
149
+ .padding-horizontal {
150
+ padding-left: var(--dx-g-spacing-xl);
151
+ }
152
+ }
153
+
151
154
  @media screen and (max-width: 767px) {
152
- :host {
153
- --doc-version-picker-width: calc(
154
- 100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
155
- );
155
+ .padding-horizontal {
156
+ padding-left: var(--dx-g-spacing-lg);
156
157
  }
157
158
  }
package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css CHANGED
@@ -14,31 +14,27 @@
14
14
  }
15
15
 
16
16
  .sidebar-item {
17
- padding: 6px var(--dx-g-spacing-lg) 6px
18
- var(--dx-g-global-header-padding-horizontal);
17
+ padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-2xl);
19
18
  }
20
19
 
21
- .sidebar-item:not(.sidebar-item-selected):focus-visible {
22
- padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
23
- margin: 0 var(--dx-g-spacing-lg) 0
24
- var(--dx-g-global-header-padding-horizontal);
25
- outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
26
- border-radius: var(--dx-g-spacing-2xs);
20
+ .sidebar-item:focus-visible {
21
+ margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
22
+ outline: 2px solid var(--dx-g-blue-vibrant-40);
23
+ border-radius: 2px;
27
24
  }
28
25
 
29
- .sidebar-item-selected:focus-visible {
30
- padding-top: 0;
31
- padding-bottom: 0;
32
- outline: none;
26
+ .sidebar-item:not(.sidebar-item-selected):hover {
27
+ color: var(--dx-g-blue-vibrant-50);
28
+ }
33
29
 
34
- .indentation {
35
- outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
36
- border-radius: var(--dx-g-spacing-2xs);
37
- padding-top: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
38
- padding-bottom: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
30
+ @media (max-width: 1279px) {
31
+ .sidebar-item {
32
+ padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-xl);
39
33
  }
40
34
  }
41
35
 
42
- .sidebar-item:not(.sidebar-item-selected):hover {
43
- color: var(--dx-g-blue-vibrant-50);
36
+ @media (max-width: 767px) {
37
+ .sidebar-item {
38
+ padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-lg);
39
+ }
44
40
  }