Merge pull request #5481 from metabase/checkbox-tweaks

clean up checkbox component

frontend/src/metabase/admin/people/components/GroupSelect.jsx

@@ -12,7 +12,10 @@ const GroupOption = ({ group, selectedGroups = {}, onGroupChange }) => {
     return (
         <div className={cx("GroupOption flex align-center p1 px2", { "cursor-pointer": !disabled })} onClick={() => !disabled && onGroupChange(group, !selected) }>
             <span className={cx("pr1", getGroupColor(group), { disabled })}>
-                <CheckBox checked={selected} borderColor="currentColor" size={18} />
+                <CheckBox
+                    checked={selected}
+                    size={18}
+                />
             </span>
             {group.name}
         </div>

frontend/src/metabase/admin/people/components/UserGroupSelect.jsx

@@ -14,7 +14,10 @@ import GroupSummary from "./GroupSummary.jsx";
 const GroupOption = ({ name, color, selected, disabled, onChange }) =>
     <div className={cx("flex align-center p1 px2", { "cursor-pointer": !disabled })} onClick={() => !disabled && onChange(!selected) }>
         <span className={cx("pr1", color, { disabled })}>
-            <CheckBox checked={selected} borderColor="currentColor" size={18} />
+            <CheckBox
+                checked={selected}
+                size={18}
+            />
         </span>
         {name}
     </div>

frontend/src/metabase/components/CheckBox.info.js

@@ -8,7 +8,10 @@ A standard checkbox.
 `;
 
 export const examples = {
-    "off": <CheckBox />,
-    "on": <CheckBox checked />,
-    "on inverted": <CheckBox style={{ color: "#509EE3" }} invertChecked checked />
+    "Default - Off": <CheckBox />,
+    "On - Default blue": <CheckBox checked />,
+    "Purple": <CheckBox checked color='purple' />,
+    "Yellow": <CheckBox checked color='yellow' />,
+    "Red": <CheckBox checked color='red' />,
+    "Green": <CheckBox checked color='green' />,
 };

frontend/src/metabase/components/CheckBox.jsx

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
 
-import cx from "classnames";
+import { normal as defaultColors } from "metabase/lib/colors";
 
 export default class CheckBox extends Component {
     static propTypes = {
         checked: PropTypes.bool,
-        onChange: PropTypes.func
+        onChange: PropTypes.func.isRequired,
+        color: PropTypes.oneOf(defaultColors),
+        size: PropTypes.number,  // TODO - this should probably be a concrete set of options
+        padding: PropTypes.number// TODO - the component should pad itself properly based on the size
     };
 
     static defaultProps = {
         size: 16,
         padding: 2,
-        borderColor: "#ddd",
-        checkColor: "currentColor"
+        color: 'blue'
     };
 
     onClick() {
@@ -25,21 +27,31 @@ export default class CheckBox extends Component {
     }
 
     render() {
-        const { checked, size, padding, borderColor, checkColor, className, invertChecked, style } = this.props;
+        const {
+            checked,
+            color,
+            padding,
+            size,
+        } = this.props;
+
+        const themeColor = defaultColors[color];
+
         const checkboxStyle = {
             width:              size,
             height:             size,
-            backgroundColor:    (invertChecked && checked) ? checkColor : "white",
-            border:             (invertChecked && checked) ? ("2px solid " + checkColor) : ("2px solid " + borderColor),
-            borderRadius:       4,
-            display:            "flex",
-            alignItems:         "center",
-            justifyContent:     "center",
+            backgroundColor:    checked ? themeColor : "white",
+            border:             `2px solid ${ checked ? themeColor : '#ddd' }`,
         };
         return (
-            <div style={style} className={cx("cursor-pointer", className)} onClick={() => this.onClick()}>
-                <div style={checkboxStyle}>
-                    { checked ? <Icon style={{ color: invertChecked ? "white" : checkColor }} name="check"  size={size - padding * 2} /> : null }
+            <div className="cursor-pointer" onClick={() => this.onClick()}>
+                <div style={checkboxStyle} className="flex align-center justify-center rounded">
+                    { checked && (
+                        <Icon
+                            style={{ color: checked ? 'white' : themeColor }}
+                            name="check"
+                            size={size - padding * 2}
+                        />
+                    )}
                 </div>
             </div>
         )

frontend/src/metabase/components/StackedCheckBox.info.js

@@ -8,7 +8,7 @@ A stacked checkbox, representing "all" items.
 `;
 
 export const examples = {
-    "off": <StackedCheckBox />,
-    "on": <StackedCheckBox checked />,
-    "on inverted": <StackedCheckBox style={{ color: "#509EE3" }} invertChecked checked />
+    "Off - Default": <StackedCheckBox />,
+    "Checked": <StackedCheckBox checked />,
+    "Checked with color": <StackedCheckBox checked color='purple' />,
 };

frontend/src/metabase/components/StackedCheckBox.jsx

 import React from "react";
-
 import CheckBox from "metabase/components/CheckBox.jsx";
 
+const OFFSET = 4;
+
 const StackedCheckBox = (props) =>
-    <span className={props.className} style={{ ...props.style, position: "relative" }}>
-        <CheckBox {...props} className={null} style={{ position: "absolute", top: -3, left: 3, zIndex: -1 }} />
-        <CheckBox {...props} className={null} style={{}} />
-    </span>
+    <div className="relative">
+        <span
+            className="absolute"
+            style={{
+                top: -OFFSET,
+                left: OFFSET,
+                zIndex: -1
+            }}
+        >
+            <CheckBox {...props} />
+        </span>
+        <CheckBox {...props} />
+    </div>
 
 export default StackedCheckBox;

frontend/src/metabase/internal/__snapshots__/components.spec.js.snap

@@ -55,22 +55,18 @@ exports[`Button should render "with an icon" correctly 1`] = `
 </button>
 `;
 
-exports[`CheckBox should render "off" correctly 1`] = `
+exports[`CheckBox should render "Default - Off" correctly 1`] = `
 <div
   className="cursor-pointer"
   onClick={[Function]}
-  style={undefined}
 >
   <div
+    className="flex align-center justify-center rounded"
     style={
       Object {
-        "alignItems": "center",
         "backgroundColor": "white",
         "border": "2px solid #ddd",
-        "borderRadius": 4,
-        "display": "flex",
         "height": 16,
-        "justifyContent": "center",
         "width": 16,
       }
     }
@@ -78,26 +74,18 @@ exports[`CheckBox should render "off" correctly 1`] = `
 </div>
 `;
 
-exports[`CheckBox should render "on inverted" correctly 1`] = `
+exports[`CheckBox should render "Green" correctly 1`] = `
 <div
   className="cursor-pointer"
   onClick={[Function]}
-  style={
-    Object {
-      "color": "#509EE3",
-    }
-  }
 >
   <div
+    className="flex align-center justify-center rounded"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "currentColor",
-        "border": "2px solid currentColor",
-        "borderRadius": 4,
-        "display": "flex",
+        "backgroundColor": "#9CC177",
+        "border": "2px solid #9CC177",
         "height": 16,
-        "justifyContent": "center",
         "width": 16,
       }
     }
@@ -124,22 +112,18 @@ exports[`CheckBox should render "on inverted" correctly 1`] = `
 </div>
 `;
 
-exports[`CheckBox should render "on" correctly 1`] = `
+exports[`CheckBox should render "On - Default blue" correctly 1`] = `
 <div
   className="cursor-pointer"
   onClick={[Function]}
-  style={undefined}
 >
   <div
+    className="flex align-center justify-center rounded"
     style={
       Object {
-        "alignItems": "center",
-        "backgroundColor": "white",
-        "border": "2px solid #ddd",
-        "borderRadius": 4,
-        "display": "flex",
+        "backgroundColor": "#509EE3",
+        "border": "2px solid #509EE3",
         "height": 16,
-        "justifyContent": "center",
         "width": 16,
       }
     }
@@ -152,7 +136,7 @@ exports[`CheckBox should render "on" correctly 1`] = `
       size={12}
       style={
         Object {
-          "color": "currentColor",
+          "color": "white",
         }
       }
       viewBox="0 0 32 32"
@@ -166,136 +150,181 @@ exports[`CheckBox should render "on" correctly 1`] = `
 </div>
 `;
 
-exports[`StackedCheckBox should render "off" correctly 1`] = `
-<span
-  className={undefined}
-  style={
-    Object {
-      "position": "relative",
-    }
-  }
+exports[`CheckBox should render "Purple" correctly 1`] = `
+<div
+  className="cursor-pointer"
+  onClick={[Function]}
 >
   <div
-    className="cursor-pointer"
-    onClick={[Function]}
+    className="flex align-center justify-center rounded"
     style={
       Object {
-        "left": 3,
-        "position": "absolute",
-        "top": -3,
-        "zIndex": -1,
+        "backgroundColor": "#A989C5",
+        "border": "2px solid #A989C5",
+        "height": 16,
+        "width": 16,
       }
     }
   >
-    <div
+    <svg
+      className="Icon Icon-check"
+      fill="currentcolor"
+      height={12}
+      name="check"
+      size={12}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "white",
-          "border": "2px solid #ddd",
-          "borderRadius": 4,
-          "display": "flex",
-          "height": 16,
-          "justifyContent": "center",
-          "width": 16,
+          "color": "white",
         }
       }
-    />
+      viewBox="0 0 32 32"
+      width={12}
+    >
+      <path
+        d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "
+      />
+    </svg>
   </div>
+</div>
+`;
+
+exports[`CheckBox should render "Red" correctly 1`] = `
+<div
+  className="cursor-pointer"
+  onClick={[Function]}
+>
   <div
-    className="cursor-pointer"
-    onClick={[Function]}
-    style={Object {}}
+    className="flex align-center justify-center rounded"
+    style={
+      Object {
+        "backgroundColor": "#EF8C8C",
+        "border": "2px solid #EF8C8C",
+        "height": 16,
+        "width": 16,
+      }
+    }
   >
-    <div
+    <svg
+      className="Icon Icon-check"
+      fill="currentcolor"
+      height={12}
+      name="check"
+      size={12}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "white",
-          "border": "2px solid #ddd",
-          "borderRadius": 4,
-          "display": "flex",
-          "height": 16,
-          "justifyContent": "center",
-          "width": 16,
+          "color": "white",
         }
       }
-    />
+      viewBox="0 0 32 32"
+      width={12}
+    >
+      <path
+        d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "
+      />
+    </svg>
   </div>
-</span>
+</div>
 `;
 
-exports[`StackedCheckBox should render "on inverted" correctly 1`] = `
-<span
-  className={undefined}
-  style={
-    Object {
-      "color": "#509EE3",
-      "position": "relative",
-    }
-  }
+exports[`CheckBox should render "Yellow" correctly 1`] = `
+<div
+  className="cursor-pointer"
+  onClick={[Function]}
 >
   <div
-    className="cursor-pointer"
-    onClick={[Function]}
+    className="flex align-center justify-center rounded"
     style={
       Object {
-        "left": 3,
-        "position": "absolute",
-        "top": -3,
-        "zIndex": -1,
+        "backgroundColor": "#f9d45c",
+        "border": "2px solid #f9d45c",
+        "height": 16,
+        "width": 16,
       }
     }
   >
-    <div
+    <svg
+      className="Icon Icon-check"
+      fill="currentcolor"
+      height={12}
+      name="check"
+      size={12}
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "currentColor",
-          "border": "2px solid currentColor",
-          "borderRadius": 4,
-          "display": "flex",
-          "height": 16,
-          "justifyContent": "center",
-          "width": 16,
+          "color": "white",
         }
       }
+      viewBox="0 0 32 32"
+      width={12}
     >
-      <svg
-        className="Icon Icon-check"
-        fill="currentcolor"
-        height={12}
-        name="check"
-        size={12}
+      <path
+        d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`StackedCheckBox should render "Checked with color" correctly 1`] = `
+<div
+  className="relative"
+>
+  <span
+    className="absolute"
+    style={
+      Object {
+        "left": 4,
+        "top": -4,
+        "zIndex": -1,
+      }
+    }
+  >
+    <div
+      className="cursor-pointer"
+      onClick={[Function]}
+    >
+      <div
+        className="flex align-center justify-center rounded"
         style={
           Object {
-            "color": "white",
+            "backgroundColor": "#A989C5",
+            "border": "2px solid #A989C5",
+            "height": 16,
+            "width": 16,
           }
         }
-        viewBox="0 0 32 32"
-        width={12}
       >
-        <path
-          d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "
-        />
-      </svg>
+        <svg
+          className="Icon Icon-check"
+          fill="currentcolor"
+          height={12}
+          name="check"
+          size={12}
+          style={
+            Object {
+              "color": "white",
+            }
+          }
+          viewBox="0 0 32 32"
+          width={12}
+        >
+          <path
+            d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "
+          />
+        </svg>
+      </div>
     </div>
-  </div>
+  </span>
   <div
     className="cursor-pointer"
     onClick={[Function]}
-    style={Object {}}
   >
     <div
+      className="flex align-center justify-center rounded"
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "currentColor",
-          "border": "2px solid currentColor",
-          "borderRadius": 4,
-          "display": "flex",
+          "backgroundColor": "#A989C5",
+          "border": "2px solid #A989C5",
           "height": 16,
-          "justifyContent": "center",
           "width": 16,
         }
       }
@@ -320,40 +349,70 @@ exports[`StackedCheckBox should render "on inverted" correctly 1`] = `
       </svg>
     </div>
   </div>
-</span>
+</div>
 `;
 
-exports[`StackedCheckBox should render "on" correctly 1`] = `
-<span
-  className={undefined}
-  style={
-    Object {
-      "position": "relative",
-    }
-  }
+exports[`StackedCheckBox should render "Checked" correctly 1`] = `
+<div
+  className="relative"
 >
-  <div
-    className="cursor-pointer"
-    onClick={[Function]}
+  <span
+    className="absolute"
     style={
       Object {
-        "left": 3,
-        "position": "absolute",
-        "top": -3,
+        "left": 4,
+        "top": -4,
         "zIndex": -1,
       }
     }
   >
     <div
+      className="cursor-pointer"
+      onClick={[Function]}
+    >
+      <div
+        className="flex align-center justify-center rounded"
+        style={
+          Object {
+            "backgroundColor": "#509EE3",
+            "border": "2px solid #509EE3",
+            "height": 16,
+            "width": 16,
+          }
+        }
+      >
+        <svg
+          className="Icon Icon-check"
+          fill="currentcolor"
+          height={12}
+          name="check"
+          size={12}
+          style={
+            Object {
+              "color": "white",
+            }
+          }
+          viewBox="0 0 32 32"
+          width={12}
+        >
+          <path
+            d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "
+          />
+        </svg>
+      </div>
+    </div>
+  </span>
+  <div
+    className="cursor-pointer"
+    onClick={[Function]}
+  >
+    <div
+      className="flex align-center justify-center rounded"
       style={
         Object {
-          "alignItems": "center",
-          "backgroundColor": "white",
-          "border": "2px solid #ddd",
-          "borderRadius": 4,
-          "display": "flex",
+          "backgroundColor": "#509EE3",
+          "border": "2px solid #509EE3",
           "height": 16,
-          "justifyContent": "center",
           "width": 16,
         }
       }
@@ -366,7 +425,7 @@ exports[`StackedCheckBox should render "on" correctly 1`] = `
         size={12}
         style={
           Object {
-            "color": "currentColor",
+            "color": "white",
           }
         }
         viewBox="0 0 32 32"
@@ -378,46 +437,57 @@ exports[`StackedCheckBox should render "on" correctly 1`] = `
       </svg>
     </div>
   </div>
+</div>
+`;
+
+exports[`StackedCheckBox should render "Off - Default" correctly 1`] = `
+<div
+  className="relative"
+>
+  <span
+    className="absolute"
+    style={
+      Object {
+        "left": 4,
+        "top": -4,
+        "zIndex": -1,
+      }
+    }
+  >
+    <div
+      className="cursor-pointer"
+      onClick={[Function]}
+    >
+      <div
+        className="flex align-center justify-center rounded"
+        style={
+          Object {
+            "backgroundColor": "white",
+            "border": "2px solid #ddd",
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    </div>
+  </span>
   <div
     className="cursor-pointer"
     onClick={[Function]}
-    style={Object {}}
   >
     <div
+      className="flex align-center justify-center rounded"
       style={
         Object {
-          "alignItems": "center",
           "backgroundColor": "white",
           "border": "2px solid #ddd",
-          "borderRadius": 4,
-          "display": "flex",
           "height": 16,
-          "justifyContent": "center",
           "width": 16,
         }
       }
-    >
-      <svg
-        className="Icon Icon-check"
-        fill="currentcolor"
-        height={12}
-        name="check"
-        size={12}
-        style={
-          Object {
-            "color": "currentColor",
-          }
-        }
-        viewBox="0 0 32 32"
-        width={12}
-      >
-        <path
-          d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "
-        />
-      </svg>
-    </div>
+    />
   </div>
-</span>
+</div>
 `;
 
 exports[`Toggle should render "off" correctly 1`] = `

frontend/src/metabase/questions/components/ActionHeader.jsx

@@ -14,13 +14,14 @@ import LabelPopover from "../containers/LabelPopover.jsx";
 const ActionHeader = ({ visibleCount, selectedCount, allAreSelected, sectionIsArchive, setAllSelected, setArchived, labels }) =>
     <div className={S.actionHeader}>
         <Tooltip tooltip={"Select all " + visibleCount} isEnabled={!allAreSelected}>
-            <StackedCheckBox
-                checked={allAreSelected}
-                className="ml1"
-                onChange={(e) => setAllSelected(e.target.checked)}
-                size={20} padding={3} borderColor="currentColor"
-                invertChecked
-            />
+            <span className="ml1">
+                <StackedCheckBox
+                    checked={allAreSelected}
+                    onChange={e => setAllSelected(e.target.checked)}
+                    size={20}
+                    padding={3}
+                />
+            </span>
         </Tooltip>
         <span className={S.selectedCount}>
             {selectedCount} selected

frontend/src/metabase/questions/components/Item.jsx

@@ -36,19 +36,18 @@ const Item = ({
                     />
                 }
                 { setItemSelected &&
-                    <CheckBox
-                        className={cx(
-                            "cursor-pointer absolute top left",
-                            { "visible text-brand": selected },
-                            { "hover-child text-brand-hover text-light-blue transition-color": !selected }
-                        )}
-                        checked={selected}
-                        onChange={(e) => setItemSelected({ [id]: e.target.checked })}
-                        size={ITEM_ICON_SIZE}
-                        padding={3}
-                        borderColor="currentColor"
-                        invertChecked
-                    />
+                    <span className={cx(
+                        "absolute top left",
+                        { "visible": selected },
+                        { "hover-child": !selected }
+                    )}>
+                        <CheckBox
+                            checked={selected}
+                            onChange={e => setItemSelected({ [id]: e.target.checked })}
+                            size={ITEM_ICON_SIZE}
+                            padding={3}
+                        />
+                    </span>
                 }
             </div>
             <ItemBody

frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedFields.jsx

@@ -56,7 +56,10 @@ export default class ChartSettingOrderedFields extends Component {
                         outline="list"
                     >
                         <div className={cx("flex align-center p1", { "text-grey-2": !item.enabled })} >
-                            <CheckBox checked={item.enabled} className={cx("text-brand", { "text-grey-2": !item.enabled })} onChange={(e) => this.setEnabled(i, e.target.checked)} invertChecked />
+                            <CheckBox
+                                checked={item.enabled}
+                                onChange={e => this.setEnabled(i, e.target.checked)}
+                            />
                             <span className="ml1 h4">{columnNames[item.name]}</span>
                             <Icon className="flex-align-right text-grey-2 mr1 cursor-pointer" name="grabber" width={14} height={14}/>
                         </div>