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
dhis2 · Jun 15, 2019 · 33165a5 · 33165a5
1 parent 812ad24
commit 33165a5
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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