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
primer · Oct 18, 2022 · e00d03c · e00d03c
1 parent 3012fae
commit e00d03c
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 19 deletions.
diff --git a/.changeset/large-rabbits-hug.md b/.changeset/large-rabbits-hug.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Use correct design tokens and icons
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "@github/paste-markdown": "^1.4.0",
     "@primer/behaviors": "^1.1.1",
     "@primer/octicons-react": "^17.7.0",
-    "@primer/primitives": "7.9.0",
+    "@primer/primitives": "7.10.0",
     "@react-aria/ssr": "^3.1.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
@@ -124,8 +124,8 @@
     "@storybook/addon-essentials": "6.5.12",
     "@storybook/addon-interactions": "6.5.12",
     "@storybook/addon-links": "6.5.12",
-    "@storybook/builder-webpack5": "6.5.12",
     "@storybook/addon-storysource": "6.5.12",
+    "@storybook/builder-webpack5": "6.5.12",
     "@storybook/jest": "0.0.10",
     "@storybook/manager-webpack5": "6.5.12",
     "@storybook/react": "6.5.12",

diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
@@ -288,7 +288,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
                   borderTopLeftRadius: level === 1 ? 2 : 0,
                   borderBottomLeftRadius: level === 1 ? 2 : 0,
                   '&:hover': {
-                    backgroundColor: onSelect ? 'actionListItem.default.hoverBg' : null
+                    backgroundColor: onSelect ? 'treeViewItem.chevron.hoverBg' : null
                   }
                 }}
               >
@@ -555,8 +555,7 @@ TrailingVisual.displayName = 'TreeView.TrailingVisual'
 const DirectoryIcon = () => {
   const {isExpanded} = React.useContext(ItemContext)
   const icon = isExpanded ? FileDirectoryOpenFillIcon : FileDirectoryFillIcon
-  // TODO: Use correct color
-  return <StyledOcticon icon={icon} />
+  return <StyledOcticon icon={icon} color="treeViewItem.directory.fill" />
 }
 
 // ----------------------------------------------------------------------------

diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -5,7 +5,7 @@ exports[`snapshot theme-preval.js 1`] = `
 
 // this file was prevaled
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2022-07-25 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2022-10-17 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 var themePreval = {
   "animation": {
     "easeOutCubic": "cubic-bezier(0.33, 1, 0.68, 1)"
@@ -384,6 +384,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "rgba(208,215,222,0.32)"
+          },
+          "directory": {
+            "fill": "#54aeff"
+          }
+        },
         "fg": {
           "default": "#24292f",
           "muted": "#57606a",
@@ -879,6 +887,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "#ced5dc"
+          },
+          "directory": {
+            "fill": "#368cf9"
+          }
+        },
         "fg": {
           "default": "#0e1116",
           "muted": "#0e1116",
@@ -1374,6 +1390,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "rgba(208,215,222,0.32)"
+          },
+          "directory": {
+            "fill": "#54aeff"
+          }
+        },
         "fg": {
           "default": "#24292f",
           "muted": "#57606a",
@@ -1869,6 +1893,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "rgba(208,215,222,0.32)"
+          },
+          "directory": {
+            "fill": "#54aeff"
+          }
+        },
         "fg": {
           "default": "#24292f",
           "muted": "#57606a",
@@ -2364,6 +2396,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "rgba(177,186,196,0.12)"
+          },
+          "directory": {
+            "fill": "#8b949e"
+          }
+        },
         "fg": {
           "default": "#c9d1d9",
           "muted": "#8b949e",
@@ -2457,7 +2497,7 @@ var themePreval = {
       },
       "shadows": {
         "checks": {
-          "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
+          "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
         },
         "mktg": {
           "btn": {
@@ -2862,6 +2902,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "rgba(144,157,171,0.12)"
+          },
+          "directory": {
+            "fill": "#768390"
+          }
+        },
         "fg": {
           "default": "#adbac7",
           "muted": "#768390",
@@ -2955,7 +3003,7 @@ var themePreval = {
       },
       "shadows": {
         "checks": {
-          "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
+          "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
         },
         "mktg": {
           "btn": {
@@ -3360,6 +3408,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "#525964"
+          },
+          "directory": {
+            "fill": "#f0f3f6"
+          }
+        },
         "fg": {
           "default": "#f0f3f6",
           "muted": "#f0f3f6",
@@ -3453,7 +3509,7 @@ var themePreval = {
       },
       "shadows": {
         "checks": {
-          "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
+          "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
         },
         "mktg": {
           "btn": {
@@ -3858,6 +3914,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "rgba(177,186,196,0.12)"
+          },
+          "directory": {
+            "fill": "#8b949e"
+          }
+        },
         "fg": {
           "default": "#c9d1d9",
           "muted": "#8b949e",
@@ -3951,7 +4015,7 @@ var themePreval = {
       },
       "shadows": {
         "checks": {
-          "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
+          "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
         },
         "mktg": {
           "btn": {
@@ -4356,6 +4420,14 @@ var themePreval = {
             }
           }
         },
+        "treeViewItem": {
+          "chevron": {
+            "hoverBg": "rgba(177,186,196,0.12)"
+          },
+          "directory": {
+            "fill": "#8b949e"
+          }
+        },
         "fg": {
           "default": "#c9d1d9",
           "muted": "#8b949e",
@@ -4449,7 +4521,7 @@ var themePreval = {
       },
       "shadows": {
         "checks": {
-          "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
+          "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)"
         },
         "mktg": {
           "btn": {

diff --git a/src/theme-preval.js b/src/theme-preval.js
@@ -1,6 +1,6 @@
 // @preval
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2022-07-25 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2022-10-17 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 
 const {default: primitives} = require('@primer/primitives')
 const {partitionColors, fontStack, omitScale} = require('./utils/theme')