Skip to content

Commit 224ccc3

Browse files
ElliotLuke BowermanLuke Bowerman
authored
TreeGroup (#993)
* Initial Commit * Fixed TreeItem misalignment * Added proper styling to TreeGroup and adjusted existing selectors in Tree - Existing selectors needed to not only account for TreeItems being direct children, but also being children of TreeGroups * Added color prop to TreeGroup - Allows color customization on a TreeGroup and all TreeItem children * Added test for TreeGroup * Fixed TreeItem and TreeGroup alignment * Added documentation * Fixed border color on TreeItems within TreeGroup * CHANGELOG update * Added changelog entry * Fixed docs error * Changed color prop type to ColorProps * Revert "Changed color prop type to ColorProps" This reverts commit 11fa9f5. * Color fix (partial) * Added TextColorProps to design-tokens - Allows us to use TextColorProps for TreeGroup so that TreeGroup can accept slot colors * Update packages/www/src/documentation/components/content/tree.mdx Co-authored-by: Luke Bowerman <[email protected]> Co-authored-by: Luke Bowerman <[email protected]> Co-authored-by: Luke Bowerman <[email protected]>
1 parent 29dba8b commit 224ccc3

File tree

10 files changed

+216
-17
lines changed

10 files changed

+216
-17
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [UNRELEASED]
9+
10+
### Added
11+
12+
- `TreeGroup` component
13+
814
## [0.8.2]
915

1016
### Fixed

‎packages/components/src/Tree/Tree.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
} from '../Accordion'
3737
import { IconNames } from '../Icon'
3838
import { TreeItem } from './TreeItem'
39+
import { TreeGroup } from './TreeGroup'
3940

4041
export interface TreeProps extends Omit<AccordionProps, 'className'> {
4142
/**
@@ -124,6 +125,10 @@ export const Tree = styled(TreeLayout)`
124125
125126
${AccordionContent} {
126127
${({ border }) => border && centeredVerticalBorder}
128+
padding-left: ${({ theme: { space } }) =>
129+
`calc(${space[indicatorProps.indicatorSize as SpacingSizes]} + ${
130+
space[indicatorProps.indicatorGap as SpacingSizes]
131+
})`}
127132
}
128133
129134
${TreeItem} {
@@ -137,7 +142,17 @@ export const Tree = styled(TreeLayout)`
137142
padding: ${({ theme }) => theme.space.xxsmall};
138143
}
139144
145+
${/* sc-selector */ TreeGroup} > ${/* sc-selector */ TreeItem} {
146+
border: 1px solid transparent;
147+
height: 25px;
148+
padding: ${({ theme }) => theme.space.xxsmall};
149+
}
150+
140151
${/* sc-selector */ AccordionContent} > ${/* sc-selector */ TreeItem}:focus {
141152
border-color: ${({ theme }) => theme.colors.keyFocus};
142153
}
154+
155+
${/* sc-selector */ TreeGroup} > ${/* sc-selector */ TreeItem}:focus {
156+
border-color: ${({ theme }) => theme.colors.keyFocus};
157+
}
143158
`

‎packages/components/src/Tree/TreeGroup.test.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import React from 'react'
28+
import { renderWithTheme } from '@looker/components-test-utils'
29+
import { TreeGroup } from '.'
30+
31+
test('Renders label and children', () => {
32+
const { getByText } = renderWithTheme(
33+
<TreeGroup label="My Tree Group">My Children</TreeGroup>
34+
)
35+
36+
getByText('My Tree Group')
37+
getByText('My Children')
38+
})

‎packages/components/src/Tree/TreeGroup.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import React, { ReactNode, FC } from 'react'
28+
import styled from 'styled-components'
29+
import { color, TextColorProps } from '@looker/design-tokens'
30+
31+
export interface TreeGroupProps extends TextColorProps {
32+
children: ReactNode
33+
className?: string
34+
/**
35+
* Visible label of the TreeGroup
36+
*/
37+
label: string
38+
}
39+
40+
const TreeGroupLabel = styled.div`
41+
/* Border is here to get proper alignment with Tree and TreeItem text */
42+
border: 1px transparent solid;
43+
padding: ${({ theme }) => `${theme.space.xsmall} ${theme.space.xxsmall}`};
44+
font-size: ${({ theme }) => theme.space.small};
45+
font-weight: ${({ theme }) => theme.fontWeights.semiBold};
46+
`
47+
48+
const TreeGroupLayout: FC<TreeGroupProps> = ({
49+
children,
50+
className,
51+
label,
52+
}) => (
53+
<div className={className}>
54+
<TreeGroupLabel>{label}</TreeGroupLabel>
55+
{children}
56+
</div>
57+
)
58+
59+
export const TreeGroup = styled(TreeGroupLayout)`
60+
${color}
61+
`

‎packages/components/src/Tree/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@
2626

2727
export * from './Tree'
2828
export * from './TreeItem'
29+
export * from './TreeGroup'

‎packages/design-tokens/src/system/color/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,4 @@ export type {
6565
StatefulColors,
6666
StatefulColorChoices,
6767
} from './stateful'
68-
export type { ColorProps } from 'styled-system'
68+
export type { ColorProps, TextColorProps } from 'styled-system'

‎packages/playground/src/Tree/TreeDemo.tsx‎

Lines changed: 64 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
Grid,
3232
Tree,
3333
TreeItem,
34+
TreeGroup,
3435
} from '@looker/components'
3536

3637
const onClick = () => {
@@ -47,19 +48,69 @@ const addButton = (
4748
const exploreExample = (
4849
<Box>
4950
Explore Example
50-
<Tree detail={addButton} detailStopPropagation label="Custom Fields">
51-
<TreeItem icon="FieldNumber" onClick={() => alert('Clicked on Cost!')}>
52-
Cost
53-
</TreeItem>
54-
<Tree label="Created">
55-
<TreeItem icon="Calendar">Created Date</TreeItem>
56-
<TreeItem icon="Calendar">Created Month</TreeItem>
57-
<TreeItem icon="Calendar">Created Year</TreeItem>
58-
<TreeItem icon="Calendar">Created Quarter</TreeItem>
59-
</Tree>
60-
<TreeItem icon="FieldDistance">Location</TreeItem>
61-
<TreeItem icon="FieldTier">Tier</TreeItem>
62-
<TreeItem icon="FieldYesNo">Oui ou Non</TreeItem>
51+
<Tree
52+
defaultOpen
53+
detail={addButton}
54+
detailStopPropagation
55+
label="Custom Fields"
56+
>
57+
<TreeGroup label="Dimensions">
58+
<TreeItem icon="FieldNumber" onClick={() => alert('Clicked on Cost!')}>
59+
Cost
60+
</TreeItem>
61+
<Tree label="Created">
62+
<TreeItem
63+
icon="Calendar"
64+
onClick={() => alert('Clicked on Created Date!')}
65+
>
66+
Created Date
67+
</TreeItem>
68+
<TreeItem
69+
icon="Calendar"
70+
onClick={() => alert('Clicked on Created Month!')}
71+
>
72+
Created Month
73+
</TreeItem>
74+
<TreeItem
75+
icon="Calendar"
76+
onClick={() => alert('Clicked on Created Year!')}
77+
>
78+
Created Year
79+
</TreeItem>
80+
<TreeItem
81+
icon="Calendar"
82+
onClick={() => alert('Clicked on Created Quarter!')}
83+
>
84+
Created Quarter
85+
</TreeItem>
86+
</Tree>
87+
<TreeItem
88+
icon="FieldDistance"
89+
onClick={() => alert('Clicked on Location!')}
90+
>
91+
Location
92+
</TreeItem>
93+
<TreeItem icon="FieldTier" onClick={() => alert('Clicked on Tier!')}>
94+
Tier
95+
</TreeItem>
96+
<TreeItem
97+
icon="FieldYesNo"
98+
onClick={() => alert('Clicked on French Yes-No!')}
99+
>
100+
Oui ou Non
101+
</TreeItem>
102+
</TreeGroup>
103+
<TreeGroup color="critical" label="Measures">
104+
<TreeItem icon="FieldNumber" onClick={() => alert('Clicked on Count!')}>
105+
Count
106+
</TreeItem>
107+
<TreeItem
108+
icon="FieldNumber"
109+
onClick={() => alert('Clicked on Count Distinct!')}
110+
>
111+
Count Distinct
112+
</TreeItem>
113+
</TreeGroup>
63114
</Tree>
64115
</Box>
65116
)

‎packages/playground/src/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
import React from 'react'
2727
import { render } from 'react-dom'
2828
import { ComponentsProvider } from '@looker/components'
29-
import { ThemeDemo } from './Theme/ThemeDemo'
29+
import { TreeDemo } from './Tree/TreeDemo'
3030

3131
const App = () => (
3232
<ComponentsProvider>
33-
<ThemeDemo />
33+
<TreeDemo />
3434
</ComponentsProvider>
3535
)
3636

‎packages/www/src/MDX/Pre/allComponents.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ import {
152152
ToggleSwitch,
153153
Tooltip,
154154
Tree,
155+
TreeGroup,
155156
TreeItem,
156157
useConfirm,
157158
usePreviousValue,
@@ -312,6 +313,7 @@ export const allComponents = {
312313
ToggleSwitch,
313314
Tooltip,
314315
Tree,
316+
TreeGroup,
315317
TreeItem,
316318
VisuallyHidden,
317319
}

‎packages/www/src/documentation/components/content/tree.mdx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Passing in an element into the `detail` prop will result in that element being d
2020
<Tree
2121
label="Orders"
2222
icon="Table"
23-
detail={<Text variant="subdued">thelook</Box>}
23+
detail={<Text variant="subdued">thelook</Text>}
2424
>
2525
<TreeItem icon="FieldNumber">Cost</TreeItem>
2626
<TreeItem icon="FieldDistance">Location</TreeItem>
@@ -134,3 +134,28 @@ Use `gapSize` to control the distance between elements in your `TreeItem`.
134134
</TreeItem>
135135
</Tree>
136136
```
137+
138+
## TreeGroup
139+
140+
<Props of="TreeGroup" />
141+
142+
`TreeGroup` can be used to label a grouping of `TreeItem`s. `TreeGroup` should be the child of a `Tree`and the parent of one or many `TreeItem`s.
143+
144+
Use the `label` prop to set the text label of the `TreeGroup`.
145+
146+
Use the `color` prop to set the text color of both the `TreeGroup` and all of its children.
147+
148+
```jsx
149+
<Tree label="Cheeses" defaultOpen>
150+
<TreeGroup label="American">
151+
<TreeItem icon="LogoRings">Cream</TreeItem>
152+
<TreeItem icon="LogoRings">Pepper Jack</TreeItem>
153+
<TreeItem icon="LogoRings">String Cheese</TreeItem>
154+
</TreeGroup>
155+
<TreeGroup label="English" color="inform">
156+
<TreeItem icon="LogoRings">Brighton Blue</TreeItem>
157+
<TreeItem icon="LogoRings">Cheddar</TreeItem>
158+
<TreeItem icon="LogoRings">Suffolk Gold</TreeItem>
159+
</TreeGroup>
160+
</Tree>
161+
```

0 commit comments

Comments
 (0)