Skip to content

Commit e00d03c

Browse files
colebemiscolebemis
authored
TreeView: Use correct design tokens and icons (#2446)
* Update primitives and octicons * use new primitives and octicons * Create large-rabbits-hug.md * Update snapshot test * Use loose version for @primer/octicons-react
1 parent 3012fae commit e00d03c

File tree

6 files changed

+95
-19
lines changed

6 files changed

+95
-19
lines changed

‎.changeset/large-rabbits-hug.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
TreeView: Use correct design tokens and icons

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
"@github/paste-markdown": "^1.4.0",
8484
"@primer/behaviors": "^1.1.1",
8585
"@primer/octicons-react": "^17.7.0",
86-
"@primer/primitives": "7.9.0",
86+
"@primer/primitives": "7.10.0",
8787
"@react-aria/ssr": "^3.1.0",
8888
"@styled-system/css": "^5.1.5",
8989
"@styled-system/props": "^5.1.5",
@@ -124,8 +124,8 @@
124124
"@storybook/addon-essentials": "6.5.12",
125125
"@storybook/addon-interactions": "6.5.12",
126126
"@storybook/addon-links": "6.5.12",
127-
"@storybook/builder-webpack5": "6.5.12",
128127
"@storybook/addon-storysource": "6.5.12",
128+
"@storybook/builder-webpack5": "6.5.12",
129129
"@storybook/jest": "0.0.10",
130130
"@storybook/manager-webpack5": "6.5.12",
131131
"@storybook/react": "6.5.12",

‎src/TreeView/TreeView.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
288288
borderTopLeftRadius: level === 1 ? 2 : 0,
289289
borderBottomLeftRadius: level === 1 ? 2 : 0,
290290
'&:hover': {
291-
backgroundColor: onSelect ? 'actionListItem.default.hoverBg' : null
291+
backgroundColor: onSelect ? 'treeViewItem.chevron.hoverBg' : null
292292
}
293293
}}
294294
>
@@ -555,8 +555,7 @@ TrailingVisual.displayName = 'TreeView.TrailingVisual'
555555
const DirectoryIcon = () => {
556556
const {isExpanded} = React.useContext(ItemContext)
557557
const icon = isExpanded ? FileDirectoryOpenFillIcon : FileDirectoryFillIcon
558-
// TODO: Use correct color
559-
return <StyledOcticon icon={icon} />
558+
return <StyledOcticon icon={icon} color="treeViewItem.directory.fill" />
560559
}
561560

562561
// ----------------------------------------------------------------------------

‎src/__tests__/__snapshots__/themePreval.test.ts.snap‎

Lines changed: 78 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`snapshot theme-preval.js 1`] = `
55
66
// this file was prevaled
77
// This file needs to be a JavaScript file using CommonJS to be compatible with preval
8-
// Cache bust: 2022-07-25 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
8+
// Cache bust: 2022-10-17 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
99
var themePreval = {
1010
"animation": {
1111
"easeOutCubic": "cubic-bezier(0.33, 1, 0.68, 1)"
@@ -384,6 +384,14 @@ var themePreval = {
384384
}
385385
}
386386
},
387+
"treeViewItem": {
388+
"chevron": {
389+
"hoverBg": "rgba(208,215,222,0.32)"
390+
},
391+
"directory": {
392+
"fill": "#54aeff"
393+
}
394+
},
387395
"fg": {
388396
"default": "#24292f",
389397
"muted": "#57606a",
@@ -879,6 +887,14 @@ var themePreval = {
879887
}
880888
}
881889
},
890+
"treeViewItem": {
891+
"chevron": {
892+
"hoverBg": "#ced5dc"
893+
},
894+
"directory": {
895+
"fill": "#368cf9"
896+
}
897+
},
882898
"fg": {
883899
"default": "#0e1116",
884900
"muted": "#0e1116",
@@ -1374,6 +1390,14 @@ var themePreval = {
13741390
}
13751391
}
13761392
},
1393+
"treeViewItem": {
1394+
"chevron": {
1395+
"hoverBg": "rgba(208,215,222,0.32)"
1396+
},
1397+
"directory": {
1398+
"fill": "#54aeff"
1399+
}
1400+
},
13771401
"fg": {
13781402
"default": "#24292f",
13791403
"muted": "#57606a",
@@ -1869,6 +1893,14 @@ var themePreval = {
18691893
}
18701894
}
18711895
},
1896+
"treeViewItem": {
1897+
"chevron": {
1898+
"hoverBg": "rgba(208,215,222,0.32)"
1899+
},
1900+
"directory": {
1901+
"fill": "#54aeff"
1902+
}
1903+
},
18721904
"fg": {
18731905
"default": "#24292f",
18741906
"muted": "#57606a",
@@ -2364,6 +2396,14 @@ var themePreval = {
23642396
}
23652397
}
23662398
},
2399+
"treeViewItem": {
2400+
"chevron": {
2401+
"hoverBg": "rgba(177,186,196,0.12)"
2402+
},
2403+
"directory": {
2404+
"fill": "#8b949e"
2405+
}
2406+
},
23672407
"fg": {
23682408
"default": "#c9d1d9",
23692409
"muted": "#8b949e",
@@ -2457,7 +2497,7 @@ var themePreval = {
24572497
},
24582498
"shadows": {
24592499
"checks": {
2460-
"inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
2500+
"inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
24612501
},
24622502
"mktg": {
24632503
"btn": {
@@ -2862,6 +2902,14 @@ var themePreval = {
28622902
}
28632903
}
28642904
},
2905+
"treeViewItem": {
2906+
"chevron": {
2907+
"hoverBg": "rgba(144,157,171,0.12)"
2908+
},
2909+
"directory": {
2910+
"fill": "#768390"
2911+
}
2912+
},
28652913
"fg": {
28662914
"default": "#adbac7",
28672915
"muted": "#768390",
@@ -2955,7 +3003,7 @@ var themePreval = {
29553003
},
29563004
"shadows": {
29573005
"checks": {
2958-
"inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
3006+
"inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
29593007
},
29603008
"mktg": {
29613009
"btn": {
@@ -3360,6 +3408,14 @@ var themePreval = {
33603408
}
33613409
}
33623410
},
3411+
"treeViewItem": {
3412+
"chevron": {
3413+
"hoverBg": "#525964"
3414+
},
3415+
"directory": {
3416+
"fill": "#f0f3f6"
3417+
}
3418+
},
33633419
"fg": {
33643420
"default": "#f0f3f6",
33653421
"muted": "#f0f3f6",
@@ -3453,7 +3509,7 @@ var themePreval = {
34533509
},
34543510
"shadows": {
34553511
"checks": {
3456-
"inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
3512+
"inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
34573513
},
34583514
"mktg": {
34593515
"btn": {
@@ -3858,6 +3914,14 @@ var themePreval = {
38583914
}
38593915
}
38603916
},
3917+
"treeViewItem": {
3918+
"chevron": {
3919+
"hoverBg": "rgba(177,186,196,0.12)"
3920+
},
3921+
"directory": {
3922+
"fill": "#8b949e"
3923+
}
3924+
},
38613925
"fg": {
38623926
"default": "#c9d1d9",
38633927
"muted": "#8b949e",
@@ -3951,7 +4015,7 @@ var themePreval = {
39514015
},
39524016
"shadows": {
39534017
"checks": {
3954-
"inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
4018+
"inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
39554019
},
39564020
"mktg": {
39574021
"btn": {
@@ -4356,6 +4420,14 @@ var themePreval = {
43564420
}
43574421
}
43584422
},
4423+
"treeViewItem": {
4424+
"chevron": {
4425+
"hoverBg": "rgba(177,186,196,0.12)"
4426+
},
4427+
"directory": {
4428+
"fill": "#8b949e"
4429+
}
4430+
},
43594431
"fg": {
43604432
"default": "#c9d1d9",
43614433
"muted": "#8b949e",
@@ -4449,7 +4521,7 @@ var themePreval = {
44494521
},
44504522
"shadows": {
44514523
"checks": {
4452-
"inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
4524+
"inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
44534525
},
44544526
"mktg": {
44554527
"btn": {

‎src/theme-preval.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// @preval
22
// This file needs to be a JavaScript file using CommonJS to be compatible with preval
3-
// Cache bust: 2022-07-25 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
3+
// Cache bust: 2022-10-17 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
44

55
const {default: primitives} = require('@primer/primitives')
66
const {partitionColors, fontStack, omitScale} = require('./utils/theme')

0 commit comments

Comments
 (0)