From 8552d365eee059c16d911309c2cb952b6eb53c3f Mon Sep 17 00:00:00 2001
From: Peterlits Zo <peterlitszo@gmail.com>
Date: Sat, 19 Feb 2022 07:24:02 +0800
Subject: [PATCH 1/4] feat(components): Add `labelPosition` for `Switch`.

Switch has a prop `label` to set its label. And its position is
defaultly at the end. To put the label at the start of `Switch` is
hard.

So I add `labelPosition`, using `gap: 2` instead of the `mr: 2` to make
sure that those children's space is right.

By the way, I move those inner components outside, to make those code
more clear than before. I hope that works.
---
 packages/components/src/Switch.tsx            | 69 +++++++++++--------
 packages/docs/src/pages/components/switch.mdx | 19 +++++
 2 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/packages/components/src/Switch.tsx b/packages/components/src/Switch.tsx
index 803548edb..f8ffbdaf3 100644
--- a/packages/components/src/Switch.tsx
+++ b/packages/components/src/Switch.tsx
@@ -12,6 +12,7 @@ const SIZE = 18
 
 export interface SwitchProps
   extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {
+  labelPosition?: 'start' | 'end',
   label?: string
 }
 
@@ -23,7 +24,7 @@ export interface SwitchProps
  */
 export const Switch: ForwardRef<HTMLInputElement, SwitchProps> =
   React.forwardRef(function Switch(
-    { className, label, sx, variant = 'switch', ...rest },
+    { className, label, sx, labelPosition = 'end', variant = 'switch', ...rest },
     ref
   ) {
     const __css: ThemeUICSSObject = {
@@ -33,7 +34,6 @@ export const Switch: ForwardRef<HTMLInputElement, SwitchProps> =
       borderRadius: SIZE,
       height: SIZE + GUTTER * 2,
       width: SIZE * 2 + GUTTER * 2,
-      mr: 2,
       'input:disabled ~ &': {
         opacity: 0.5,
         cursor: 'not-allowed',
@@ -58,34 +58,45 @@ export const Switch: ForwardRef<HTMLInputElement, SwitchProps> =
       },
     }
 
+    // Inner really checkbox (but hidden)
+    const reallyHiddenCheckbox = (
+      <Box
+        ref={ref}
+        as="input"
+        type="checkbox"
+        aria-label={label}
+        {...rest}
+        sx={{
+          position: 'absolute',
+          opacity: 0,
+          zIndex: -1,
+          width: 1,
+          height: 1,
+          overflow: 'hidden',
+        }}
+        {...__internalProps({ __themeKey: 'forms' })}
+      />
+    );
+
+    // Switch just for show
+    const switchForShow = (
+      <Box
+        css={{ padding: GUTTER }}
+        variant={variant}
+        className={className}
+        sx={sx}
+        {...__internalProps({ __themeKey: 'forms', __css })}
+      >
+        <Box />
+      </Box>
+    );
+
     return (
-      <Label sx={{ cursor: 'pointer' }}>
-        <Box
-          ref={ref}
-          as="input"
-          type="checkbox"
-          aria-label={label}
-          {...rest}
-          sx={{
-            position: 'absolute',
-            opacity: 0,
-            zIndex: -1,
-            width: 1,
-            height: 1,
-            overflow: 'hidden',
-          }}
-          {...__internalProps({ __themeKey: 'forms' })}
-        />
-        <Box
-          css={{ padding: GUTTER }}
-          variant={variant}
-          className={className}
-          sx={sx}
-          {...__internalProps({ __themeKey: 'forms', __css })}
-        >
-          <Box />
-        </Box>
-        <span>{label}</span>
+      <Label sx={{ cursor: 'pointer', gap: 2 }}>
+        { labelPosition === 'start' && label ? <span>{label}</span> : null }
+        {reallyHiddenCheckbox}
+        {switchForShow}
+        { labelPosition === 'end' && label ? <span>{label}</span> : null }
       </Label>
     )
   })
diff --git a/packages/docs/src/pages/components/switch.mdx b/packages/docs/src/pages/components/switch.mdx
index 118b14eea..b9eb6b3d2 100644
--- a/packages/docs/src/pages/components/switch.mdx
+++ b/packages/docs/src/pages/components/switch.mdx
@@ -2,6 +2,8 @@
 title: Switch
 ---
 
+import Note from '../../components/note.js';
+
 # Switch
 
 Form switch input component
@@ -42,8 +44,25 @@ To show different style based on the input state, you can use
 />
 ```
 
+## `labelPosition`
+
+May you want to change the label's position, so there are props
+`labelPosition`. Its value can be `'start'`, `'end'`(default).
+
+```jsx live=true
+<Switch label="Click Me!" labelPosition='start' />
+```
+
+```jsx live=true
+<Switch label="Do Not Click Me!" labelPosition='end' />
+```
+
 ## External label
 
+<Note>
+Try to use `labelPosition` prop rather than another Label layer!
+</Note>
+
 Even though the Switch component already renders a label, but you can also
 opt-in for an external label instead.
 

From 671d32a9a9c0e1c12fd7191180726480d037953e Mon Sep 17 00:00:00 2001
From: Peterlits Zo <peterlitszo@gmail.com>
Date: Sat, 19 Feb 2022 00:11:51 +0800
Subject: [PATCH 2/4] test(components): update test for `Switch`.

Update its snapshot. It using `gap` rather than `margin` to set
elements' space. And remove useless `span` label if the label is
undefined.
---
 packages/components/test/__snapshots__/index.tsx.snap | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/test/__snapshots__/index.tsx.snap b/packages/components/test/__snapshots__/index.tsx.snap
index fc540e978..7fca45150 100644
--- a/packages/components/test/__snapshots__/index.tsx.snap
+++ b/packages/components/test/__snapshots__/index.tsx.snap
@@ -1390,6 +1390,7 @@ exports[`Switch renders 1`] = `
   display: -ms-flexbox;
   display: flex;
   cursor: pointer;
+  gap: 8px;
 }
 
 .emotion-1 {
@@ -1416,7 +1417,6 @@ exports[`Switch renders 1`] = `
   border-radius: 18px;
   height: 22px;
   width: 40px;
-  margin-right: 8px;
   padding: 2px;
 }
 
@@ -1479,7 +1479,6 @@ input:checked~.emotion-2>div {
       className="emotion-3"
     />
   </div>
-  <span />
 </label>
 `;
 

From 0e9f6d25884a200fa755e4ecdc92a8ccb66e49f4 Mon Sep 17 00:00:00 2001
From: Peterlits Zo <peterlitszo@gmail.com>
Date: Sat, 19 Feb 2022 00:26:49 +0800
Subject: [PATCH 3/4] test(components): Add test for `Switch` with `label` or
 `labelPosition`.

---
 .../test/__snapshots__/index.tsx.snap         | 321 ++++++++++++++++++
 packages/components/test/index.tsx            |  30 ++
 2 files changed, 351 insertions(+)

diff --git a/packages/components/test/__snapshots__/index.tsx.snap b/packages/components/test/__snapshots__/index.tsx.snap
index 7fca45150..514d31084 100644
--- a/packages/components/test/__snapshots__/index.tsx.snap
+++ b/packages/components/test/__snapshots__/index.tsx.snap
@@ -1482,6 +1482,327 @@ input:checked~.emotion-2>div {
 </label>
 `;
 
+exports[`Switch renders width labelPosition end 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 8px;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: gray;
+  border-radius: 18px;
+  height: 22px;
+  width: 40px;
+  padding: 2px;
+}
+
+input:disabled~.emotion-2 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emotion-2>div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  -webkit-transform: translateX(0%);
+  -moz-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  -webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+}
+
+input:checked~.emotion-2 {
+  background-color: primary;
+}
+
+input:checked~.emotion-2>div {
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+<label
+  className="emotion-0"
+>
+  <input
+    aria-label="Are you OK? Hello!"
+    className="emotion-1"
+    type="checkbox"
+  />
+  <div
+    className="emotion-2"
+  >
+    <div
+      className="emotion-3"
+    />
+  </div>
+  <span>
+    Are you OK? Hello!
+  </span>
+</label>
+`;
+
+exports[`Switch renders width labelPosition start 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 8px;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: gray;
+  border-radius: 18px;
+  height: 22px;
+  width: 40px;
+  padding: 2px;
+}
+
+input:disabled~.emotion-2 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emotion-2>div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  -webkit-transform: translateX(0%);
+  -moz-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  -webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+}
+
+input:checked~.emotion-2 {
+  background-color: primary;
+}
+
+input:checked~.emotion-2>div {
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+<label
+  className="emotion-0"
+>
+  <span>
+    Thanks you! Thank you very much
+  </span>
+  <input
+    aria-label="Thanks you! Thank you very much"
+    className="emotion-1"
+    type="checkbox"
+  />
+  <div
+    className="emotion-2"
+  >
+    <div
+      className="emotion-3"
+    />
+  </div>
+</label>
+`;
+
+exports[`Switch renders with label 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 8px;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: gray;
+  border-radius: 18px;
+  height: 22px;
+  width: 40px;
+  padding: 2px;
+}
+
+input:disabled~.emotion-2 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.emotion-2>div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+  -webkit-transform: translateX(0%);
+  -moz-transform: translateX(0%);
+  -ms-transform: translateX(0%);
+  transform: translateX(0%);
+  -webkit-transition: -webkit-transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  transition: transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+}
+
+input:checked~.emotion-2 {
+  background-color: primary;
+}
+
+input:checked~.emotion-2>div {
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+<label
+  className="emotion-0"
+>
+  <input
+    aria-label="Hello"
+    className="emotion-1"
+    type="checkbox"
+  />
+  <div
+    className="emotion-2"
+  >
+    <div
+      className="emotion-3"
+    />
+  </div>
+  <span>
+    Hello
+  </span>
+</label>
+`;
+
 exports[`Text renders 1`] = `
 .emotion-0 {
   box-sizing: border-box;
diff --git a/packages/components/test/index.tsx b/packages/components/test/index.tsx
index 0b17c31bf..a70b3ee3e 100644
--- a/packages/components/test/index.tsx
+++ b/packages/components/test/index.tsx
@@ -499,4 +499,34 @@ describe('Switch', () => {
     )
     expect(json).toMatchSnapshot()
   })
+
+  test('renders with label', () => {
+    const json = renderJSON(
+      <ThemeUIProvider theme={theme}>
+        <Switch label="Hello" />
+      </ThemeUIProvider>
+    )
+    expect(json).toMatchSnapshot()
+  })
+
+  test('renders width labelPosition end', () => {
+    const json = renderJSON(
+      <ThemeUIProvider theme={theme}>
+        <Switch label="Are you OK? Hello!" labelPosition="end" />
+      </ThemeUIProvider>
+    )
+    expect(json).toMatchSnapshot()
+  })
+
+  test('renders width labelPosition start', () => {
+    const json = renderJSON(
+      <ThemeUIProvider theme={theme}>
+        <Switch
+          label="Thanks you! Thank you very much"
+          labelPosition="start"
+        />
+      </ThemeUIProvider>
+    )
+    expect(json).toMatchSnapshot()
+  })
 })

From ec31b712e0c3d166b9daf750bc71e1f4fb10788b Mon Sep 17 00:00:00 2001
From: Peterlits Zo <peterlitszo@gmail.com>
Date: Mon, 18 Apr 2022 13:12:13 +0800
Subject: [PATCH 4/4] docs(components): Update document for `Switch`

Make the document more readable.
---
 packages/docs/src/pages/components/switch.mdx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/docs/src/pages/components/switch.mdx b/packages/docs/src/pages/components/switch.mdx
index b9eb6b3d2..7178cf027 100644
--- a/packages/docs/src/pages/components/switch.mdx
+++ b/packages/docs/src/pages/components/switch.mdx
@@ -2,7 +2,7 @@
 title: Switch
 ---
 
-import Note from '../../components/note.js';
+import Note from '../../components/note.js'
 
 # Switch
 
@@ -46,22 +46,21 @@ To show different style based on the input state, you can use
 
 ## `labelPosition`
 
-May you want to change the label's position, so there are props
-`labelPosition`. Its value can be `'start'`, `'end'`(default).
+By default, the switch comes first, with the label to the right of it. If you'd
+like to change the ordering, set the `labelPosition` prop to `"start"`, or the
+default value, `"end"`.
 
 ```jsx live=true
-<Switch label="Click Me!" labelPosition='start' />
+<Switch label="Use 24-Hour Time" labelPosition="start" />
 ```
 
 ```jsx live=true
-<Switch label="Do Not Click Me!" labelPosition='end' />
+<Switch label="Auto-Correction" labelPosition="end" />
 ```
 
 ## External label
 
-<Note>
-Try to use `labelPosition` prop rather than another Label layer!
-</Note>
+<Note>Try to use `labelPosition` prop rather than another Label layer.</Note>
 
 Even though the Switch component already renders a label, but you can also
 opt-in for an external label instead.
@@ -76,7 +75,8 @@ import { Box, Flex, Label, Switch } from 'theme-ui'
     justifyContent: 'space-between',
     alignItems: 'center',
     py: 4,
-  }}>
+  }}
+>
   <Label htmlFor="enable-email-alerts" sx={{ flex: 1 }}>
     Enable email alerts?
   </Label>