From 44214cc5f616798cf2ff6fe12473bbfb3a732bfa Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 1 Sep 2021 23:44:14 +1000
Subject: [PATCH] add animations for Radio, Checkbox

---
 src/pages/Test.tsx                      | 19 +++++-
 src/theme/CheckboxIcon.tsx              | 81 +++++++++++++++++++++++++
 src/theme/CheckboxIndeterminateIcon.tsx | 76 +++++++++++++++++++++++
 src/theme/RadioIcon.tsx                 | 65 ++++++++++++++++++++
 src/theme/components.tsx                | 21 ++++++-
 5 files changed, 260 insertions(+), 2 deletions(-)
 create mode 100644 src/theme/CheckboxIcon.tsx
 create mode 100644 src/theme/CheckboxIndeterminateIcon.tsx
 create mode 100644 src/theme/RadioIcon.tsx

diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
index 014457af3..2a96ad2b6 100644
--- a/src/pages/Test.tsx
+++ b/src/pages/Test.tsx
@@ -28,6 +28,7 @@ import {
   Tooltip,
   FormControlLabel,
   Checkbox,
+  RadioGroup,
   Radio,
   Switch,
   TextField,
@@ -192,6 +193,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="text"
               size="small"
             >
@@ -200,6 +202,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="text"
               size="medium"
             >
@@ -208,6 +211,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="text"
               size="large"
             >
@@ -275,6 +279,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="outlined"
               size="small"
             >
@@ -283,6 +288,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="outlined"
               size="medium"
             >
@@ -291,6 +297,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="outlined"
               size="large"
             >
@@ -357,6 +364,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="contained"
               size="small"
             >
@@ -365,6 +373,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="contained"
               size="medium"
             >
@@ -373,6 +382,7 @@ export default function TestView() {
             <Button
               // startIcon={<SparkIcon />}
               // endIcon={<SparkIcon />}
+              color="primary"
               variant="contained"
               size="large"
             >
@@ -747,7 +757,14 @@ export default function TestView() {
 
           <Stack>
             <FormControlLabel control={<Checkbox />} label="Label" />
-            <FormControlLabel control={<Radio />} label="Label" />
+            <FormControlLabel
+              control={<Checkbox indeterminate />}
+              label="Label indeterminate"
+            />
+            <RadioGroup>
+              <FormControlLabel control={<Radio />} value="1" label="Label 1" />
+              <FormControlLabel control={<Radio />} value="2" label="Label 2" />
+            </RadioGroup>
           </Stack>
 
           <div>
diff --git a/src/theme/CheckboxIcon.tsx b/src/theme/CheckboxIcon.tsx
new file mode 100644
index 000000000..83d33bd64
--- /dev/null
+++ b/src/theme/CheckboxIcon.tsx
@@ -0,0 +1,81 @@
+import { Box } from "@material-ui/core";
+import { toRem } from "./typography";
+
+export default function CheckboxIcon() {
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: toRem(18),
+        height: toRem(18),
+        margin: toRem((24 - 18) / 2),
+        borderRadius: 1,
+
+        position: "relative",
+
+        bgcolor: "action.input",
+        border: "1px solid",
+        borderColor: "text.disabled",
+        color: "primary.main",
+
+        transition: (theme) =>
+          theme.transitions.create(["background-color", "border-color"], {
+            easing: theme.transitions.easing.easeIn,
+            duration: theme.transitions.duration.shortest,
+            delay: theme.transitions.duration.shortest,
+          }),
+
+        "& svg": {
+          position: "absolute",
+          top: -1,
+          right: -1,
+          bottom: -1,
+          left: -1,
+          color: "inherit",
+        },
+        "& .tick": {
+          stroke: (theme) => theme.palette.primary.contrastText,
+          strokeDasharray: 18,
+          strokeDashoffset: 18,
+          transition: (theme) =>
+            theme.transitions.create(["stroke-dashoffset"], {
+              easing: theme.transitions.easing.easeIn,
+              duration: theme.transitions.duration.shortest,
+            }),
+
+          boxShadow: 1,
+        },
+
+        ".Mui-checked &": {
+          backgroundColor: "currentColor",
+          borderColor: "currentColor",
+
+          transition: (theme) =>
+            theme.transitions.create(["background-color", "border-color"], {
+              easing: theme.transitions.easing.easeOut,
+              duration: theme.transitions.duration.shortest,
+            }),
+
+          "& .tick": {
+            strokeDashoffset: 0,
+            transition: (theme) =>
+              theme.transitions.create(["stroke-dashoffset"], {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.shortest,
+                delay: theme.transitions.duration.shortest,
+              }),
+          },
+        },
+      }}
+    >
+      <svg viewBox="0 0 18 18">
+        <polyline
+          stroke-width="2"
+          points="2.705 8.29 7 12.585 15.295 4.29"
+          fill="none"
+          className="tick"
+        />
+      </svg>
+    </Box>
+  );
+}
diff --git a/src/theme/CheckboxIndeterminateIcon.tsx b/src/theme/CheckboxIndeterminateIcon.tsx
new file mode 100644
index 000000000..80a8eb206
--- /dev/null
+++ b/src/theme/CheckboxIndeterminateIcon.tsx
@@ -0,0 +1,76 @@
+import { Box } from "@material-ui/core";
+import { toRem } from "./typography";
+
+export default function CheckboxIndeterminateIcon() {
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: toRem(18),
+        height: toRem(18),
+        margin: toRem((24 - 18) / 2),
+        borderRadius: 1,
+
+        position: "relative",
+
+        bgcolor: "action.input",
+        border: "1px solid",
+        borderColor: "text.disabled",
+        color: "primary.main",
+
+        transition: (theme) =>
+          theme.transitions.create(["background-color", "border-color"], {
+            easing: theme.transitions.easing.easeIn,
+            duration: theme.transitions.duration.shortest,
+            delay: theme.transitions.duration.shortest,
+          }),
+
+        "& svg": {
+          position: "absolute",
+          top: -1,
+          right: -1,
+          bottom: -1,
+          left: -1,
+          color: "inherit",
+        },
+        "& .tick": {
+          stroke: (theme) => theme.palette.primary.contrastText,
+          strokeDasharray: 10,
+          strokeDashoffset: 10,
+          transition: (theme) =>
+            theme.transitions.create(["stroke-dashoffset"], {
+              easing: theme.transitions.easing.easeIn,
+              duration: theme.transitions.duration.shortest,
+            }),
+
+          boxShadow: 1,
+        },
+
+        ".Mui-checked &": {
+          backgroundColor: "currentColor",
+          borderColor: "currentColor",
+
+          transition: (theme) =>
+            theme.transitions.create(["background-color", "border-color"], {
+              easing: theme.transitions.easing.easeOut,
+              duration: theme.transitions.duration.shortest,
+            }),
+
+          "& .tick": {
+            strokeDashoffset: 0,
+            transition: (theme) =>
+              theme.transitions.create(["stroke-dashoffset"], {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.shortest,
+                delay: theme.transitions.duration.shortest,
+              }),
+          },
+        },
+      }}
+    >
+      <svg viewBox="0 0 18 18">
+        <line x1="4" y1="9" x2="14" y2="9" stroke-width="2" className="tick" />
+      </svg>
+    </Box>
+  );
+}
diff --git a/src/theme/RadioIcon.tsx b/src/theme/RadioIcon.tsx
new file mode 100644
index 000000000..1740929bc
--- /dev/null
+++ b/src/theme/RadioIcon.tsx
@@ -0,0 +1,65 @@
+import { Box } from "@material-ui/core";
+import { toRem } from "./typography";
+
+export default function RadioIcon() {
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: toRem(20),
+        height: toRem(20),
+        margin: toRem((24 - 20) / 2),
+        borderRadius: "50%",
+
+        backgroundColor: "transparent",
+        border: "1px solid",
+        borderColor: "text.disabled",
+        color: "primary.main",
+
+        transition: (theme) =>
+          theme.transitions.create(["background-color", "border-color"], {
+            easing: theme.transitions.easing.easeIn,
+            duration: theme.transitions.duration.shortest,
+          }),
+
+        "&::before": {
+          content: '""',
+          width: "100%",
+          height: "100%",
+          borderRadius: "50%",
+          display: "block",
+
+          bgcolor: "action.input",
+          transition: (theme) =>
+            theme.transitions.create(["transform", "background-color"], {
+              easing: theme.transitions.easing.easeIn,
+              duration: theme.transitions.duration.shortest,
+            }),
+        },
+
+        ".Mui-checked &": {
+          backgroundColor: "currentColor",
+          borderColor: "currentColor",
+
+          transition: (theme) =>
+            theme.transitions.create(["background-color", "border-color"], {
+              easing: theme.transitions.easing.easeOut,
+              duration: theme.transitions.duration.shortest,
+            }),
+
+          "&::before": {
+            bgcolor: "primary.contrastText",
+            boxShadow: 1,
+            transform: `scale(${12 / 20})`,
+
+            transition: (theme) =>
+              theme.transitions.create(["transform", "background-color"], {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.shortest,
+              }),
+          },
+        },
+      }}
+    />
+  );
+}
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 458e56104..147606f9c 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -1,5 +1,9 @@
 import { Theme, ThemeOptions } from "@material-ui/core/styles";
 
+import RadioIcon from "theme/RadioIcon";
+import CheckboxIcon from "theme/CheckboxIcon";
+import CheckboxIndeterminateIcon from "theme/CheckboxIndeterminateIcon";
+
 import { colord, extend } from "colord";
 import mixPlugin from "colord/plugins/mix";
 extend([mixPlugin]);
@@ -503,7 +507,7 @@ export const components = (theme: Theme): ThemeOptions => {
 
           track: {
             borderRadius: 32 / 2,
-            backgroundColor: "transparent",
+            backgroundColor: theme.palette.action.input,
             boxShadow: `0 0 0 1px ${theme.palette.text.disabled} inset`,
             ".Mui-disabled + &": {
               backgroundColor: theme.palette.text.disabled,
@@ -585,6 +589,21 @@ export const components = (theme: Theme): ThemeOptions => {
           },
         } as any,
       },
+
+      MuiRadio: {
+        defaultProps: {
+          icon: <RadioIcon />,
+          checkedIcon: <RadioIcon />,
+        },
+      },
+      MuiCheckbox: {
+        defaultProps: {
+          icon: <CheckboxIcon />,
+          checkedIcon: <CheckboxIcon />,
+          indeterminateIcon: <CheckboxIndeterminateIcon />,
+        },
+      },
+
       MuiSlider: {
         styleOverrides: {
           thumb: {