@salesforcedevs/dx-components 1.3.228-version-picker1 → 1.3.229-docheader1-alpha

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 (10) 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 +9 -0
  5. package/src/modules/dx/sidebar/sidebar.html +12 -6
  6. package/src/modules/dx/sidebarOld/sidebarOld.html +8 -6
  7. package/src/modules/dx/tab/tab.css +38 -4
  8. package/src/modules/dxHelpers/commonHeader/commonHeader.css +5 -2
  9. package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +15 -6
  10. package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +27 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.228-version-picker1",
3
+ "version": "1.3.229-docheader1-alpha",
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,17 +10,26 @@ nav {
10
10
 
11
11
  .nav-list {
12
12
  display: flex;
13
+ margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
13
14
  }
14
15
 
15
16
  .nav-list li {
16
17
  position: relative;
17
18
  }
18
19
 
20
+ .nav-list li:not(:last-child) {
21
+ margin-right: var(--dx-g-spacing-md);
22
+ }
23
+
19
24
  .nav-list-item-nav-menu {
20
25
  display: none;
21
26
  }
22
27
 
23
28
  @media (max-width: 768px) {
29
+ .nav-list {
30
+ margin-top: 0;
31
+ }
32
+
24
33
  .nav-list-item-nav-menu {
25
34
  display: flex;
26
35
  }
package/src/modules/dx/sidebar/sidebar.html CHANGED
@@ -16,19 +16,26 @@
16
16
  <dx-icon
17
17
  sprite="utility"
18
18
  symbol={menuSymbol}
19
- color="blue-vibrant-20"
19
+ color="blue-vibrant-50"
20
+ size="medium"
20
21
  ></dx-icon>
21
22
  </dx-button>
22
23
  </div>
23
24
  </div>
24
- <div class="sidebar-header" show-shadow={showBoxShadow}>
25
- <div class="header padding-horizontal" if:false={mobile}>
25
+
26
+ <div
27
+ class="sidebar-header padding-horizontal"
28
+ show-shadow={showBoxShadow}
29
+ >
30
+ <div class="header" if:false={mobile}>
26
31
  <h2 class="dx-text-display-6 header-title">{header}</h2>
32
+ <slot name="header"></slot>
27
33
  </div>
28
- <div class="mobile-header padding-horizontal" if:true={mobile}>
34
+ <div class="mobile-header" if:true={mobile}>
29
35
  <h2 class="dx-text-display-6">{header}</h2>
36
+ <slot name="header"></slot>
30
37
  </div>
31
- <div class="search padding-horizontal">
38
+ <div class="search">
32
39
  <dx-sidebar-search
33
40
  onchange={onSearchChange}
34
41
  onloading={onSearchLoading}
@@ -38,7 +45,6 @@
38
45
  coveo-advanced-query-config={coveoAdvancedQueryConfig}
39
46
  ></dx-sidebar-search>
40
47
  </div>
41
- <slot name="version-picker"></slot>
42
48
  <h2
43
49
  class="results-heading dx-text-body-3"
44
50
  if:true={showResultsHeading}
package/src/modules/dx/sidebarOld/sidebarOld.html CHANGED
@@ -16,21 +16,24 @@
16
16
  <dx-icon
17
17
  sprite="utility"
18
18
  symbol={menuSymbol}
19
- color="blue-vibrant-20"
19
+ color="blue-vibrant-50"
20
+ size="medium"
20
21
  ></dx-icon>
21
22
  </dx-button>
22
23
  </div>
23
24
  </div>
24
25
 
25
26
  <template if:true={expanded}>
26
- <div class="sidebar-header" show-shadow={showBoxShadow}>
27
- <div class="header padding-horizontal" if:false={mobile}>
27
+ <div class="padding-horizontal" show-shadow={showBoxShadow}>
28
+ <div class="header" if:false={mobile}>
28
29
  <h2 class="dx-text-display-6 header-title">{header}</h2>
30
+ <slot name="header"></slot>
29
31
  </div>
30
- <div class="mobile-header padding-horizontal" if:true={mobile}>
32
+ <div class="mobile-header" if:true={mobile}>
31
33
  <h2 class="dx-text-display-6">{header}</h2>
34
+ <slot name="header"></slot>
32
35
  </div>
33
- <div class="search padding-horizontal">
36
+ <div class="search">
34
37
  <dx-input
35
38
  class="search-box"
36
39
  type="search"
@@ -44,7 +47,6 @@
44
47
  shortcut-key="j"
45
48
  ></dx-input>
46
49
  </div>
47
- <slot name="version-picker"></slot>
48
50
  </div>
49
51
  <div
50
52
  class={sidebarContentClass}
package/src/modules/dx/tab/tab.css CHANGED
@@ -11,13 +11,31 @@ a {
11
11
  );
12
12
 
13
13
  position: relative;
14
- height: calc(var(--dx-g-spacing-3xl) - 4px);
14
+ height: var(--dx-g-spacing-3xl);
15
+ border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
15
16
  }
16
17
 
17
18
  .nav-list-item_default {
18
- padding: calc(var(--dx-g-spacing-sm) + 2px) var(--dx-g-spacing-md);
19
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
19
20
  justify-content: center;
20
21
  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);
21
39
  }
22
40
 
23
41
  .nav-list-item_small {
@@ -66,11 +84,27 @@ button.nav-list-item:active > dx-icon,
66
84
 
67
85
  .nav-list-item_default.state-active {
68
86
  color: var(--dx-g-blue-vibrant-50);
69
- font-family: var(--dx-g-font-sans);
70
- font-size: var(--dx-g-text-base);
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);
71
90
  border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
72
91
  }
73
92
 
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
+
74
108
  @media (max-width: 1160px) {
75
109
  .nav-list-item_small {
76
110
  --horizontal-spacing: var(
package/src/modules/dxHelpers/commonHeader/commonHeader.css CHANGED
@@ -3,6 +3,8 @@
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;
6
8
  }
7
9
 
8
10
  .header_l2_group-nav_overflow {
@@ -59,7 +61,8 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
59
61
 
60
62
  .header_l2 {
61
63
  background: white;
62
- padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
64
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
65
+ var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
63
66
  }
64
67
 
65
68
  .header_l2_group {
@@ -70,7 +73,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
70
73
 
71
74
  .header_l2_group-title {
72
75
  flex-shrink: 0;
73
- padding-right: var(--dx-g-spacing-xl);
76
+ padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
74
77
  }
75
78
 
76
79
  .header_l2_group-title
package/src/modules/dxHelpers/commonSidebar/commonSidebar.css CHANGED
@@ -11,9 +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: calc(
15
- 360px - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
16
- );
17
14
  }
18
15
 
19
16
  .header {
@@ -30,10 +27,10 @@
30
27
  }
31
28
 
32
29
  .padding-horizontal {
33
- 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);
34
31
  }
35
32
 
36
- .sidebar-header[show-shadow="true"] {
33
+ .padding-horizontal[show-shadow="true"] {
37
34
  box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
38
35
  }
39
36
 
@@ -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 {
@@ -147,3 +144,15 @@
147
144
  .sidebar-content-hasfooter {
148
145
  margin-bottom: var(--dx-g-spacing-2xl);
149
146
  }
147
+
148
+ @media screen and (max-width: 1279px) {
149
+ .padding-horizontal {
150
+ padding-left: var(--dx-g-spacing-xl);
151
+ }
152
+ }
153
+
154
+ @media screen and (max-width: 767px) {
155
+ .padding-horizontal {
156
+ padding-left: var(--dx-g-spacing-lg);
157
+ }
158
+ }
package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css CHANGED
@@ -17,10 +17,23 @@
17
17
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-2xl);
18
18
  }
19
19
 
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;
20
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
21
+ padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
22
+ margin: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
23
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
24
+ border-radius: var(--dx-g-spacing-2xs);
25
+ }
26
+
27
+ .sidebar-item-selected:focus-visible {
28
+ padding-top: 0;
29
+ padding-bottom: 0;
30
+ outline: none;
31
+
32
+ .indentation {
33
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
34
+ border-radius: var(--dx-g-spacing-2xs);
35
+ padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
36
+ }
24
37
  }
25
38
 
26
39
  .sidebar-item:not(.sidebar-item-selected):hover {
@@ -31,10 +44,20 @@
31
44
  .sidebar-item {
32
45
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-xl);
33
46
  }
47
+
48
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
49
+ padding-left: 0;
50
+ margin-left: var(--dx-g-spacing-xl);
51
+ }
34
52
  }
35
53
 
36
54
  @media (max-width: 767px) {
37
55
  .sidebar-item {
38
56
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-lg);
39
57
  }
58
+
59
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
60
+ padding-left: 0;
61
+ margin-left: var(--dx-g-spacing-lg);
62
+ }
40
63
  }