TreeView folder color by mperrotti · Pull Request #358 · primer/primitives

mperrotti · 2022-09-29T22:20:09Z

changeset-bot · 2022-09-29T22:20:12Z

🦋 Changeset detected

Latest commit: f9124dd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2022-09-29T22:20:25Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2022-10-12 16:54:52.065385362 +0000
+++ dist/scss/colors/_dark.scss	2022-10-12 16:54:30.637588550 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12);
+    --color-tree-view-item-directory-fill: #8b949e;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_colorblind.scss	2022-10-12 16:54:52.077385222 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2022-10-12 16:54:30.653588360 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12);
+    --color-tree-view-item-directory-fill: #8b949e;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_dimmed.scss	2022-10-12 16:54:52.069385315 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2022-10-12 16:54:30.641588502 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(144,157,171,0.12);
+    --color-tree-view-item-directory-fill: #768390;
     --color-fg-default: #adbac7;
--- base/dist/scss/colors/_dark_high_contrast.scss	2022-10-12 16:54:52.073385268 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2022-10-12 16:54:30.645588455 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: #525964;
+    --color-tree-view-item-directory-fill: #f0f3f6;
     --color-fg-default: #f0f3f6;
--- base/dist/scss/colors/_dark_tritanopia.scss	2022-10-12 16:54:52.081385175 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2022-10-12 16:54:30.653588360 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12);
+    --color-tree-view-item-directory-fill: #8b949e;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_light.scss	2022-10-12 16:54:52.029385784 +0000
+++ dist/scss/colors/_light.scss	2022-10-12 16:54:30.601588975 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
+    --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;
--- base/dist/scss/colors/_light_colorblind.scss	2022-10-12 16:54:52.049385549 +0000
+++ dist/scss/colors/_light_colorblind.scss	2022-10-12 16:54:30.617588786 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
+    --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;
--- base/dist/scss/colors/_light_high_contrast.scss	2022-10-12 16:54:52.045385596 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2022-10-12 16:54:30.613588833 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: #ced5dc;
+    --color-tree-view-item-directory-fill: #368cf9;
     --color-fg-default: #0e1116;
--- base/dist/scss/colors/_light_tritanopia.scss	2022-10-12 16:54:52.061385409 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2022-10-12 16:54:30.625588691 +0000
@@ -285,2 +285,3 @@
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
+    --color-tree-view-item-directory-fill: #54aeff;
     --color-fg-default: #24292f;

github-actions · 2022-09-29T22:21:01Z

🟢 No design token changes found

langermank · 2022-09-29T22:29:11Z

      hoverBg: alpha(get('scale.gray.2'), 0.12),
+    },
+    folder: {
+      fill: '#4579CA'


Is there a scale value this can reference?

We currently use fg-muted for dark mode directory icons in dotcom: https://cs.github.com/github/github/blob/e7f27d4cf8902dc3c9e6d8d908f066db54ab4020/app/assets/stylesheets/bundles/global/hx_color-modes.scss?q=org%3Agithub+--color-icon-directory#L34

Suggested change

fill: '#4579CA'

fill: get('fg.muted')

colebemis · 2022-09-29T23:12:08Z

+    folder: {
+      fill: get('accent.muted')


I've been calling it directory instead of folder to align with the octicon naming: https://primer.style/octicons/file-directory-fill-16

Suggested change

folder: {

fill: get('accent.muted')

directory: {

fill: get('accent.muted')

colebemis · 2022-09-29T23:14:18Z

      hoverBg: alpha(get('scale.gray.2'), 0.32),
+    },
+    folder: {
+      fill: '#79B8FF'


We currently use scale-blue-3 for light mode directory icons in dotcom: https://cs.github.com/github/github/blob/e7f27d4cf8902dc3c9e6d8d908f066db54ab4020/app/assets/stylesheets/bundles/global/hx_color-modes.scss?q=org%3Agithub+--color-icon-directory#L34

Suggested change

fill: '#79B8FF'

fill: get('scale.blue.3')

simurai

@colebemis I've been calling it directory instead of folder to align with the octicon naming: https://primer.style/octicons/file-directory-fill-16

@mperrotti Do you have a strong preference for folder? Otherwise, it seems reasonable to align the naming with Octicons (directory).

mperrotti · 2022-10-12T16:51:06Z

I agree with @colebemis that it should be directory. I'm about the push the change...

mperrotti added 2 commits September 29, 2022 18:17

adds color for treeview directory icon

fe45e98

adds changeset

f7515bc

mperrotti requested a review from a team as a code owner September 29, 2022 22:20

mperrotti requested review from a team, pksjce and simurai September 29, 2022 22:20

mperrotti mentioned this pull request Sep 29, 2022

TreeView: Add support for leading and trailing visuals primer/react#2383

Merged

6 tasks

mperrotti temporarily deployed to github-pages September 29, 2022 22:23 Inactive

langermank reviewed Sep 29, 2022

View reviewed changes

colebemis reviewed Sep 29, 2022

View reviewed changes

match folder color token to current dotcom folder color

74203b3

mperrotti temporarily deployed to github-pages September 29, 2022 23:21 Inactive

simurai reviewed Oct 7, 2022

View reviewed changes

rename 'folder' to 'directory'

f9124dd

mperrotti temporarily deployed to github-pages October 12, 2022 16:57 Inactive

colebemis approved these changes Oct 12, 2022

View reviewed changes

mperrotti merged commit a188c78 into main Oct 12, 2022

mperrotti deleted the mp/treeview-folder-color branch October 12, 2022 21:25

primer-css mentioned this pull request Oct 12, 2022

Release Tracking #355

Merged

Navigation Menu

Uh oh!

TreeView folder color - #358

TreeView folder color#358
mperrotti merged 4 commits into
mainfrom
mp/treeview-folder-color

mperrotti commented Sep 29, 2022

Uh oh!

changeset-bot Bot commented Sep 29, 2022 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 29, 2022 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 29, 2022 •

edited

Loading

Uh oh!

langermank Sep 29, 2022

Uh oh!

colebemis Sep 29, 2022 •

edited

Loading

Uh oh!

colebemis Sep 29, 2022

Uh oh!

colebemis Sep 29, 2022

Uh oh!

simurai left a comment

Uh oh!

mperrotti commented Oct 12, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

mperrotti commented Sep 29, 2022

Uh oh!

changeset-bot Bot commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No design token changes found

Uh oh!

langermank Sep 29, 2022

Choose a reason for hiding this comment

Uh oh!

colebemis Sep 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

colebemis Sep 29, 2022

Choose a reason for hiding this comment

Uh oh!

colebemis Sep 29, 2022

Choose a reason for hiding this comment

Uh oh!

simurai left a comment

Choose a reason for hiding this comment

Uh oh!

mperrotti commented Oct 12, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented Sep 29, 2022 •

edited

Loading

github-actions Bot commented Sep 29, 2022 •

edited

Loading

github-actions Bot commented Sep 29, 2022 •

edited

Loading

colebemis Sep 29, 2022 •

edited

Loading