Drop checkbox label hacks in favor of -moz-appearance

Fixes #59
FirefoxUX · Nov 8, 2018 · 922df6c · 922df6c
1 parent 2ecfb8d
commit 922df6c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 52 deletions.
diff --git a/components/Checkbox/README.md b/components/Checkbox/README.md
@@ -2,26 +2,32 @@
 
 ## Styles
 
-### With label
+### Without label
+
+```html
+<input type="checkbox" />
+```
+
+### Without label (disabled)
 
-The checkbox is contained within the label element in order to activate a
+```html
-hidden checkbox overlaid with custom styling.
+<input type="checkbox" disabled />
+```
+
+### With label
 
 ```html
 <label class="checkbox">
-    <input type="checkbox" class="checkbox__field" />
+  <input type="checkbox" class="checkbox__field" />
-    <span class="checkbox__label">Example label</span>
+  <span class="checkbox__label">Example label</span>
 </label>
 ```
-### Without label
 
-**Note:** Even without a visible text label, the checkbox component still
+### With label (disabled)
-requires the markup for a label. This is used as an anchor to apply the custom
-styling while keeping the checkbox accessible.
 
 ```html
-<label class="checkbox">
+<label class="checkbox checkbox--disabled">
-    <input type="checkbox" class="checkbox__field" />
+  <input type="checkbox" disabled class="checkbox__field" />
-    <span class="checkbox__label"></span>
+  <span class="checkbox__label">Disabled checkbox</span>
 </label>
 ```
diff --git a/components/Checkbox/index.css b/components/Checkbox/index.css
@@ -1,63 +1,45 @@
-.checkbox {
+input[type="checkbox"] {
-  position: relative;
+  -moz-appearance: none;
-
+  -webkit-appearance: none;
-  /* TODO: Figure out if inline-block and 100% width the right thing for
+  background-color: var(--grey-90-a10);
-     providing consistent click target */
+  border-radius: 2px;
-  display: inline-block;
+  border: 1px solid var(--grey-90-a30);
-  width: 100%;
-}
-
-.checkbox--disabled {
-  opacity: .4;
-}
-
-.checkbox__field {
-  opacity: 0;
-  padding-right: 4px;
-  width: 16px;
   height: 16px;
+  margin: -2px 4px;
+  width: 16px;
 }
 
-.checkbox__label::after {
+input[type="checkbox"]:disabled {
-  position: absolute;
+  opacity: .4;
-  cursor: pointer;
-  left: 2px;
-  bottom: 2px;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  margin-left: 0;
-  margin-right: 0;
-  content: "";
-  background-color: var(--grey-90-a10);
-  border: 1px solid var(--grey-90-a30);
 }
 
-.checkbox__label:hover::after {
+input[type="checkbox"]:hover {
   background-color: var(--grey-90-a20);
 }
 
-.checkbox__label:active::after {
+input[type="checkbox"]:active {
   background-color: var(--grey-90-a30);
 }
 
-.checkbox__field:focus + .checkbox__label::after {
+input[type="checkbox"]:focus {
   border: none;
-  left: 3px;
-  bottom: 3px;
   box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, .3);
 }
 
-.checkbox__field:checked + .checkbox__label::after {
+input[type="checkbox"]:checked {
   background-color: var(--blue-60);
   background-image: url(./checkbox-check-16.svg);
+  background-position: center center;
 }
 
-.checkbox__field:checked + .checkbox__label:hover::after {
+input[type="checkbox"]:checked:hover {
   background-color: var(--blue-70);
 }
 
-.checkbox__field:checked + .checkbox__label:active::after {
+input[type="checkbox"]:checked:active {
   background-color: var(--blue-80);
 }
+
+label.checkbox--disabled > span {
+  opacity: .4;
+}
diff --git a/components/Checkbox/index.js b/components/Checkbox/index.js
@@ -4,11 +4,13 @@ import classNames from "classnames";
 import "./index.css";
 
 export const Checkbox = ({ disabled, label, ...props }) => {
-  return (
+  return label ? (
     <label className={classNames("checkbox", { "checkbox--disabled": disabled })}>
       <input {...props} disabled={disabled} className="checkbox__field" type="checkbox" />
       <span className="checkbox__label">{label}</span>
     </label>
+  ) : (
+    <input {...props} disabled={disabled} type="checkbox" />
   );
 };