Skip to content

Commit b33d361

Browse files
Elliot Parkgithub-actions[bot]Luke Bowerman
authored
feat(Tree): Added "no-icon" option to forceLabelPadding prop (#2329)
* Added 'no-icon' option to forceLabelPadding prop * chore: image-snapshot updates (#2330) Co-authored-by: ElliotTheHuman <[email protected]> * Update packages/components/src/Tree/types.ts Co-authored-by: Luke Bowerman <[email protected]> * Simplified label padding spacer logic * Updated docs * Updated generateIndent logic to automatically align based on parent Tree's icon or no icon status Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Luke Bowerman <[email protected]>
1 parent a68ef47 commit b33d361

File tree

7 files changed

+42
-13
lines changed

7 files changed

+42
-13
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ const TreeLayout: FC<TreeProps> = ({
178178
dividers={dividers}
179179
forceLabelPadding={forceLabelPadding}
180180
hovered={hovered}
181+
icon={icon}
181182
iconGap={iconGap}
182183
iconSize={iconSize}
183184
labelBackgroundOnly={hasLabelBackgroundOnly}

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import { FlexibleColor, ListItemStatefulProps } from '../List/types'
3737
import { listItemBackgroundColor } from '../List/utils'
3838
import { List, ListItem } from '../List'
3939
import { listItemLabelCSS } from '../List/ListItemLabel'
40-
import { IconPlaceholder, IconSize } from '../Icon'
40+
import { IconPlaceholder, IconSize, IconType } from '../Icon'
4141
import { AccordionIndicator } from '../Accordion/AccordionDisclosureLayout'
4242
import { TreeItem } from './TreeItem'
4343
import { TreeBranch } from './TreeBranch'
@@ -56,6 +56,7 @@ type TreeStyleProps = ListItemStatefulProps &
5656
depth: number
5757
dividers?: boolean
5858
forceLabelPadding?: boolean
59+
icon?: IconType
5960
iconGap: SpacingSizes
6061
iconSize: IconSize
6162
labelBackgroundOnly?: boolean
@@ -88,11 +89,13 @@ const dividersCSS = css`
8889

8990
interface TreeItemIndentProps extends GenerateIndentProps {
9091
labelBackgroundOnly: boolean
92+
icon?: IconType
9193
}
9294

9395
const treeItemIndent = ({
9496
depth,
9597
forceLabelPadding,
98+
icon,
9699
iconGap,
97100
iconSize,
98101
indicatorSize,
@@ -106,6 +109,7 @@ const treeItemIndent = ({
106109
${generateIndent({
107110
depth: depth + 2,
108111
forceLabelPadding,
112+
icon,
109113
iconGap,
110114
iconSize,
111115
indicatorSize,
@@ -118,6 +122,7 @@ const treeItemIndent = ({
118122
generateIndent({
119123
depth: depth + 2,
120124
forceLabelPadding,
125+
icon,
121126
iconGap,
122127
iconSize,
123128
indicatorSize,
@@ -179,9 +184,10 @@ export const TreeStyle = styled(TreeStyleLayout)`
179184
Tree's padding-right is handled by the internal item
180185
*/
181186
padding-right: 0;
182-
${({ depth, iconSize, theme }) =>
187+
${({ depth, icon, iconSize, theme }) =>
183188
generateIndent({
184189
depth,
190+
icon,
185191
iconGap: 'none',
186192
iconSize,
187193
indicatorSize: indicatorContainerSize,
@@ -197,6 +203,7 @@ export const TreeStyle = styled(TreeStyleLayout)`
197203
${({
198204
depth,
199205
forceLabelPadding,
206+
icon,
200207
iconGap,
201208
iconSize,
202209
labelBackgroundOnly,
@@ -205,6 +212,7 @@ export const TreeStyle = styled(TreeStyleLayout)`
205212
treeItemIndent({
206213
depth,
207214
forceLabelPadding,
215+
icon,
208216
iconGap,
209217
iconSize,
210218
indicatorSize: indicatorContainerSize,
@@ -214,10 +222,11 @@ export const TreeStyle = styled(TreeStyleLayout)`
214222
}
215223
216224
> ${TreeBranch} {
217-
${({ depth, forceLabelPadding, iconGap, iconSize, theme }) =>
225+
${({ depth, forceLabelPadding, icon, iconGap, iconSize, theme }) =>
218226
generateIndent({
219227
depth: depth + 2,
220228
forceLabelPadding,
229+
icon,
221230
iconGap,
222231
iconSize,
223232
indicatorSize: indicatorContainerSize,
@@ -234,6 +243,7 @@ export const TreeStyle = styled(TreeStyleLayout)`
234243
${({
235244
depth,
236245
forceLabelPadding,
246+
icon,
237247
iconGap,
238248
iconSize,
239249
labelBackgroundOnly,
@@ -242,6 +252,7 @@ export const TreeStyle = styled(TreeStyleLayout)`
242252
treeItemIndent({
243253
depth,
244254
forceLabelPadding,
255+
icon,
245256
iconGap,
246257
iconSize,
247258
indicatorSize: indicatorContainerSize,
@@ -251,10 +262,11 @@ export const TreeStyle = styled(TreeStyleLayout)`
251262
}
252263
253264
> ${TreeBranch} {
254-
${({ depth, forceLabelPadding, iconGap, iconSize, theme }) =>
265+
${({ depth, forceLabelPadding, icon, iconGap, iconSize, theme }) =>
255266
generateIndent({
256267
depth: depth + 2,
257268
forceLabelPadding,
269+
icon,
258270
iconGap,
259271
iconSize,
260272
indicatorSize: indicatorContainerSize,

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,12 @@ import { Tree, TreeCollection, TreeItem } from '..'
3131
export const ForceLabelPadding = () => (
3232
<TreeCollection>
3333
<Tree icon={<Folder />} label="Folders" defaultOpen>
34-
<Tree icon={<Folder />} label="Personal" defaultOpen forceLabelPadding>
34+
<Tree icon={<Folder />} label="With Icon" defaultOpen forceLabelPadding>
35+
<TreeItem>Performance</TreeItem>
36+
<TreeItem>Sales</TreeItem>
37+
<TreeItem>Metrics</TreeItem>
38+
</Tree>
39+
<Tree label="Without Icon" defaultOpen forceLabelPadding>
3540
<TreeItem>Performance</TreeItem>
3641
<TreeItem>Sales</TreeItem>
3742
<TreeItem>Metrics</TreeItem>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export type TreeProps = Omit<
5555
*/
5656
dividers?: boolean
5757
/**
58-
* If true, child `TreeItem` elements will receive additional indent padding to align parent `Tree` and child `TreeItem` labels.
59-
* Note: This should only be used when the parent `Tree` has an icon and the child `TreeItem`s do not.
58+
* If true, child `TreeItem` elements will receive additional indent padding to align parent `Tree` (with an optional `icon` prop) and child `TreeItem` labels.
59+
* If "no-icon", child `TreeItem` elements will receive additional indent padding to align parent `Tree` (without an optional `icon` prop) and child `TreeItem` labels.
6060
* @default false
6161
*/
6262
forceLabelPadding?: boolean

‎packages/components/src/Tree/utils/generateIndent.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@
2626

2727
import { css } from 'styled-components'
2828
import { SpacingSizes, Theme } from '@looker/design-tokens'
29-
import { IconSize } from '../../Icon'
29+
import { IconSize, IconType } from '../../Icon'
3030

3131
export interface GenerateIndentProps {
3232
depth: number
3333
forceLabelPadding?: boolean
34+
icon?: IconType
3435
iconSize: IconSize
3536
iconGap: SpacingSizes
3637
indicatorSize: IconSize
@@ -43,6 +44,7 @@ export const iconGapAdjuster = '2px'
4344
export const generateIndent = ({
4445
depth,
4546
forceLabelPadding,
47+
icon,
4648
iconGap,
4749
iconSize,
4850
indicatorSize,
@@ -51,10 +53,14 @@ export const generateIndent = ({
5153
const { space, sizes } = theme
5254

5355
const indicatorIconSize = sizes[indicatorSize]
54-
const forceLabelPaddingSpacer = `(${sizes[iconSize]} + ${space[iconGap]} - ${iconGapAdjuster})`
55-
const indentCalculation = `(${indicatorIconSize}) * ${
56-
forceLabelPadding ? depth - 1 : depth
57-
} + ${forceLabelPadding ? forceLabelPaddingSpacer : '0px'}`
56+
57+
const renderedDepth = forceLabelPadding ? depth - 1 : depth
58+
const forceLabelPaddingSpacer =
59+
forceLabelPadding && icon
60+
? `(${sizes[iconSize]} + ${space[iconGap]} - ${iconGapAdjuster})`
61+
: '0px'
62+
63+
const indentCalculation = `${indicatorIconSize} * ${renderedDepth} + ${forceLabelPaddingSpacer}`
5864

5965
return css`
6066
padding-left: calc(${indentCalculation});

‎snapshots/Tree/Force Label Padding-snap.png‎

5.48 KB
Loading

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ The `toggleOpen` prop should receive a function that has one parameter: a boolea
280280

281281
## Aligning Trees with icons and TreeItems without icons
282282

283-
Use the `forceLabelPadding` prop to align the labels of parent `Tree`s with optional icons and child `TreeItem`s without optional icons.
283+
Use the `forceLabelPadding` prop to align the labels of parent `Tree`s with the labels of child `TreeItem`s without optional icons.
284284

285285
```jsx
286286
<TreeCollection>
@@ -289,6 +289,11 @@ Use the `forceLabelPadding` prop to align the labels of parent `Tree`s with opti
289289
<TreeItem>Swiss</TreeItem>
290290
<TreeItem>Cheddar</TreeItem>
291291
</Tree>
292+
<Tree label="Cheeses" defaultOpen forceLabelPadding>
293+
<TreeItem>Gouda</TreeItem>
294+
<TreeItem>Swiss</TreeItem>
295+
<TreeItem>Cheddar</TreeItem>
296+
</Tree>
292297
</TreeCollection>
293298
```
294299

0 commit comments

Comments
 (0)