Skip to content

Commit d4f5f8a

Browse files
ElliotLuke Bowerman
Elliot
and
Luke Bowerman
authored
TreeGroup: truncate and labelColor props (#1555)
* Added truncate and labelColor props to TreeGroup * Updated existing stories * Cleaned up FieldPicker story to closer resemble actual New Field Picker UI * LongLabels story includes truncated (and wrapped) TreeGroup * Added ColorfulTree.story file * CHANGELOG and snapshot updates * Minor strategy change Co-authored-by: Luke Bowerman <[email protected]>
1 parent f6743c4 commit d4f5f8a

File tree

9 files changed

+159
-69
lines changed

9 files changed

+159
-69
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1212
- `useDialog` needs to support scenario it is controlled but `onClose` isn't specified
1313
- Reverts: `HoverDisclosure` toggles visibility with css rather than inserting elements into the DOM
1414
- Fix `image-snapshots` issue
15+
- `TreeGroup` supports `truncate` and `labelColor` props
1516

1617
## [0.9.17] - 2020-10-12
1718

‎packages/components/snapshots/Tree/Colorful Tree-snap.png‎

17.1 KB
Loading

‎packages/components/snapshots/Tree/Field Picker-snap.png‎

-513 Bytes
Loading

‎packages/components/snapshots/Tree/Long Labels-snap.png‎

11.2 KB
Loading

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,39 @@
2525
*/
2626

2727
import React, { FC } from 'react'
28-
import styled from 'styled-components'
28+
import styled, { css } from 'styled-components'
2929
import { color, TextColorProps } from '@looker/design-tokens'
3030
import { AccordionDisclosure } from '../Accordion'
31+
import { Truncate } from '../Text'
3132
import { TreeItemLabel } from './TreeItem'
3233

3334
export interface TreeGroupProps extends TextColorProps {
35+
className?: string
3436
/**
3537
* Visible label of the TreeGroup
3638
*/
3739
label: string
38-
className?: string
40+
/**
41+
* Sets the TreeGroup's label color
42+
* Note: Will override the color prop (if provided)
43+
*/
44+
labelColor?: string
45+
/**
46+
* Prevent text wrapping on group label's and instead render truncated text
47+
**/
48+
truncate?: boolean
3949
}
4050

4151
const TreeGroupLayout: FC<TreeGroupProps> = ({
4252
children,
4353
className,
4454
label,
55+
truncate,
4556
}) => (
4657
<div className={className}>
47-
<TreeGroupLabel>{label}</TreeGroupLabel>
58+
<TreeGroupLabel>
59+
{truncate ? <Truncate>{label}</Truncate> : label}
60+
</TreeGroupLabel>
4861
{children}
4962
</div>
5063
)
@@ -58,8 +71,18 @@ export const TreeGroupLabel = styled.div`
5871
`${space.xxsmall} ${space.xxsmall} ${space.xxxsmall}`};
5972
`
6073

74+
const treeGroupLabel = (labelColor?: string) =>
75+
labelColor &&
76+
css<TreeGroupProps>`
77+
${TreeGroupLabel} {
78+
color: ${({ theme }) => theme.colors[labelColor] || labelColor};
79+
}
80+
`
81+
6182
export const TreeGroup = styled(TreeGroupLayout)`
6283
${TreeItemLabel}, ${TreeGroupLabel}, ${AccordionDisclosure} {
6384
${color}
6485
}
86+
87+
${({ labelColor }) => treeGroupLabel(labelColor)}
6588
`

‎packages/components/src/Tree/stories/ColorfulTree.story.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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 { Tree, TreeGroup, TreeItem } from '../..'
29+
30+
export const ColorfulTree = () => (
31+
<Tree defaultOpen label="Colorful Tree">
32+
<TreeGroup color="red" label="Red TreeGroup">
33+
<TreeItem icon="Calendar">
34+
Red TreeItem colored by parent TreeGroup's color prop
35+
</TreeItem>
36+
<TreeItem icon="Calendar">
37+
Red TreeItem colored by parent TreeGroup's color prop
38+
</TreeItem>
39+
<TreeItem color="green" icon="Calendar">
40+
Green TreeItem overriding parent color
41+
</TreeItem>
42+
</TreeGroup>
43+
<TreeGroup
44+
color="orange"
45+
labelColor="blue"
46+
label="Orange TreeGroup with 'blue' on labelColor prop"
47+
>
48+
<TreeItem icon="Calendar">
49+
Orange TreeItem colored by parent TreeGroup's color prop
50+
</TreeItem>
51+
<TreeItem icon="Calendar">
52+
Orange TreeItem colored by parent TreeGroup's color prop
53+
</TreeItem>
54+
<TreeItem color="purple" icon="Calendar">
55+
Purple TreeItem overriding parent color
56+
</TreeItem>
57+
</TreeGroup>
58+
</Tree>
59+
)

‎packages/components/src/Tree/stories/FieldPicker.story.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,13 +164,11 @@ export const FieldPicker = () => (
164164
chives or cranberries.
165165
</PickerItem>
166166
</TreeGroup>
167-
<TreeGroup label="MEASURES" color="keyFocus">
167+
<TreeGroup label="MEASURES" color="orange">
168168
<Tree visuallyAsBranch label="Hello">
169169
<PickerItem />
170170
</Tree>
171-
<TreeItem color="orange" icon="FieldString">
172-
Name
173-
</TreeItem>
171+
<TreeItem icon="FieldString">Name</TreeItem>
174172
<PickerItem />
175173
<PickerItem />
176174
<PickerItem />

‎packages/components/src/Tree/stories/LongLabels.story.tsx‎

Lines changed: 70 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -25,79 +25,87 @@
2525
*/
2626

2727
import React from 'react'
28-
import { Tree, TreeItem, IconButton } from '../..'
28+
import { Tree, TreeGroup, TreeItem, IconButton } from '../..'
2929

3030
export const LongLabels = () => (
3131
<Tree label="Tree with long labels " icon="ExploreOutline" defaultOpen>
3232
<Tree label="Wrapping next" icon="VisibilityOutline" defaultOpen>
33-
<Tree
34-
label="Orders Lorem ipsum dolor sit amet, consectetur adipiscing elit. Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc."
35-
icon="Table"
36-
defaultOpen
37-
>
38-
<TreeItem icon="IdeDimension">
39-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
40-
</TreeItem>
41-
<TreeItem icon="IdeDimension">
42-
Nam sit amet imperdiet lacus, eget ullamcorper nunc. Many desktop
43-
publishing packages and web page editors now use Lorem Ipsum as their
44-
default model text, and a search for 'lorem ipsum' will uncover many
45-
web sites still in their infancy.
46-
</TreeItem>
47-
<TreeItem
48-
icon="IdeDimensionGroup"
49-
detail={
50-
<IconButton
51-
icon="CircleInfo"
52-
label="Get Info"
53-
onClick={() => alert("You've got info!")}
54-
/>
55-
}
33+
<TreeGroup label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus, nulla vitae aliquam placerat, magna quam suscipit sapien, in pretium tellus dolor in nisi. Cras auctor scelerisque ipsum, sit amet faucibus magna bibendum eu. Sed sed tristique nisl, fermentum ultricies libero. Duis non ex nec felis mattis accumsan sed non.">
34+
<Tree
35+
label="Orders Lorem ipsum dolor sit amet, consectetur adipiscing elit. Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc."
36+
icon="Table"
37+
defaultOpen
5638
>
57-
Nunc convallis justo sed turpis interdum rutrum ac a neque. Contrary
58-
to popular belief, Lorem Ipsum is not simply random text. It has roots
59-
in a piece of classical Latin literature from 45 BC, making it over
60-
2000 years old.
61-
</TreeItem>
62-
</Tree>
39+
<TreeItem icon="IdeDimension">
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
41+
</TreeItem>
42+
<TreeItem icon="IdeDimension">
43+
Nam sit amet imperdiet lacus, eget ullamcorper nunc. Many desktop
44+
publishing packages and web page editors now use Lorem Ipsum as
45+
their default model text, and a search for 'lorem ipsum' will
46+
uncover many web sites still in their infancy.
47+
</TreeItem>
48+
<TreeItem
49+
icon="IdeDimensionGroup"
50+
detail={
51+
<IconButton
52+
icon="CircleInfo"
53+
label="Get Info"
54+
onClick={() => alert("You've got info!")}
55+
/>
56+
}
57+
>
58+
Nunc convallis justo sed turpis interdum rutrum ac a neque. Contrary
59+
to popular belief, Lorem Ipsum is not simply random text. It has
60+
roots in a piece of classical Latin literature from 45 BC, making it
61+
over 2000 years old.
62+
</TreeItem>
63+
</Tree>
64+
</TreeGroup>
6365
</Tree>
6466
<Tree label="Truncated text" icon="VisibilityOutline" defaultOpen>
65-
<Tree
66-
label="Users Lorem ipsum dolor sit amet, consectetur adipiscing elit. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. "
67-
icon="Table"
67+
<TreeGroup
6868
truncate
69-
defaultOpen
69+
label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus, nulla vitae aliquam placerat, magna quam suscipit sapien, in pretium tellus dolor in nisi. Cras auctor scelerisque ipsum, sit amet faucibus magna bibendum eu. Sed sed tristique nisl, fermentum ultricies libero. Duis non ex nec felis mattis accumsan sed non."
7070
>
71-
<TreeItem icon="IdeDimension" truncate>
72-
<strong>Very long text renders a tooltip.</strong> Vivamus vitae
73-
mauris et erat sagittis tempus. Mauris euismod aliquet arcu ut
74-
viverra. It has roots in a piece of classical Latin literature from 45
75-
BC, making it over 2000 years old. Richard McClintock, a Latin
76-
professor at Hampden-Sydney College in Virginia, looked up one of the
77-
more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
78-
going through the cites of the word in classical literature,
79-
discovered the undoubtable source.
80-
</TreeItem>
81-
<TreeItem
82-
icon="IdeDimension"
71+
<Tree
72+
label="Users Lorem ipsum dolor sit amet, consectetur adipiscing elit. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. "
73+
icon="Table"
8374
truncate
84-
detail={
85-
<IconButton
86-
icon="CircleInfo"
87-
label="Get Info"
88-
onClick={() => alert("You've got info!")}
89-
/>
90-
}
75+
defaultOpen
9176
>
92-
Quisque euismod risus quis sapien luctus rutrum. Cras a dui luctus,
93-
dictum elit vel, pellentesque nisl. Contrary to popular belief, Lorem
94-
Ipsum is not simply random text. It has roots in a piece of classical
95-
Latin literature from 45 BC, making it over 2000 years old.
96-
</TreeItem>
97-
<TreeItem icon="IdeDimensionGroup" truncate>
98-
This short text should not render a tooltip
99-
</TreeItem>
100-
</Tree>
77+
<TreeItem icon="IdeDimension" truncate>
78+
<strong>Very long text renders a tooltip.</strong> Vivamus vitae
79+
mauris et erat sagittis tempus. Mauris euismod aliquet arcu ut
80+
viverra. It has roots in a piece of classical Latin literature from
81+
45 BC, making it over 2000 years old. Richard McClintock, a Latin
82+
professor at Hampden-Sydney College in Virginia, looked up one of
83+
the more obscure Latin words, consectetur, from a Lorem Ipsum
84+
passage, and going through the cites of the word in classical
85+
literature, discovered the undoubtable source.
86+
</TreeItem>
87+
<TreeItem
88+
icon="IdeDimension"
89+
truncate
90+
detail={
91+
<IconButton
92+
icon="CircleInfo"
93+
label="Get Info"
94+
onClick={() => alert("You've got info!")}
95+
/>
96+
}
97+
>
98+
Quisque euismod risus quis sapien luctus rutrum. Cras a dui luctus,
99+
dictum elit vel, pellentesque nisl. Contrary to popular belief,
100+
Lorem Ipsum is not simply random text. It has roots in a piece of
101+
classical Latin literature from 45 BC, making it over 2000 years
102+
old.
103+
</TreeItem>
104+
<TreeItem icon="IdeDimensionGroup" truncate>
105+
This short text should not render a tooltip
106+
</TreeItem>
107+
</Tree>
108+
</TreeGroup>
101109
</Tree>
102110
</Tree>
103111
)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { Story } from '@storybook/react/types-6-0'
2929
import { Tree, TreeProps, TreeItem } from '..'
3030

3131
export * from './BorderRadius.story'
32+
export * from './ColorfulTree.story'
3233
export * from './FieldPicker.story'
3334
export * from './FileTree.story'
3435
export * from './Flat.story'

0 commit comments

Comments
 (0)