feat(Switch): 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.

Author: PeterlitsZo

packages/components/index.d.ts

@@ -398,4 +398,5 @@ export const Switch: ForwardRef<HTMLInputElement, SwitchProps>
 export interface SwitchProps
   extends Assign<React.ComponentProps<'input'>, BoxOwnProps> {
   label?: string
+  labelPosition?: 'start' | 'end'
 }

packages/components/src/Switch.js

@@ -6,11 +6,12 @@ const GUTTER = 2
 const SIZE = 18
 
 export const Switch = React.forwardRef(function Switch(
-  { className, label, sx, variant = 'switch', ...props },
+  { className, label, labelPosition = 'end', sx, variant = 'switch', ...props },
   ref
 ) {
-  return (
-    <Label sx={{ cursor: 'pointer' }}>
+  // Inner really checkbox (but hidden).
+  const ReallyHiddenCheckbox = ({ ref, label, ...props }) => {
+    return (
       <Box
         ref={ref}
         as="input"
@@ -27,6 +28,12 @@ export const Switch = React.forwardRef(function Switch(
           overflow: 'hidden',
         }}
       />
+    );
+  };
+
+  // Switch just for show
+  const SwitchForShow = ({ variant, className, sx }) => {
+    return (
       <Box
         css={{
           padding: GUTTER,
@@ -42,7 +49,6 @@ export const Switch = React.forwardRef(function Switch(
           borderRadius: SIZE,
           height: SIZE + GUTTER * 2,
           width: SIZE * 2 + GUTTER * 2,
-          mr: 2,
           'input:disabled ~ &': {
             opacity: 0.5,
             cursor: 'not-allowed',
@@ -69,7 +75,15 @@ export const Switch = React.forwardRef(function Switch(
       >
         <Box />
       </Box>
-      <span>{label}</span>
+    )
+  };
+
+  return (
+    <Label sx={{ cursor: 'pointer', gap: 2 }}>
+      { labelPosition === 'start' && label ? <span>{label}</span> : null }
+      <ReallyHiddenCheckbox ref={ref} label={label} {...props} />
+      <SwitchForShow variant={variant} className={className} sx={sx} />
+      { labelPosition === 'end' && label ? <span>{label}</span> : null }
     </Label>
   )
 })

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.