Update checkboxes to newest design

src/components/Checkbox/Checkbox.tsx

@@ -1,136 +1,25 @@
-import ButtonBase from "@material-ui/core/ButtonBase";
+import MuiCheckbox, {
-import { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox";
+  CheckboxProps as MuiCheckboxProps
-import { makeStyles } from "@material-ui/core/styles";
+} from "@material-ui/core/Checkbox";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import classNames from "classnames";
 import React from "react";
 
 export type CheckboxProps = Omit<
   MuiCheckboxProps,
-  | "checkedIcon"
+  "checkedIcon" | "color" | "icon" | "indeterminateIcon" | "classes" | "onClick"
-  | "color"
-  | "icon"
-  | "indeterminateIcon"
-  | "classes"
-  | "onChange"
-  | "onClick"
 > & {
   disableClickPropagation?: boolean;
-  onChange?: (event: React.ChangeEvent<any>) => void;
 };
 
-const useStyles = makeStyles(
-  theme => ({
-    box: {
-      "&$checked": {
-        "&:before": {
-          background: theme.palette.primary.main,
-          color: theme.palette.background.paper,
-          content: '"\\2713"',
-          fontWeight: "bold",
-          textAlign: "center"
-        },
-        borderColor: theme.palette.primary.main
-      },
-      "&$disabled": {
-        borderColor: theme.palette.grey[200]
-      },
-      "&$indeterminate": {
-        "&:before": {
-          background: theme.palette.primary.main,
-          height: 2,
-          top: 5
-        },
-        borderColor: theme.palette.primary.main
-      },
-      "&:before": {
-        background: "rgba(0, 0, 0, 0)",
-        content: '""',
-        height: 14,
-        left: -1,
-        position: "absolute",
-        top: -1,
-        transition: theme.transitions.duration.short + "ms",
-        width: 14
-      },
-
-      WebkitAppearance: "none",
-      border: `1px solid ${theme.palette.action.active}`,
-      boxSizing: "border-box",
-      cursor: "pointer",
-      height: 14,
-      outline: "0",
-      position: "relative",
-      userSelect: "none",
-      width: 14
-    },
-    checked: {},
-    disabled: {},
-    indeterminate: {},
-    root: {
-      "&:hover": {
-        background: fade(theme.palette.primary.main, 0.1)
-      },
-      alignSelf: "start",
-      borderRadius: "100%",
-      cursor: "pointer",
-      display: "flex",
-      height: 30,
-      justifyContent: "center",
-      margin: "5px 9px",
-      width: 30
-    }
-  }),
-  { name: "Checkbox" }
-);
 const Checkbox: React.FC<CheckboxProps> = props => {
-  const {
+  const { disableClickPropagation, ...rest } = props;
-    checked,
-    className,
-
-    disabled,
-    disableClickPropagation,
-    indeterminate,
-    onChange,
-    value,
-    name,
-    ...rest
-  } = props;
-  const classes = useStyles(props);
-
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const handleClick = React.useCallback(
-    disableClickPropagation
-      ? event => {
-          event.stopPropagation();
-          inputRef.current.click();
-        }
-      : () => inputRef.current.click(),
-    []
-  );
 
   return (
-    <ButtonBase
+    <MuiCheckbox
       {...rest}
-      centerRipple
+      onClick={
-      className={classNames(classes.root, className)}
+        disableClickPropagation ? event => event.stopPropagation() : undefined
-      disabled={disabled}
+      }
-      onClick={handleClick}
-    >
-      <input
-        className={classNames(classes.box, {
-          [classes.checked]: checked,
-          [classes.disabled]: disabled,
-          [classes.indeterminate]: indeterminate
-        })}
-        disabled={disabled}
-        type="checkbox"
-        name={name}
-        value={checked !== undefined && checked.toString()}
-        ref={inputRef}
-        onChange={onChange}
     />
-    </ButtonBase>
   );
 };
 Checkbox.displayName = "Checkbox";

src/components/TableHead/TableHead.tsx

@@ -28,23 +28,6 @@ const useStyles = makeStyles(
     cell: {
       padding: 0
     },
-    checkboxPartialSelect: {
-      "& input": {
-        "&:before": {
-          background: [theme.palette.background.paper, "!important"] as any,
-          border: `solid 1px ${theme.palette.primary.main}`,
-          content: "''"
-        },
-        background: theme.palette.background.paper
-      },
-      "&:after": {
-        background: theme.palette.primary.main,
-        content: "''",
-        height: 2,
-        position: "absolute",
-        width: 6
-      }
-    },
     checkboxSelected: {
       backgroundColor: fade(theme.palette.primary.main, 0.05)
     },
@@ -113,10 +96,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
             })}
           >
             <Checkbox
-              className={classNames({
+              indeterminate={items && items.length > selected && selected > 0}
-                [classes.checkboxPartialSelect]:
-                  items && items.length > selected && selected > 0
-              })}
               checked={selected === 0 ? false : true}
               disabled={disabled}
               onChange={() => toggleAll(items, selected)}

src/icons/Checkbox.tsx

@@ -1,11 +1,18 @@
 import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
-const ArrowSort = createSvgIcon(
+const Checkbox = createSvgIcon(
   <>
-    <rect x="0.5" y="0.5" width="13" height="13" stroke="#616161" />
+    <rect
+      x="5"
+      y="5"
+      width="14"
+      height="14"
+      stroke="currentColor"
+      fill="none"
+    />
   </>,
-  "ArrowSort"
+  "Checkbox"
 );
 
-export default ArrowSort;
+export default Checkbox;

src/icons/CheckboxChecked.tsx

@@ -0,0 +1,17 @@
+import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
+import React from "react";
+
+const CheckboxChecked = createSvgIcon(
+  <>
+    <rect x="5" y="5" width="14" height="14" fill="currentColor" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M 16.7527 9.33783 L 10.86618 15.7595 L 8 12.32006 L 8.76822 11.67988 L 10.90204 14.24046 L 16.0155 8.66211 L 16.7527 9.33783 Z"
+      fill="white"
+    />
+  </>,
+  "CheckboxChecked"
+);
+
+export default CheckboxChecked;

src/icons/CheckboxIndeterminate.tsx

@@ -0,0 +1,19 @@
+import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
+import React from "react";
+
+const CheckboxIndeterminate = createSvgIcon(
+  <>
+    <rect
+      x="5"
+      y="5"
+      width="14"
+      height="14"
+      stroke="currentColor"
+      fill="none"
+    />
+    <rect x="8" y="11" width="8" height="2" fill="currentColor" />
+  </>,
+  "CheckboxIndeterminate"
+);
+
+export default CheckboxIndeterminate;

src/misc.ts

@@ -306,10 +306,10 @@ export function createHref(url: string) {
 interface AnyEvent {
   stopPropagation: () => void;
 }
-export function stopPropagation(cb: () => void) {
+export function stopPropagation(cb: (event?: AnyEvent) => void) {
   return (event: AnyEvent) => {
     event.stopPropagation();
-    cb();
+    cb(event);
   };
 }
 

src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx

@@ -1,11 +1,11 @@
 import Button from "@material-ui/core/Button";
-import Checkbox from "@material-ui/core/Checkbox";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import Accordion, { AccordionProps } from "@saleor/components/Accordion";
+import Checkbox from "@saleor/components/Checkbox";
 import Chip from "@saleor/components/Chip";
 import Hr from "@saleor/components/Hr";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
@@ -85,7 +85,6 @@ const Option: React.FC<{
         <Checkbox
           className={classes.checkbox}
           checked={checked}
-          color="primary"
           name={name}
           onChange={onChange}
         />

src/theme.ts

@@ -4,8 +4,12 @@ import { createMuiTheme, Theme } from "@material-ui/core/styles";
 import { darken, fade } from "@material-ui/core/styles/colorManipulator";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
+import { createElement } from "react";
 
 import { IThemeColors } from "./components/Theme/themes";
+import CheckboxIcon from "./icons/Checkbox";
+import CheckboxCheckedIcon from "./icons/CheckboxChecked";
+import CheckboxIndeterminateIcon from "./icons/CheckboxIndeterminate";
 
 const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) =>
   [
@@ -565,5 +569,8 @@ Typography.defaultProps = {
 };
 
 Checkbox.defaultProps = {
-  color: "primary"
+  checkedIcon: createElement(CheckboxCheckedIcon),
+  color: "primary",
+  icon: createElement(CheckboxIcon),
+  indeterminateIcon: createElement(CheckboxIndeterminateIcon)
 };