Skip to content

Commit 5bd34dc

Browse files
jianliaosnowystingerJian Liao
authored
feat: add Treeview heading (via RSP V3) (#601)
* feat: support treeview heading (aka section) * fix: replace hardcoded pixel with DNA variable * feat: support treeview heading (aka section) * fix: replace hardcoded pixel with DNA variable * fix: match as much as possible to the design review comment * fix: match with the comment from design review Co-authored-by: Devon Govett <rsnow@adobe.com> Co-authored-by: Jian Liao <jianliao@adobe.com>
1 parent 3c6ebf6 commit 5bd34dc

File tree

2 files changed

+110
-17
lines changed

2 files changed

+110
-17
lines changed

‎components/treeview/index.css

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,15 @@ governing permissions and limitations under the License.
1212

1313
@import '../commons/index.css';
1414

15+
:root {
16+
--spectrum-treeview-item-min-height: var(--spectrum-global-dimension-size-400);
17+
--spectrum-treeview-item-padding-y: var(--spectrum-global-dimension-size-75);
18+
--spectrum-treeview-item-icon-margin-right: var(--spectrum-global-dimension-size-100);
19+
--spectrum-treeview-item-affordance-width: var(--spectrum-global-dimension-size-400);
20+
--spectrum-treeview-item-indentation: var(--spectrum-global-dimension-size-200);
21+
--spectrum-treeview-heading-font-weight: var(--spectrum-global-font-weight-bold);
22+
}
23+
1524
.spectrum-TreeView {
1625
display: block;
1726
list-style: none;
@@ -44,11 +53,13 @@ governing permissions and limitations under the License.
4453
box-sizing: border-box;
4554
cursor: pointer;
4655

47-
padding-block: calc(calc(var(--spectrum-treeview-item-margin-y)/2) + var(--spectrum-treeview-item-padding-y));
48-
padding-inline: var(--spectrum-treeview-item-padding-x);
56+
padding-block: var(--spectrum-treeview-item-padding-y);
57+
padding-inline: var(--spectrum-treeview-item-affordance-width);
4958

5059
text-decoration: none;
5160

61+
height: var(--spectrum-treeview-item-min-height);
62+
5263
/* Prevent weirdness that can cause the vertical bar to fall down */
5364
white-space: nowrap;
5465
overflow: hidden;
@@ -61,14 +72,14 @@ governing permissions and limitations under the License.
6172

6273
.spectrum-Icon {
6374
vertical-align: top;
64-
margin-inline-end: var(--spectrum-treeview-item-icon-gap);
75+
margin-inline-end: var(--spectrum-treeview-item-icon-margin-right);
6576
}
6677

6778
&::before {
6879
content: '';
6980

7081
position: absolute;
71-
inset-inline-start: calc(0 + var(--spectrum-treeview-item-border-size));
82+
inset-inline-start: var(--spectrum-treeview-item-border-size);
7283
inset-inline-end: 0;
7384
z-index: -1; /* make sure we don't block clicks on chevron */
7485

@@ -92,10 +103,11 @@ governing permissions and limitations under the License.
92103

93104
inset-inline-start: var(--spectrum-global-dimension-size-125);
94105
inset-block-start: calc(-1 * var(--spectrum-global-dimension-size-65));
95-
margin-inline-start: calc(-1 * calc(var(--spectrum-global-dimension-size-400) + var(--spectrum-global-dimension-size-25)));
106+
margin-inline-start: calc(-1 * var(--spectrum-global-dimension-size-500));
96107
margin-block-end: calc(-1 * var(--spectrum-global-dimension-size-125));
97108

98-
padding: var(--spectrum-global-dimension-size-125);
109+
padding-inline: var(--spectrum-global-dimension-size-150);
110+
padding-block: var(--spectrum-global-dimension-size-125);
99111

100112
transform: logical rotate(0deg);
101113
transition: transform ease var(--spectrum-global-animation-duration-100);
@@ -108,49 +120,58 @@ governing permissions and limitations under the License.
108120
/* Don't be a highlight container stealer */
109121
position: static;
110122

111-
padding-inline-start: var(--spectrum-treeview-item-indent);
123+
padding-inline-start: var(--spectrum-treeview-item-indentation);
112124

113125
/* Be hidden */
114126
block-size: 0;
115127
visibility: hidden;
116128
}
117129

118130
.spectrum-TreeView-item--indent1 {
119-
padding-inline-start: var(--spectrum-treeview-item-indent);
131+
padding-inline-start: var(--spectrum-treeview-item-indentation);
120132
}
121133

122134
.spectrum-TreeView-item--indent2 {
123-
padding-inline-start: calc(2 * var(--spectrum-treeview-item-indent));
135+
padding-inline-start: calc(2 * var(--spectrum-treeview-item-indentation));
124136
}
125137

126138
.spectrum-TreeView-item--indent3 {
127-
padding-inline-start: calc(3 * var(--spectrum-treeview-item-indent));
139+
padding-inline-start: calc(3 * var(--spectrum-treeview-item-indentation));
128140
}
129141

130142
.spectrum-TreeView-item--indent4 {
131-
padding-inline-start: calc(4 * var(--spectrum-treeview-item-indent));
143+
padding-inline-start: calc(4 * var(--spectrum-treeview-item-indentation));
132144
}
133145

134146
.spectrum-TreeView-item--indent5 {
135-
padding-inline-start: calc(5 * var(--spectrum-treeview-item-indent));
147+
padding-inline-start: calc(5 * var(--spectrum-treeview-item-indentation));
136148
}
137149

138150
.spectrum-TreeView-item--indent6 {
139-
padding-inline-start: calc(6 * var(--spectrum-treeview-item-indent));
151+
padding-inline-start: calc(6 * var(--spectrum-treeview-item-indentation));
140152
}
141153

142154
.spectrum-TreeView-item--indent7 {
143-
padding-inline-start: calc(7 * var(--spectrum-treeview-item-indent));
155+
padding-inline-start: calc(7 * var(--spectrum-treeview-item-indentation));
144156
}
145157

146158
.spectrum-TreeView-item--indent8 {
147-
padding-inline-start: calc(8 * var(--spectrum-treeview-item-indent));
159+
padding-inline-start: calc(8 * var(--spectrum-treeview-item-indentation));
148160
}
149161

150162
.spectrum-TreeView-item--indent9 {
151-
padding-inline-start: calc(9 * var(--spectrum-treeview-item-indent));
163+
padding-inline-start: calc(9 * var(--spectrum-treeview-item-indentation));
152164
}
153165

154166
.spectrum-TreeView-item--indent10 {
155-
padding-inline-start: calc(10 * var(--spectrum-treeview-item-indent));
167+
padding-inline-start: calc(10 * var(--spectrum-treeview-item-indentation));
168+
}
169+
170+
.spectrum-TreeView-heading {
171+
padding: var(--spectrum-treeview-item-padding-y);
172+
font-weight: var(--spectrum-treeview-heading-font-weight);
173+
174+
&:not(:first-child) {
175+
margin-block-start: var(--spectrum-global-dimension-size-200);
176+
}
156177
}

‎components/treeview/metadata/treeview.yml

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,3 +347,75 @@ examples:
347347
</a>
348348
</li>
349349
</ul>
350+
- id: treeview
351+
name: Sections
352+
markup: |
353+
<ul class="spectrum-TreeView" style="width: 250px">
354+
<div class="spectrum-TreeView-heading">Section 1</div>
355+
<li class="spectrum-TreeView-item">
356+
<a class="spectrum-TreeView-itemLink" href="#">
357+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
358+
<use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
359+
</svg>
360+
Group 1
361+
</a>
362+
<ul class="spectrum-TreeView">
363+
<li class="spectrum-TreeView-item">
364+
<a class="spectrum-TreeView-itemLink" href="#">Layer 2</a>
365+
</li>
366+
<li class="spectrum-TreeView-item">
367+
<a class="spectrum-TreeView-itemLink" href="#">Layer 3</a>
368+
</li>
369+
</ul>
370+
</li>
371+
372+
<li class="spectrum-TreeView-item">
373+
<a class="spectrum-TreeView-itemLink" href="#">Layer 4</a>
374+
</li>
375+
<li class="spectrum-TreeView-item">
376+
<a class="spectrum-TreeView-itemLink" href="#">Layer 5</a>
377+
</li>
378+
<div class="spectrum-TreeView-heading">Section 2</div>
379+
<li class="spectrum-TreeView-item is-open">
380+
<a class="spectrum-TreeView-itemLink" href="#">
381+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
382+
<use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
383+
</svg>
384+
Group 2
385+
</a>
386+
<ul class="spectrum-TreeView">
387+
<li class="spectrum-TreeView-item is-open">
388+
<a class="spectrum-TreeView-itemLink" href="#">
389+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
390+
<use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
391+
</svg>
392+
Group 3
393+
</a>
394+
<ul class="spectrum-TreeView">
395+
<li class="spectrum-TreeView-item">
396+
<a class="spectrum-TreeView-itemLink" href="#">
397+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
398+
<use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
399+
</svg>
400+
Group 4
401+
</a>
402+
<ul class="spectrum-TreeView">
403+
<li class="spectrum-TreeView-item">
404+
<a class="spectrum-TreeView-itemLink" href="#">Layer 6</a>
405+
</li>
406+
<li class="spectrum-TreeView-item">
407+
<a class="spectrum-TreeView-itemLink" href="#">
408+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-TreeView-indicator" focusable="false" aria-hidden="true">
409+
<use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
410+
</svg>
411+
Group 5
412+
</a>
413+
</li>
414+
</ul>
415+
</li>
416+
</ul>
417+
</li>
418+
</ui>
419+
</li>
420+
</ul>
421+

0 commit comments

Comments
 (0)