Skip to content

Commit 12de85f

Browse files
cansuaajperals
cansuaa
authored and
jperals
committed
feat: Tree view vertical connector lines (#3991)
1 parent 8629cd8 commit 12de85f

File tree

17 files changed

+391
-10
lines changed

17 files changed

+391
-10
lines changed

‎pages/tree-view/basic.page.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import clsx from 'clsx';
55

66
import Box from '~components/box';
77
import Button from '~components/button';
8+
import Checkbox from '~components/checkbox';
89
import Container from '~components/container';
910
import FormField from '~components/form-field';
1011
import Grid from '~components/grid';
@@ -24,6 +25,7 @@ export default function BasicTreeView() {
2425
label: 'Default',
2526
value: 'default',
2627
});
28+
const [showConnectorLines, setShowConnectorLines] = useState(true);
2729

2830
const renderItemToggleIcon = ({ expanded }: TreeViewProps.ItemToggleRenderIconData) => {
2931
if (toggleIconType.value === 'custom') {
@@ -47,6 +49,12 @@ export default function BasicTreeView() {
4749

4850
<Grid gridDefinition={[{ colspan: { m: 7, xs: 12 } }]}>
4951
<div>
52+
<Checkbox checked={showConnectorLines} onChange={({ detail }) => setShowConnectorLines(detail.checked)}>
53+
Show connector lines
54+
</Checkbox>
55+
56+
<br />
57+
5058
<FormField label="Toggle icon" stretch={true}>
5159
<Select
5260
selectedOption={toggleIconType}
@@ -80,7 +88,11 @@ export default function BasicTreeView() {
8088
<Icon name={expandedItems.includes(item.id) ? 'folder-open' : 'folder'} ariaLabel="folder" />
8189
),
8290
content: item.content,
83-
secondaryContent: item.details && <Box color="text-status-inactive">{item.details}</Box>,
91+
secondaryContent: item.details && (
92+
<Box color="text-body-secondary" fontSize="body-s">
93+
{item.details}
94+
</Box>
95+
),
8496
actions: item.hasActions ? (
8597
<Actions
8698
actionType="inline-button-dropdown"
@@ -102,6 +114,7 @@ export default function BasicTreeView() {
102114
collapseButtonLabel: () => 'Collapse item',
103115
}}
104116
renderItemToggleIcon={renderItemToggleIcon}
117+
connectorLines={showConnectorLines ? 'vertical' : undefined}
105118
/>
106119
</Container>
107120
</div>

‎pages/tree-view/permutations.page.tsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
type PageContext = React.Context<
2020
AppContextType<{
2121
expandAll?: boolean;
22+
showConnectorLines?: boolean;
2223
}>
2324
>;
2425

@@ -59,14 +60,33 @@ export default function TreeViewPermuations() {
5960
Expand all
6061
</Checkbox>
6162

63+
<Checkbox
64+
checked={urlParams.showConnectorLines ?? false}
65+
onChange={event => {
66+
setUrlParams({ showConnectorLines: event.detail.checked });
67+
}}
68+
>
69+
Show connector lines
70+
</Checkbox>
71+
6272
{[textPermutation, longTextPermutation, statusIndicatorPermutation].map((permutation, index) => (
63-
<Permutation key={index} {...permutation} expandAll={urlParams.expandAll} />
73+
<Permutation
74+
key={index}
75+
{...permutation}
76+
expandAll={urlParams.expandAll}
77+
showConnectorLines={urlParams.showConnectorLines}
78+
/>
6479
))}
6580
</ScreenshotArea>
6681
);
6782
}
6883

69-
function Permutation({ title, items, expandAll }: Permutation & { expandAll?: boolean }) {
84+
function Permutation({
85+
title,
86+
items,
87+
expandAll,
88+
showConnectorLines,
89+
}: Permutation & { expandAll?: boolean; showConnectorLines?: boolean }) {
7090
const [expandedItems, setExpandedItems] = useState(expandAll ? getAllExpandableItemIds(items) : []);
7191

7292
return (
@@ -95,6 +115,7 @@ function Permutation({ title, items, expandAll }: Permutation & { expandAll?: bo
95115
return setExpandedItems(prev => prev.filter(id => id !== detail.item.id));
96116
}
97117
}}
118+
connectorLines={showConnectorLines ? 'vertical' : undefined}
98119
/>
99120
</div>
100121
);

‎src/__integ__/__snapshots__/themes.test.ts.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
474474
"color-text-tutorial-hotspot-default": "#0073bb",
475475
"color-text-tutorial-hotspot-hover": "#0a4a74",
476476
"color-transparent": "transparent",
477+
"color-tree-view-connector-line": "#879596",
477478
"font-box-value-large-weight": "300",
478479
"font-button-letter-spacing": "0.25px",
479480
"font-chart-detail-size": "14px",
@@ -671,6 +672,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
671672
"space-tabs-content-top": "12px",
672673
"space-tabs-focus-outline-gutter": "0px",
673674
"space-tile-gutter": "16px",
675+
"space-tree-view-indentation": "20px",
674676
"space-xl": "24px",
675677
"space-xs": "8px",
676678
"space-xxl": "32px",
@@ -1154,6 +1156,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
11541156
"color-text-tutorial-hotspot-default": "#44b9d6",
11551157
"color-text-tutorial-hotspot-hover": "#99cbe4",
11561158
"color-transparent": "transparent",
1159+
"color-tree-view-connector-line": "#d5dbdb",
11571160
"font-box-value-large-weight": "300",
11581161
"font-button-letter-spacing": "0.25px",
11591162
"font-chart-detail-size": "14px",
@@ -1351,6 +1354,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
13511354
"space-tabs-content-top": "16px",
13521355
"space-tabs-focus-outline-gutter": "0px",
13531356
"space-tile-gutter": "24px",
1357+
"space-tree-view-indentation": "20px",
13541358
"space-xl": "24px",
13551359
"space-xs": "8px",
13561360
"space-xxl": "32px",
@@ -1834,6 +1838,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
18341838
"color-text-tutorial-hotspot-default": "#0073bb",
18351839
"color-text-tutorial-hotspot-hover": "#0a4a74",
18361840
"color-transparent": "transparent",
1841+
"color-tree-view-connector-line": "#879596",
18371842
"font-box-value-large-weight": "300",
18381843
"font-button-letter-spacing": "0.25px",
18391844
"font-chart-detail-size": "14px",
@@ -2031,6 +2036,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
20312036
"space-tabs-content-top": "16px",
20322037
"space-tabs-focus-outline-gutter": "0px",
20332038
"space-tile-gutter": "24px",
2039+
"space-tree-view-indentation": "20px",
20342040
"space-xl": "24px",
20352041
"space-xs": "8px",
20362042
"space-xxl": "32px",
@@ -2514,6 +2520,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
25142520
"color-text-tutorial-hotspot-default": "#0073bb",
25152521
"color-text-tutorial-hotspot-hover": "#0a4a74",
25162522
"color-transparent": "transparent",
2523+
"color-tree-view-connector-line": "#879596",
25172524
"font-box-value-large-weight": "300",
25182525
"font-button-letter-spacing": "0.25px",
25192526
"font-chart-detail-size": "14px",
@@ -2711,6 +2718,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
27112718
"space-tabs-content-top": "16px",
27122719
"space-tabs-focus-outline-gutter": "0px",
27132720
"space-tile-gutter": "24px",
2721+
"space-tree-view-indentation": "20px",
27142722
"space-xl": "24px",
27152723
"space-xs": "8px",
27162724
"space-xxl": "32px",
@@ -3194,6 +3202,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
31943202
"color-text-tutorial-hotspot-default": "#006ce0",
31953203
"color-text-tutorial-hotspot-hover": "#002b66",
31963204
"color-transparent": "transparent",
3205+
"color-tree-view-connector-line": "#8c8c94",
31973206
"font-box-value-large-weight": "700",
31983207
"font-button-letter-spacing": "0.005em",
31993208
"font-chart-detail-size": "12px",
@@ -3391,6 +3400,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
33913400
"space-tabs-content-top": "12px",
33923401
"space-tabs-focus-outline-gutter": "-8px",
33933402
"space-tile-gutter": "24px",
3403+
"space-tree-view-indentation": "20px",
33943404
"space-xl": "24px",
33953405
"space-xs": "8px",
33963406
"space-xxl": "32px",
@@ -3874,6 +3884,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
38743884
"color-text-tutorial-hotspot-default": "#006ce0",
38753885
"color-text-tutorial-hotspot-hover": "#002b66",
38763886
"color-transparent": "transparent",
3887+
"color-tree-view-connector-line": "#8c8c94",
38773888
"font-box-value-large-weight": "700",
38783889
"font-button-letter-spacing": "0.005em",
38793890
"font-chart-detail-size": "12px",
@@ -4071,6 +4082,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
40714082
"space-tabs-content-top": "8px",
40724083
"space-tabs-focus-outline-gutter": "-8px",
40734084
"space-tile-gutter": "16px",
4085+
"space-tree-view-indentation": "20px",
40744086
"space-xl": "24px",
40754087
"space-xs": "8px",
40764088
"space-xxl": "32px",
@@ -4554,6 +4566,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
45544566
"color-text-tutorial-hotspot-default": "#42b4ff",
45554567
"color-text-tutorial-hotspot-hover": "#75cfff",
45564568
"color-transparent": "transparent",
4569+
"color-tree-view-connector-line": "#dedee3",
45574570
"font-box-value-large-weight": "700",
45584571
"font-button-letter-spacing": "0.005em",
45594572
"font-chart-detail-size": "12px",
@@ -4751,6 +4764,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
47514764
"space-tabs-content-top": "12px",
47524765
"space-tabs-focus-outline-gutter": "-8px",
47534766
"space-tile-gutter": "24px",
4767+
"space-tree-view-indentation": "20px",
47544768
"space-xl": "24px",
47554769
"space-xs": "8px",
47564770
"space-xxl": "32px",
@@ -5234,6 +5248,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
52345248
"color-text-tutorial-hotspot-default": "#42b4ff",
52355249
"color-text-tutorial-hotspot-hover": "#75cfff",
52365250
"color-transparent": "transparent",
5251+
"color-tree-view-connector-line": "#dedee3",
52375252
"font-box-value-large-weight": "700",
52385253
"font-button-letter-spacing": "0.005em",
52395254
"font-chart-detail-size": "12px",
@@ -5431,6 +5446,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
54315446
"space-tabs-content-top": "12px",
54325447
"space-tabs-focus-outline-gutter": "-8px",
54335448
"space-tile-gutter": "24px",
5449+
"space-tree-view-indentation": "20px",
54345450
"space-xl": "24px",
54355451
"space-xs": "8px",
54365452
"space-xxl": "32px",

0 commit comments

Comments
 (0)