From 33165a55c2106a8803a5d21c281462bbc38dcc0e Mon Sep 17 00:00:00 2001
From: Jan-Gerke Salomon <Mohammer5@users.noreply.github.com>
Date: Sat, 15 Jun 2019 11:21:35 +0200
Subject: [PATCH] fix: remove spacing left to the checkbox icon in FF (#283)

* fix(checkbox): fix spacing in ff

* fix(radio): fix spacing in ff

* fix(switch): fix spacing in ff
---
 src/Checkbox/Input.js | 10 ++++------
 src/Radio/index.js    | 33 +++++++++++++++++++++++++++++++--
 src/Switch/index.js   | 34 +++++++++++++++++++++++++++++-----
 3 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/src/Checkbox/Input.js b/src/Checkbox/Input.js
index a2f149982..eb70ece27 100644
--- a/src/Checkbox/Input.js
+++ b/src/Checkbox/Input.js
@@ -23,7 +23,7 @@ export class Input extends Component {
         } = this.props
 
         return (
-            <Fragment>
+            <div>
                 <input
                     ref={this.ref}
                     type="checkbox"
@@ -38,15 +38,13 @@ export class Input extends Component {
                 />
 
                 <style jsx>{`
-                    input {
-                        display: block;
-                        opacity: 0;
+                    div {
                         width: 0;
                         height: 0;
-                        outline: 0;
+                        overflow: hidden;
                     }
                 `}</style>
-            </Fragment>
+            </div>
         )
     }
 }
diff --git a/src/Radio/index.js b/src/Radio/index.js
index d6e2a272a..6b359abfe 100644
--- a/src/Radio/index.js
+++ b/src/Radio/index.js
@@ -42,6 +42,36 @@ const icons = css.resolve`
     }
 `
 
+const Input = React.forwardRef(
+    (
+        { name, value, checked, disabled, tabIndex, onChange, onFocus, onBlur },
+        ref
+    ) => (
+        <div>
+            <input
+                type="radio"
+                ref={ref}
+                name={name}
+                value={value}
+                checked={checked}
+                disabled={disabled}
+                tabIndex={tabIndex}
+                onChange={onChange}
+                onFocus={onFocus}
+                onBlur={onBlur}
+            />
+
+            <style jsx>{`
+                div {
+                    height: 0;
+                    width: 0;
+                    overflow: hidden;
+                }
+            `}</style>
+        </div>
+    )
+)
+
 class Radio extends Component {
     ref = createRef()
 
@@ -113,9 +143,8 @@ class Radio extends Component {
                     disabled,
                 })}
             >
-                <input
+                <Input
                     ref={this.ref}
-                    type="radio"
                     name={name}
                     value={value}
                     checked={checked}
diff --git a/src/Switch/index.js b/src/Switch/index.js
index 9f0a608e4..95ed60bf1 100644
--- a/src/Switch/index.js
+++ b/src/Switch/index.js
@@ -6,6 +6,31 @@ import { SwitchIcon } from '../icons/Switch.js'
 
 import styles from './styles'
 
+const Input = React.forwardRef(
+    ({ name, disabled, checked, onChange, onFocus, onBlur }, ref) => (
+        <div>
+            <input
+                type="checkbox"
+                ref={ref}
+                name={name}
+                disabled={disabled}
+                checked={checked}
+                onChange={onChange}
+                onFocus={onFocus}
+                onBlur={onBlur}
+            />
+
+            <style jsx>{`
+                div {
+                    height: 0;
+                    width: 0;
+                    overflow: hidden;
+                }
+            `}</style>
+        </div>
+    )
+)
+
 class Switch extends Component {
     ref = createRef()
     state = {
@@ -56,15 +81,14 @@ class Switch extends Component {
                     focus,
                 })}
             >
-                <input
+                <Input
                     ref={this.ref}
-                    type="checkbox"
-                    disabled={disabled}
                     name={name}
+                    onBlur={this.onBlur}
+                    onFocus={this.onFocus}
                     checked={checked}
+                    disabled={disabled}
                     onChange={onChange}
-                    onFocus={this.onFocus}
-                    onBlur={this.onBlur}
                 />
 
                 <SwitchIcon