diff --git a/CHANGELOG.md b/CHANGELOG.md index e33100e36..2bc0e0188 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ All notable, unreleased changes to this project will be documented in this file. - Fix incorrect messages - #643 by @dominik-zeglen - Do not use devserver to run cypress tests - #650 by @dominik-zeglen - Fix updating product that has no variants - #649 by @dominik-zeglen +- Update checkbox design - #651 by @dominik-zeglen ## 2.10.1 diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 529aef513..772800f6b 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,136 +1,25 @@ -import ButtonBase from "@material-ui/core/ButtonBase"; -import { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox"; -import { makeStyles } from "@material-ui/core/styles"; -import { fade } from "@material-ui/core/styles/colorManipulator"; -import classNames from "classnames"; +import MuiCheckbox, { + CheckboxProps as MuiCheckboxProps +} from "@material-ui/core/Checkbox"; import React from "react"; export type CheckboxProps = Omit< MuiCheckboxProps, - | "checkedIcon" - | "color" - | "icon" - | "indeterminateIcon" - | "classes" - | "onChange" - | "onClick" + "checkedIcon" | "color" | "icon" | "indeterminateIcon" | "classes" | "onClick" > & { disableClickPropagation?: boolean; - onChange?: (event: React.ChangeEvent) => 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 = props => { - const { - checked, - className, - - disabled, - disableClickPropagation, - indeterminate, - onChange, - value, - name, - ...rest - } = props; - const classes = useStyles(props); - - const inputRef = React.useRef(null); - const handleClick = React.useCallback( - disableClickPropagation - ? event => { - event.stopPropagation(); - inputRef.current.click(); - } - : () => inputRef.current.click(), - [] - ); + const { disableClickPropagation, ...rest } = props; return ( - - - + onClick={ + disableClickPropagation ? event => event.stopPropagation() : undefined + } + /> ); }; Checkbox.displayName = "Checkbox"; diff --git a/src/components/ControlledCheckbox.tsx b/src/components/ControlledCheckbox.tsx index ebace41f9..fd4d57b45 100644 --- a/src/components/ControlledCheckbox.tsx +++ b/src/components/ControlledCheckbox.tsx @@ -1,8 +1,7 @@ +import Checkbox from "@material-ui/core/Checkbox"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import React from "react"; -import Checkbox from "./Checkbox"; - interface ControlledCheckboxProps { className?: string; name: string; @@ -27,7 +26,6 @@ export const ControlledCheckbox: React.FC = ({ checked={checked} disabled={disabled} name={name} - disableClickPropagation onChange={() => onChange({ target: { name, value: !checked } })} /> } diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index 1a1d39602..f382fa1c7 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/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 = props => { })} > selected && selected > 0 - })} + indeterminate={items && items.length > selected && selected > 0} checked={selected === 0 ? false : true} disabled={disabled} onChange={() => toggleAll(items, selected)} diff --git a/src/icons/Checkbox.tsx b/src/icons/Checkbox.tsx new file mode 100644 index 000000000..174c99378 --- /dev/null +++ b/src/icons/Checkbox.tsx @@ -0,0 +1,18 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const Checkbox = createSvgIcon( + <> + + , + "Checkbox" +); + +export default Checkbox; diff --git a/src/icons/CheckboxChecked.tsx b/src/icons/CheckboxChecked.tsx new file mode 100644 index 000000000..63170dac3 --- /dev/null +++ b/src/icons/CheckboxChecked.tsx @@ -0,0 +1,17 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const CheckboxChecked = createSvgIcon( + <> + + + , + "CheckboxChecked" +); + +export default CheckboxChecked; diff --git a/src/icons/CheckboxIndeterminate.tsx b/src/icons/CheckboxIndeterminate.tsx new file mode 100644 index 000000000..8079e9b24 --- /dev/null +++ b/src/icons/CheckboxIndeterminate.tsx @@ -0,0 +1,19 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const CheckboxIndeterminate = createSvgIcon( + <> + + + , + "CheckboxIndeterminate" +); + +export default CheckboxIndeterminate; diff --git a/src/misc.ts b/src/misc.ts index 933fcc916..6ab1a53d5 100644 --- a/src/misc.ts +++ b/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); }; } diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx index 23e60815e..02654101f 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx +++ b/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<{ diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index b7a93b524..085d7b826 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -1329,18 +1329,43 @@ exports[`Storyshots Generics / Checkbox checked 1`] = `
- + + + + +
@@ -1357,20 +1382,39 @@ exports[`Storyshots Generics / Checkbox disabled 1`] = `
- + + + + +
@@ -1388,18 +1432,37 @@ exports[`Storyshots Generics / Checkbox interactive 1`] = ` class="MuiCardContent-root-id" >
- + + + + +
@@ -1417,18 +1480,37 @@ exports[`Storyshots Generics / Checkbox unchecked 1`] = `
- + + + + +
@@ -1445,18 +1527,44 @@ exports[`Storyshots Generics / Checkbox undeterminate 1`] = `
- + + + + +
@@ -1899,17 +2007,42 @@ exports[`Storyshots Generics / Filter default 1`] = `