From 97fb27c0ceeb979f22eed14567148aa16daedcd3 Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Thu, 2 Feb 2023 16:39:50 +0400
Subject: [PATCH] Align Switch with Figma (#921)

Updated Switch styles, added
[demo](https://main--638245578b47d4399fba191a.chromatic.com/?path=/story/library-switch--switch).
Closes #801
---
 .../baseline/library-switch--switch.png       | Bin 0 -> 12807 bytes
 .../src/components/switch.stories.tsx         |  30 ++++
 .../design-system/src/components/switch.tsx   | 159 ++++++++----------
 packages/design-system/src/index.ts           |   2 +-
 4 files changed, 101 insertions(+), 90 deletions(-)
 create mode 100644 .lostpixel/baseline/library-switch--switch.png
 create mode 100644 packages/design-system/src/components/switch.stories.tsx

diff --git a/.lostpixel/baseline/library-switch--switch.png b/.lostpixel/baseline/library-switch--switch.png
new file mode 100644
index 0000000000000000000000000000000000000000..d543685f32cbf3c0df5594863140d926d67c4ab1
GIT binary patch
literal 12807
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

literal 0
HcmV?d00001

diff --git a/packages/design-system/src/components/switch.stories.tsx b/packages/design-system/src/components/switch.stories.tsx
new file mode 100644
index 0000000000..15695a1ea8
--- /dev/null
+++ b/packages/design-system/src/components/switch.stories.tsx
@@ -0,0 +1,30 @@
+import { Switch } from "./switch";
+import { StorySection, StoryGrid } from "./storybook";
+
+export default {
+  title: "Library/Switch",
+};
+
+const Story = () => {
+  return (
+    <>
+      <StorySection title="Enabled">
+        <StoryGrid horizontal>
+          <Switch defaultChecked />
+          <Switch />
+        </StoryGrid>
+      </StorySection>
+      <StorySection title="Disabled">
+        <StoryGrid horizontal>
+          <Switch defaultChecked disabled />
+          <Switch disabled />
+        </StoryGrid>
+      </StorySection>
+      <StorySection title="Focussed (initially)">
+        <Switch autoFocus />
+      </StorySection>
+    </>
+  );
+};
+
+export { Story as Switch };
diff --git a/packages/design-system/src/components/switch.tsx b/packages/design-system/src/components/switch.tsx
index 8fab06370c..121a7a76ae 100644
--- a/packages/design-system/src/components/switch.tsx
+++ b/packages/design-system/src/components/switch.tsx
@@ -1,96 +1,77 @@
-import React from "react";
-import { styled, VariantProps, CSS } from "../stitches.config";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { theme } from "../stitches.config";
+/**
+ * Implementation of the "Switch" component from:
+ * https://www.figma.com/file/sfCE7iLS0k25qCxiifQNLE/%F0%9F%93%9A-Webstudio-Library?node-id=1086%3A3430&t=WVRoENiFP3BSlQa7-0
+ */
 
-const StyledThumb = styled(SwitchPrimitive.Thumb, {
-  position: "absolute",
-  left: 0,
-  width: 13,
-  height: 13,
-  backgroundColor: "white",
+import { forwardRef, type ComponentProps, type Ref } from "react";
+import * as Primitive from "@radix-ui/react-switch";
+import { type CSS, css, theme } from "../stitches.config";
+
+const padding = theme.spacing[1];
+const thumbOffset = `calc(${padding} + ${theme.spacing[2]})`;
+
+const switchStyles = css({
+  all: "unset", // reset <button>
+  boxSizing: "content-box",
+  width: theme.spacing[11],
+  height: theme.spacing[8],
+  borderRadius: theme.borderRadius.pill,
+  position: "relative",
+
+  // in Figma there's an extra container with a padding
+  // so we need a pseudo element
+  padding: padding,
+  "&:before": {
+    content: "''",
+    position: "absolute",
+    inset: padding,
+    borderRadius: theme.borderRadius.pill,
+    backgroundColor: theme.colors.backgroundNeutralDark,
+  },
+
+  "&[data-state=checked]:not([data-disabled]):before": {
+    backgroundColor: theme.colors.backgroundPrimary,
+  },
+
+  "&[data-disabled]:before": {
+    backgroundColor: theme.colors.foregroundDisabled,
+  },
+
+  "&:focus": {
+    outline: `2px solid ${theme.colors.borderFocus}`,
+  },
+});
+
+const thumbStyles = css({
+  width: theme.spacing[6],
+  height: theme.spacing[6],
   borderRadius: theme.borderRadius.round,
-  boxShadow: "rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;",
-  transition: "transform 100ms cubic-bezier(0.22, 1, 0.36, 1)",
-  transform: `translateX(${theme.spacing[1]})`,
-  willChange: "transform",
-
-  '&[data-state="checked"]': {
+  backgroundColor: theme.colors.foregroundContrastMain,
+  position: "absolute",
+  top: thumbOffset,
+  left: thumbOffset,
+  transition: "transform 100ms",
+  "&[data-state=checked]": {
     transform: `translateX(${theme.spacing[6]})`,
   },
 });
 
-const StyledSwitch = styled(SwitchPrimitive.Root, {
-  all: "unset",
-  boxSizing: "border-box",
-  userSelect: "none",
-  flexShrink: 0,
-  "&::before": {
-    boxSizing: "border-box",
-  },
-  "&::after": {
-    boxSizing: "border-box",
-  },
-
-  // Reset
-  alignItems: "center",
-  display: "inline-flex",
-  justifyContent: "center",
-  lineHeight: "1",
-  margin: "0",
-  outline: "none",
-  WebkitTapHighlightColor: "rgba(0,0,0,0)",
-
-  backgroundColor: theme.colors.slate6,
-  borderRadius: theme.borderRadius.pill,
-  position: "relative",
-  "&:focus": {
-    boxShadow: `0 0 0 2px ${theme.colors.slate8}`,
-  },
-
-  '&[data-state="checked"]': {
-    backgroundColor: theme.colors.blue9,
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.blue8}`,
-    },
-  },
-
-  variants: {
-    size: {
-      "1": {
-        width: theme.spacing[11],
-        height: theme.spacing[9],
-      },
-      "2": {
-        width: theme.spacing[17],
-        height: theme.spacing[11],
-        [`& ${StyledThumb}`]: {
-          width: 21,
-          height: 21,
-          transform: `translateX(${theme.spacing[2]})`,
-          '&[data-state="checked"]': {
-            transform: `translateX(2${theme.spacing[2]})`,
-          },
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: "1",
-  },
-});
-
-type SwitchVariants = VariantProps<typeof StyledSwitch>;
-type SwitchPrimitiveProps = React.ComponentProps<typeof SwitchPrimitive.Root>;
-type SwitchProps = SwitchPrimitiveProps & SwitchVariants & { css?: CSS };
-
-export const Switch = React.forwardRef<
-  React.ElementRef<typeof StyledSwitch>,
-  SwitchProps
->((props, forwardedRef) => (
-  <StyledSwitch {...props} ref={forwardedRef}>
-    <StyledThumb />
-  </StyledSwitch>
-));
-
+export const Switch = forwardRef(
+  (
+    {
+      className,
+      css,
+      ...props
+    }: ComponentProps<typeof Primitive.Root> & { css?: CSS },
+    ref: Ref<HTMLButtonElement>
+  ) => (
+    <Primitive.Root
+      className={switchStyles({ className, css })}
+      {...props}
+      ref={ref}
+    >
+      <Primitive.Thumb className={thumbStyles()} />
+    </Primitive.Root>
+  )
+);
 Switch.displayName = "Switch";
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 8c380395ba..20bdfadd51 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -15,6 +15,7 @@ export * from "./components/icon-button"; // mostly aligned, but needs a demo an
 export * from "./components/dialog";
 export * from "./components/floating-panel-popover";
 export { MenuItemButton } from "./components/menu";
+export * from "./components/switch";
 
 // Not aligned
 
@@ -43,7 +44,6 @@ export {
 } from "./components/enhanced-tooltip";
 export { Link } from "./components/link";
 export { Panel } from "./components/panel";
-export * from "./components/switch";
 export * from "./components/slider";
 export * from "./components/radio";
 export * from "./components/checkbox";