Updates to support new ToggleSwitch visual design #477

mperrotti · 2023-01-30T23:23:00Z

Summary

Updated switchTrack and switchKnob resting background and border colors.
Added the following tokens to support the new design
- switchTrack.activeBg
- switchTrack.disabledBg
- switchTrack.fg
- switchTrack.disabledFg
- switchTrack.checked.fg
- switchTrack.checked.disabledFg
- switchKnob.bg
- switchKnob.border
- switchKnob.disabledBg
- switchKnob.checked.disabledBorder

What should reviewers focus on?

Does it look good in the React storybook preview deployment?

Steps to test:

Look at the preview Storybook deployment from the PR (link coming soon)

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change
Verify the design tokens changed in this PR are expected using the diffing results in this PR

changeset-bot · 2023-01-30T23:23:02Z

🦋 Changeset detected

Latest commit: 7d5f4ed

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	Patch

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 · 2023-01-30T23:23:17Z

Variables changed

--- base/dist/scss/colors/_dark.scss	2023-02-10 19:19:57.307601458 +0000
+++ dist/scss/colors/_dark.scss	2023-02-10 19:18:45.194761215 +0000
@@ -261,4 +261,9 @@
     --color-action-list-item-danger-hover-text: #ff7b72;
-    --color-switch-track-bg: #010409;
-    --color-switch-track-border: #6e7681;
+    --color-switch-track-bg: rgba(110,118,129,0.1);
+    --color-switch-track-hover-bg: hsla(215,8%,72%,0.1);
+    --color-switch-track-active-bg: rgba(110,118,129,0.4);
+    --color-switch-track-disabled-bg: #21262d;
+    --color-switch-track-fg: #8b949e;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(31,111,235,0.35);
@@ -266,6 +271,13 @@
     --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-segmented-control-bg: #161b22;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0d1117;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #161b22;
+    --color-switch-knob-checked-bg: #0d1117;
+    --color-switch-knob-checked-disabled-bg: #161b22;
+    --color-switch-knob-checked-border: rgba(31,111,235,0.35);
+    --color-segmented-control-bg: rgba(110,118,129,0.1);
+    --color-segmented-control-button-bg: #0d1117;
     --color-segmented-control-button-hover-bg: #30363d;
--- base/dist/scss/colors/_dark_colorblind.scss	2023-02-10 19:19:57.323601647 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2023-02-10 19:18:45.214761450 +0000
@@ -261,4 +261,9 @@
     --color-action-list-item-danger-hover-text: #ec8e2c;
-    --color-switch-track-bg: #010409;
-    --color-switch-track-border: #6e7681;
+    --color-switch-track-bg: rgba(110,118,129,0.1);
+    --color-switch-track-hover-bg: hsla(215,8%,72%,0.1);
+    --color-switch-track-active-bg: rgba(110,118,129,0.4);
+    --color-switch-track-disabled-bg: #21262d;
+    --color-switch-track-fg: #8b949e;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(31,111,235,0.35);
@@ -266,6 +271,13 @@
     --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-segmented-control-bg: #161b22;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0d1117;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #161b22;
+    --color-switch-knob-checked-bg: #0d1117;
+    --color-switch-knob-checked-disabled-bg: #161b22;
+    --color-switch-knob-checked-border: rgba(31,111,235,0.35);
+    --color-segmented-control-bg: rgba(110,118,129,0.1);
+    --color-segmented-control-button-bg: #0d1117;
     --color-segmented-control-button-hover-bg: #30363d;
--- base/dist/scss/colors/_dark_dimmed.scss	2023-02-10 19:19:57.315601552 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2023-02-10 19:18:45.198761262 +0000
@@ -261,4 +261,9 @@
     --color-action-list-item-danger-hover-text: #f47067;
-    --color-switch-track-bg: #1c2128;
-    --color-switch-track-border: #636e7b;
+    --color-switch-track-bg: rgba(99,110,123,0.1);
+    --color-switch-track-hover-bg: hsla(213,11%,69%,0.1);
+    --color-switch-track-active-bg: rgba(99,110,123,0.4);
+    --color-switch-track-disabled-bg: #373e47;
+    --color-switch-track-fg: #768390;
+    --color-switch-track-disabled-fg: #1c2128;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(49,109,202,0.35);
@@ -266,6 +271,13 @@
     --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-segmented-control-bg: #2d333b;
+    --color-switch-track-checked-fg: #cdd9e5;
+    --color-switch-track-checked-disabled-fg: #1c2128;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #22272e;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #2d333b;
+    --color-switch-knob-checked-bg: #22272e;
+    --color-switch-knob-checked-disabled-bg: #2d333b;
+    --color-switch-knob-checked-border: rgba(49,109,202,0.35);
+    --color-segmented-control-bg: rgba(99,110,123,0.1);
+    --color-segmented-control-button-bg: #22272e;
     --color-segmented-control-button-hover-bg: #444c56;
--- base/dist/scss/colors/_dark_high_contrast.scss	2023-02-10 19:19:57.319601599 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2023-02-10 19:18:45.206761356 +0000
@@ -261,11 +261,23 @@
     --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-bg: #9ea7b3;
+    --color-switch-track-hover-bg: hsla(214,12%,61%,1);
+    --color-switch-track-active-bg: hsla(214,12%,58%,1);
+    --color-switch-track-disabled-bg: #272b33;
+    --color-switch-track-fg: #0a0c10;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #409eff;
     --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-segmented-control-bg: #272b33;
+    --color-switch-track-checked-fg: #0a0c10;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0a0c10;
+    --color-switch-knob-border: #9ea7b3;
+    --color-switch-knob-disabled-bg: #272b33;
+    --color-switch-knob-checked-bg: #0a0c10;
+    --color-switch-knob-checked-disabled-bg: #272b33;
+    --color-switch-knob-checked-border: #409eff;
+    --color-segmented-control-bg: rgba(158,167,179,0.1);
+    --color-segmented-control-button-bg: #0a0c10;
     --color-segmented-control-button-hover-bg: #525964;
--- base/dist/scss/colors/_dark_tritanopia.scss	2023-02-10 19:19:57.327601694 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2023-02-10 19:18:45.218761497 +0000
@@ -261,4 +261,9 @@
     --color-action-list-item-danger-hover-text: #ff7b72;
-    --color-switch-track-bg: #010409;
-    --color-switch-track-border: #6e7681;
+    --color-switch-track-bg: rgba(110,118,129,0.1);
+    --color-switch-track-hover-bg: hsla(215,8%,72%,0.1);
+    --color-switch-track-active-bg: rgba(110,118,129,0.4);
+    --color-switch-track-disabled-bg: #21262d;
+    --color-switch-track-fg: #8b949e;
+    --color-switch-track-disabled-fg: #010409;
+    --color-switch-track-border: rgba(0,0,0,0);
     --color-switch-track-checked-bg: rgba(31,111,235,0.35);
@@ -266,6 +271,13 @@
     --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-segmented-control-bg: #161b22;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #010409;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #0d1117;
+    --color-switch-knob-border: #606771;
+    --color-switch-knob-disabled-bg: #161b22;
+    --color-switch-knob-checked-bg: #0d1117;
+    --color-switch-knob-checked-disabled-bg: #161b22;
+    --color-switch-knob-checked-border: rgba(31,111,235,0.35);
+    --color-segmented-control-bg: rgba(110,118,129,0.1);
+    --color-segmented-control-button-bg: #0d1117;
     --color-segmented-control-button-hover-bg: #30363d;
--- base/dist/scss/colors/_light.scss	2023-02-10 19:19:57.275601080 +0000
+++ dist/scss/colors/_light.scss	2023-02-10 19:18:45.162760838 +0000
@@ -262,13 +262,25 @@
     --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-switch-track-hover-bg: hsla(210,24%,90%,1);
+    --color-switch-track-active-bg: hsla(210,24%,88%,1);
+    --color-switch-track-disabled-bg: #8c959f;
+    --color-switch-track-fg: #57606a;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0969da;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #f6f8fa;
+    --color-switch-knob-border: #858F99;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #f6f8fa;
+    --color-switch-knob-checked-border: #0969da;
     --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
     --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
-    --color-segmented-control-button-selected-border: #6e7781;
+    --color-segmented-control-button-selected-border: #8c959f;
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
--- base/dist/scss/colors/_light_colorblind.scss	2023-02-10 19:19:57.299601363 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-02-10 19:18:45.186761120 +0000
@@ -262,13 +262,25 @@
     --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-switch-track-hover-bg: hsla(210,24%,90%,1);
+    --color-switch-track-active-bg: hsla(210,24%,88%,1);
+    --color-switch-track-disabled-bg: #8c959f;
+    --color-switch-track-fg: #57606a;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0969da;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #f6f8fa;
+    --color-switch-knob-border: #858F99;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #f6f8fa;
+    --color-switch-knob-checked-border: #0969da;
     --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
     --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
-    --color-segmented-control-button-selected-border: #6e7781;
+    --color-segmented-control-button-selected-border: #8c959f;
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
--- base/dist/scss/colors/_light_high_contrast.scss	2023-02-10 19:19:57.287601222 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-02-10 19:18:45.178761026 +0000
@@ -261,14 +261,26 @@
     --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-switch-track-bg: #66707b;
+    --color-switch-track-hover-bg: hsla(211,9%,47%,1);
+    --color-switch-track-active-bg: hsla(211,9%,49%,1);
+    --color-switch-track-disabled-bg: #88929d;
+    --color-switch-track-fg: #ffffff;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0349b4;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #e7ecf0;
+    --color-switch-knob-border: #20252c;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #e7ecf0;
+    --color-switch-knob-checked-border: #0349b4;
     --color-segmented-control-bg: #e7ecf0;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(172,182,192,0.2);
     --color-segmented-control-button-active-bg: rgba(172,182,192,0.4);
-    --color-segmented-control-button-selected-border: #66707b;
+    --color-segmented-control-button-selected-border: #88929d;
     --color-tree-view-item-chevron-hover-bg: #ced5dc;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-02-10 19:19:57.303601411 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-02-10 19:18:45.190761167 +0000
@@ -262,13 +262,25 @@
     --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-switch-track-hover-bg: hsla(210,24%,90%,1);
+    --color-switch-track-active-bg: hsla(210,24%,88%,1);
+    --color-switch-track-disabled-bg: #8c959f;
+    --color-switch-track-fg: #57606a;
+    --color-switch-track-disabled-fg: #ffffff;
+    --color-switch-track-border: rgba(0,0,0,0);
+    --color-switch-track-checked-bg: #0969da;
+    --color-switch-track-checked-hover-bg: #0860CA;
+    --color-switch-track-checked-active-bg: #0757BA;
+    --color-switch-track-checked-fg: #ffffff;
+    --color-switch-track-checked-disabled-fg: #ffffff;
+    --color-switch-track-checked-border: rgba(0,0,0,0);
+    --color-switch-knob-bg: #ffffff;
+    --color-switch-knob-disabled-bg: #f6f8fa;
+    --color-switch-knob-border: #858F99;
+    --color-switch-knob-checked-bg: #ffffff;
+    --color-switch-knob-checked-disabled-bg: #f6f8fa;
+    --color-switch-knob-checked-border: #0969da;
     --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-bg: #ffffff;
     --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
     --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
-    --color-segmented-control-button-selected-border: #6e7781;
+    --color-segmented-control-button-selected-border: #8c959f;
     --color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);

github-actions · 2023-01-30T23:25:22Z

🟢 No design token changes found

lukasoppermann

LGTM

…imitives into mp/toggle-switch-style-updates

…rol color primitives

…per design feedback

…itch-style-updates

langermank

Looks good to me! Thanks for the helpful comments ❤️

…imitives into mp/toggle-switch-style-updates

updates primitives to support new ToggleSwitch visual design

c87a650

mperrotti requested a review from a team as a code owner January 30, 2023 23:23

mperrotti requested review from a team, JoshBowdenConcepts and lukasoppermann January 30, 2023 23:23

mperrotti mentioned this pull request Jan 30, 2023

Updates ToggleSwitch to look less dimensional and more minimal primer/react#2843

Merged

5 tasks

mperrotti temporarily deployed to github-pages January 30, 2023 23:28 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview January 30, 2023 23:28 Inactive

Merge branch 'main' into mp/toggle-switch-style-updates

02c4318

mperrotti temporarily deployed to github-pages January 30, 2023 23:35 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview January 30, 2023 23:36 Inactive

lukasoppermann approved these changes Jan 31, 2023

View reviewed changes

mperrotti added 3 commits February 3, 2023 17:06

Merge branch 'main' into mp/toggle-switch-style-updates

3fa92c8

rm unnecessary token definitions

372ad6c

Merge branch 'mp/toggle-switch-style-updates' of github.com:primer/pr…

a90b714

…imitives into mp/toggle-switch-style-updates

github-actions bot temporarily deployed to storybook-preview February 3, 2023 22:11 Inactive

mperrotti temporarily deployed to github-pages February 3, 2023 22:14 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview February 3, 2023 22:14 Inactive

updates checked track bg colors to align with latest thinking on cont…

dd08026

…rol color primitives

mperrotti temporarily deployed to github-pages February 4, 2023 00:28 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview February 4, 2023 00:28 Inactive

mperrotti added 2 commits February 8, 2023 18:40

updates track hover and active bg colors and rm knob hover bg colors …

055ca6a

…per design feedback

Merge branch 'main' of github.com:primer/primitives into mp/toggle-sw…

31d8a11

…itch-style-updates

mperrotti temporarily deployed to github-pages February 8, 2023 23:46 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview February 8, 2023 23:47 Inactive

langermank approved these changes Feb 9, 2023

View reviewed changes

Create .changeset/small-boxes-live.md

de3df3f

langermank temporarily deployed to github-pages February 9, 2023 20:38 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview February 9, 2023 20:39 Inactive

mperrotti added 2 commits February 10, 2023 13:49

adds back removed toggle switch colors to avoid a breaking change

6339791

Merge branch 'mp/toggle-switch-style-updates' of github.com:primer/pr…

e8a55aa

…imitives into mp/toggle-switch-style-updates

mperrotti temporarily deployed to github-pages February 10, 2023 18:55 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview February 10, 2023 18:56 Inactive

updates segmented control colors to be correct

7d5f4ed

mperrotti temporarily deployed to github-pages February 10, 2023 19:21 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview February 10, 2023 19:22 Inactive

langermank merged commit 39940de into main Feb 10, 2023

langermank deleted the mp/toggle-switch-style-updates branch February 10, 2023 19:25

primer-css mentioned this pull request Feb 10, 2023

Release Tracking #491

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Updates to support new ToggleSwitch visual design #477

Updates to support new ToggleSwitch visual design #477

Uh oh!

mperrotti commented Jan 30, 2023 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 30, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Jan 30, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Jan 30, 2023 •

edited

Loading

Uh oh!

lukasoppermann left a comment

Uh oh!

langermank left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Updates to support new ToggleSwitch visual design #477

Updates to support new ToggleSwitch visual design #477

Uh oh!

Conversation

mperrotti commented Jan 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What should reviewers focus on?

Steps to test:

Contributor checklist:

Reviewer checklist:

Uh oh!

changeset-bot bot commented Jan 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jan 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No design token changes found

Uh oh!

lukasoppermann left a comment

Choose a reason for hiding this comment

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mperrotti commented Jan 30, 2023 •

edited

Loading

changeset-bot bot commented Jan 30, 2023 •

edited

Loading

github-actions bot commented Jan 30, 2023 •

edited

Loading

github-actions bot commented Jan 30, 2023 •

edited

Loading