Update TreeView VRT snapshots (#5277)

* testing * test(vrt): update snapshots * actually fix the problem * Create clean-coats-lie.md --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Nov 13, 2024 · a9088e6 · a9088e6
1 parent 729c0fa
commit a9088e6
Show file tree

Hide file tree

Showing 37 changed files with 14 additions and 9 deletions.
diff --git a/.changeset/clean-coats-lie.md b/.changeset/clean-coats-lie.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix `TreeViewItem` folder icon color in legacy fallback theme + update VRT
diff --git a/...omponents/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png b/...omponents/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png
diff --git a/...ts/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png b/...ts/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png
diff --git a/...onents/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png b/...onents/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png
diff --git a/...snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png b/...snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png
diff --git a/...omponents/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png b/...omponents/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png
diff --git a/...mponents/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png b/...mponents/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png
diff --git a/...nents/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png b/...nents/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png
diff --git a/...napshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png b/...napshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png
diff --git a/...mponents/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png b/...mponents/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png
diff --git a/...TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png b/...TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png
diff --git a/...nts/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png b/...nts/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png
diff --git a/...eView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png b/...eView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png
diff --git a/...components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png b/...components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png
diff --git a/...TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png b/...TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png
diff --git a/...reeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png b/...reeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png
diff --git a/...View.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png b/...View.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png
diff --git a/...omponents/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png b/...omponents/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png
diff --git a/...reeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png b/...reeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png
diff --git a/...ts/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png b/...ts/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png
diff --git a/...onents/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png b/...onents/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png
diff --git a/...TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png b/...TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png
diff --git a/...ts/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png b/...ts/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png
diff --git a/...ts/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png b/...ts/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png
diff --git a/...s/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png b/...s/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png
diff --git a/...reeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png b/...reeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png
diff --git a/...s/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png b/...s/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png
diff --git a/...s/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png b/...s/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png
diff --git a/packages/react/src/legacy-theme/ts/colors/dark.ts b/packages/react/src/legacy-theme/ts/colors/dark.ts
@@ -425,7 +425,7 @@ const colors = {
         'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #848d97))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #848d97))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts b/packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts
@@ -427,7 +427,7 @@ const colors = {
         'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts b/packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts
@@ -426,7 +426,7 @@ const colors = {
         'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(144,157,171,0.12)))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #768390))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #768390))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts b/packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts
@@ -419,7 +419,7 @@ const colors = {
       hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, #525964))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #f0f3f6))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #f0f3f6))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts b/packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts
@@ -426,7 +426,7 @@ const colors = {
         'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(177,186,196,0.12)))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-directory-fill, #8b949e))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/light.ts b/packages/react/src/legacy-theme/ts/colors/light.ts
@@ -430,7 +430,7 @@ const colors = {
         'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts b/packages/react/src/legacy-theme/ts/colors/light_colorblind.ts
@@ -430,7 +430,7 @@ const colors = {
         'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts b/packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts
@@ -421,7 +421,7 @@ const colors = {
       hoverBg: 'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, #ced5dc))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #368cf9))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #368cf9))',
     },
   },
   fg: {

diff --git a/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts b/packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts
@@ -430,7 +430,7 @@ const colors = {
         'var(--control-transparent-bgColor-hover, var(--color-tree-view-item-chevron-hover-bg, rgba(208,215,222,0.32)))',
     },
     directory: {
-      fill: 'var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
+      fill: 'var(--treeViewItem-leadingVisual-iconColor-rest, var(--color-tree-view-item-chevron-directory-fill, #54aeff))',
     },
   },
   fg: {