Add component primitives for the toggle switch component #309

mperrotti · 2022-03-21T16:02:02Z

changeset-bot · 2022-03-21T16:02:05Z

🦋 Changeset detected

Latest commit: 6fb5edd

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

vercel · 2022-03-21T16:02:05Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primitives/EYyXmwb6pqPEejbxWVz58yuoLwQt
✅ Preview: https://primitives-git-mp-toggle-switch-colors-primer.vercel.app

github-actions · 2022-03-21T16:02:56Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2022-03-21 17:48:44.087944166 +0000
+++ dist/scss/colors/_dark.scss	2022-03-21 17:48:33.667804850 +0000
@@ -272,2 +272,10 @@
     --color-action-list-item-danger-hover-text: #ff7b72;
+    --color-switch-track-bg: #010409;
+    --color-switch-track-border: #6e7681;
+    --color-switch-track-checked-bg: rgba(31,111,235,0.35);
+    --color-switch-track-checked-hover-bg: rgba(31,111,235,0.5);
+    --color-switch-track-checked-active-bg: rgba(31,111,235,0.65);
+    --color-switch-track-checked-border: #58a6ff;
+    --color-switch-knob-checked-bg: #1f6feb;
+    --color-switch-knob-checked-disabled-bg: #484f58;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_colorblind.scss	2022-03-21 17:48:44.107944417 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2022-03-21 17:48:33.687805140 +0000
@@ -272,2 +272,10 @@
     --color-action-list-item-danger-hover-text: #ec8e2c;
+    --color-switch-track-bg: #010409;
+    --color-switch-track-border: #6e7681;
+    --color-switch-track-checked-bg: rgba(31,111,235,0.35);
+    --color-switch-track-checked-hover-bg: rgba(31,111,235,0.5);
+    --color-switch-track-checked-active-bg: rgba(31,111,235,0.65);
+    --color-switch-track-checked-border: #58a6ff;
+    --color-switch-knob-checked-bg: #1f6feb;
+    --color-switch-knob-checked-disabled-bg: #484f58;
     --color-fg-default: #c9d1d9;
--- base/dist/scss/colors/_dark_dimmed.scss	2022-03-21 17:48:44.095944267 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2022-03-21 17:48:33.675804966 +0000
@@ -272,2 +272,10 @@
     --color-action-list-item-danger-hover-text: #f47067;
+    --color-switch-track-bg: #1c2128;
+    --color-switch-track-border: #636e7b;
+    --color-switch-track-checked-bg: rgba(49,109,202,0.35);
+    --color-switch-track-checked-hover-bg: rgba(49,109,202,0.5);
+    --color-switch-track-checked-active-bg: rgba(49,109,202,0.65);
+    --color-switch-track-checked-border: #539bf5;
+    --color-switch-knob-checked-bg: #316dca;
+    --color-switch-knob-checked-disabled-bg: #545d68;
     --color-fg-default: #adbac7;
--- base/dist/scss/colors/_dark_high_contrast.scss	2022-03-21 17:48:44.099944317 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2022-03-21 17:48:33.683805082 +0000
@@ -272,2 +272,10 @@
     --color-action-list-item-danger-hover-text: #0a0c10;
+    --color-switch-track-bg: #010409;
+    --color-switch-track-border: #7a828e;
+    --color-switch-track-checked-bg: rgba(64,158,255,0.35);
+    --color-switch-track-checked-hover-bg: rgba(64,158,255,0.5);
+    --color-switch-track-checked-active-bg: rgba(64,158,255,0.65);
+    --color-switch-track-checked-border: #409eff;
+    --color-switch-knob-checked-bg: #409eff;
+    --color-switch-knob-checked-disabled-bg: #7a828e;
     --color-fg-default: #f0f3f6;
--- base/dist/scss/colors/_light.scss	2022-03-21 17:48:44.063943864 +0000
+++ dist/scss/colors/_light.scss	2022-03-21 17:48:33.643804502 +0000
@@ -272,2 +272,10 @@
     --color-action-list-item-danger-hover-text: #cf222e;
+    --color-switch-track-bg: #eaeef2;
+    --color-switch-track-border: #afb8c1;
+    --color-switch-track-checked-bg: #ddf4ff;
+    --color-switch-track-checked-hover-bg: #b6e3ff;
+    --color-switch-track-checked-active-bg: #80ccff;
+    --color-switch-track-checked-border: #54aeff;
+    --color-switch-knob-checked-bg: #0969da;
+    --color-switch-knob-checked-disabled-bg: #6e7781;
     --color-fg-default: #24292f;
--- base/dist/scss/colors/_light_colorblind.scss	2022-03-21 17:48:44.083944116 +0000
+++ dist/scss/colors/_light_colorblind.scss	2022-03-21 17:48:33.663804792 +0000
@@ -272,2 +272,10 @@
     --color-action-list-item-danger-hover-text: #b35900;
+    --color-switch-track-bg: #eaeef2;
+    --color-switch-track-border: #afb8c1;
+    --color-switch-track-checked-bg: #ddf4ff;
+    --color-switch-track-checked-hover-bg: #b6e3ff;
+    --color-switch-track-checked-active-bg: #80ccff;
+    --color-switch-track-checked-border: #54aeff;
+    --color-switch-knob-checked-bg: #0969da;
+    --color-switch-knob-checked-disabled-bg: #6e7781;
     --color-fg-default: #24292f;
--- base/dist/scss/colors/_light_high_contrast.scss	2022-03-21 17:48:44.075944015 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2022-03-21 17:48:33.651804618 +0000
@@ -272,2 +272,10 @@
     --color-action-list-item-danger-hover-text: #ffffff;
+    --color-switch-track-bg: #ffffff;
+    --color-switch-track-border: #20252C;
+    --color-switch-track-checked-bg: #dff7ff;
+    --color-switch-track-checked-hover-bg: #9cd7ff;
+    --color-switch-track-checked-active-bg: #67b3fd;
+    --color-switch-track-checked-border: #0349b4;
+    --color-switch-knob-checked-bg: #0349b4;
+    --color-switch-knob-checked-disabled-bg: #66707B;
     --color-fg-default: #0E1116;

siddharthkp · 2022-03-21T16:12:54Z

data/colors/vars/component_dark.ts

+    }
+  },
+
+  switchKnob: {


Curious: How do we decide the nesting structure in primitives, are there any rules/ADRs around it?

switch: { track: {}, knob: {} }

vs

switchTrack: {}, switchKnob: {}

I'm not aware of any rules around this. I considered nesting switch.track and switch.knob too, but decided to keep it flatter.

I don't feel strongly either way.

We'll have rules for the new tokens + future color tokens 😄 since there are no rules or guidelines right now, I don't think we need to be strict about naming conventions with color. We'll have some cleanup to do in the future!

langermank · 2022-03-21T19:11:02Z

data/colors/vars/component_dark.ts

+    }
+  },
+
+  switchKnob: {


We'll have rules for the new tokens + future color tokens 😄 since there are no rules or guidelines right now, I don't think we need to be strict about naming conventions with color. We'll have some cleanup to do in the future!

langermank · 2022-03-21T19:13:15Z

data/colors/vars/component_dark.ts

+
+  switchTrack: {
+    bg: get('scale.black'),
+    border: get('scale.gray.4'),


Is this new border color one that we want to share with all form controls? Like input and select? Thinking about the contrast ratio for our standard input border..

I was worried about making that decision in the scope of this PR. These changes just support the ToggleSwitch component, and I think we'll want to zoom out and look at all form inputs.

Here's what I proposed to Allie and Chelsea:

Thanks for that context! That makes sense to me as well. If you add a more generic token now without actually rolling it out to more form components or documenting it, I could see that being confusing for folks utilizing tokens in other apps. Renaming and re-mapping tokens later isn't a huge lift 😄

adds component primitives for the toggle switch component

e18dca2

mperrotti requested a review from a team as a code owner March 21, 2022 16:02

mperrotti requested review from a team, langermank and siddharthkp March 21, 2022 16:02

adds changeset

c794d96

vercel bot temporarily deployed to Preview March 21, 2022 16:02 Inactive

adds missing dark mode colors

6aa4d97

vercel bot temporarily deployed to Preview March 21, 2022 16:11 Inactive

siddharthkp reviewed Mar 21, 2022

View reviewed changes

tone down contrast for dark scheme switch border

6fb5edd

vercel bot temporarily deployed to Preview March 21, 2022 17:47 Inactive

mperrotti mentioned this pull request Mar 21, 2022

Add ToggleSwitch component primer/react#1933

Merged

6 tasks

langermank reviewed Mar 21, 2022

View reviewed changes

siddharthkp approved these changes Mar 22, 2022

View reviewed changes

mperrotti merged commit 4588342 into main Mar 22, 2022

mperrotti deleted the mp/toggle-switch-colors branch March 22, 2022 14:19

primer-css mentioned this pull request Mar 22, 2022

Release Tracking #308

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add component primitives for the toggle switch component #309

Add component primitives for the toggle switch component #309

mperrotti commented Mar 21, 2022

changeset-bot bot commented Mar 21, 2022 •

edited

Loading

vercel bot commented Mar 21, 2022 •

edited

Loading

github-actions bot commented Mar 21, 2022 •

edited

Loading

siddharthkp Mar 21, 2022 •

edited

Loading

mperrotti Mar 21, 2022

langermank Mar 21, 2022

langermank Mar 21, 2022

langermank Mar 21, 2022

mperrotti Mar 21, 2022

langermank Mar 21, 2022

Add component primitives for the toggle switch component #309

Add component primitives for the toggle switch component #309

Conversation

mperrotti commented Mar 21, 2022

changeset-bot bot commented Mar 21, 2022 • edited Loading

🦋 Changeset detected

vercel bot commented Mar 21, 2022 • edited Loading

github-actions bot commented Mar 21, 2022 • edited Loading

siddharthkp Mar 21, 2022 • edited Loading

Choose a reason for hiding this comment

mperrotti Mar 21, 2022

Choose a reason for hiding this comment

langermank Mar 21, 2022

Choose a reason for hiding this comment

langermank Mar 21, 2022

Choose a reason for hiding this comment

langermank Mar 21, 2022

Choose a reason for hiding this comment

mperrotti Mar 21, 2022

Choose a reason for hiding this comment

langermank Mar 21, 2022

Choose a reason for hiding this comment

changeset-bot bot commented Mar 21, 2022 •

edited

Loading

vercel bot commented Mar 21, 2022 •

edited

Loading

github-actions bot commented Mar 21, 2022 •

edited

Loading

siddharthkp Mar 21, 2022 •

edited

Loading