[Slider] Create unstyled version and migrate to emotion & styled-components

docs/babel.config.js

@@ -19,6 +19,7 @@ const alias = {
   '@material-ui/icons': '../packages/material-ui-icons/src',
   '@material-ui/lab': '../packages/material-ui-lab/src',
   '@material-ui/styles': '../packages/material-ui-styles/src',
+  '@material-ui/styled-engine': '@emotion/styled',
   '@material-ui/system': '../packages/material-ui-system/src',
   '@material-ui/utils': '../packages/material-ui-utils/src',
   docs: './',

docs/package.json

@@ -33,6 +33,7 @@
     "@material-ui/lab": "^5.0.0-alpha.1",
     "@material-ui/pickers": "^4.0.0-alpha.11",
     "@material-ui/styles": "^5.0.0-alpha.1",
+    "@material-ui/styled-engine": "^5.0.0-alpha.1",
     "@material-ui/system": "^5.0.0-alpha.1",
     "@material-ui/types": "^5.0.0",
     "@trendmicro/react-interpolate": "^0.5.5",

docs/src/pages/components/slider/ContinuousSlider.js

@@ -5,13 +5,20 @@ import Typography from '@material-ui/core/Typography';
 import Slider from '@material-ui/core/Slider';
 import VolumeDown from '@material-ui/icons/VolumeDown';
 import VolumeUp from '@material-ui/icons/VolumeUp';
+import { ThemeProvider } from '@material-ui/styles';
+import styled from '@emotion/styled';
 
 const useStyles = makeStyles({
   root: {
     width: 200,
   },
 });
 
+const CustomSlider = styled(Slider)`
+  background-color: pink;
+  border-color: green;
+`;
+
 export default function ContinuousSlider() {
   const classes = useStyles();
   const [value, setValue] = React.useState(30);
@@ -20,30 +27,63 @@ export default function ContinuousSlider() {
     setValue(newValue);
   };
 
+  const theme = {
+    components: {
+      MuiSlider: {
+        // @ts-ignore MuiSlider does not support variants, this is added just for testing
+        variants: [
+          {
+            props: { color: 'primary', orientation: 'vertical' },
+            style: {
+              backgroundColor: 'green',
+              border: '3px solid orange',
+            },
+          },
+        ],
+        styleOverrides: {
+          root: {
+            background: 'red',
+          },
+        },
+      },
+    },
+  };
+
   return (
-    <div className={classes.root}>
-      <Typography id="continuous-slider" gutterBottom>
-        Volume
-      </Typography>
-      <Grid container spacing={2}>
-        <Grid item>
-          <VolumeDown />
-        </Grid>
-        <Grid item xs>
-          <Slider
-            value={value}
-            onChange={handleChange}
-            aria-labelledby="continuous-slider"
-          />
-        </Grid>
-        <Grid item>
-          <VolumeUp />
+    <ThemeProvider theme={theme}>
+      <div className={classes.root}>
+        <Typography id="continuous-slider" gutterBottom>
+          Volume
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid item>
+            <VolumeDown />
+          </Grid>
+          <Grid item xs>
+            <Slider
+              value={value}
+              onChange={handleChange}
+              aria-labelledby="continuous-slider"
+            />
+          </Grid>
+          <Grid item>
+            <VolumeUp />
+          </Grid>
         </Grid>
-      </Grid>
-      <Typography id="disabled-slider" gutterBottom>
-        Disabled slider
-      </Typography>
-      <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
-    </div>
+        <Typography id="disabled-slider" gutterBottom>
+          Disabled slider
+        </Typography>
+        <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
+        <Typography id="disabled-slider" gutterBottom>
+          Vertical primary slider
+        </Typography>
+        <Slider orientation="vertical" color="primary" defaultValue={30} />
+        <CustomSlider
+          orientation="vertical"
+          color="primary"
+          defaultValue={30}
+        />
+      </div>
+    </ThemeProvider>
   );
 }

docs/src/pages/components/slider/ContinuousSlider.tsx

@@ -1,17 +1,24 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Slider from '@material-ui/core/Slider';
 import VolumeDown from '@material-ui/icons/VolumeDown';
 import VolumeUp from '@material-ui/icons/VolumeUp';
+import { ThemeProvider } from '@material-ui/styles';
+import styled from '@emotion/styled';
 
 const useStyles = makeStyles({
   root: {
     width: 200,
   },
 });
 
+const CustomSlider = styled(Slider)`
+  background-color: pink;
+  border-color: green;
+`;
+
 export default function ContinuousSlider() {
   const classes = useStyles();
   const [value, setValue] = React.useState<number>(30);
@@ -23,30 +30,63 @@ export default function ContinuousSlider() {
     setValue(newValue as number);
   };
 
+  const theme: Theme = {
+    components: {
+      MuiSlider: {
+        // @ts-ignore MuiSlider does not support variants, this is added just for testing
+        variants: [
+          {
+            props: { color: 'primary', orientation: 'vertical' },
+            style: {
+              backgroundColor: 'green',
+              border: '3px solid orange',
+            },
+          },
+        ],
+        styleOverrides: {
+          root: {
+            background: 'red',
+          },
+        },
+      },
+    },
+  };
+
   return (
-    <div className={classes.root}>
-      <Typography id="continuous-slider" gutterBottom>
-        Volume
-      </Typography>
-      <Grid container spacing={2}>
-        <Grid item>
-          <VolumeDown />
-        </Grid>
-        <Grid item xs>
-          <Slider
-            value={value}
-            onChange={handleChange}
-            aria-labelledby="continuous-slider"
-          />
-        </Grid>
-        <Grid item>
-          <VolumeUp />
+    <ThemeProvider theme={theme}>
+      <div className={classes.root}>
+        <Typography id="continuous-slider" gutterBottom>
+          Volume
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid item>
+            <VolumeDown />
+          </Grid>
+          <Grid item xs>
+            <Slider
+              value={value}
+              onChange={handleChange}
+              aria-labelledby="continuous-slider"
+            />
+          </Grid>
+          <Grid item>
+            <VolumeUp />
+          </Grid>
         </Grid>
-      </Grid>
-      <Typography id="disabled-slider" gutterBottom>
-        Disabled slider
-      </Typography>
-      <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
-    </div>
+        <Typography id="disabled-slider" gutterBottom>
+          Disabled slider
+        </Typography>
+        <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
+        <Typography id="disabled-slider" gutterBottom>
+          Vertical primary slider
+        </Typography>
+        <Slider orientation="vertical" color="primary" defaultValue={30} />
+        <CustomSlider
+          orientation="vertical"
+          color="primary"
+          defaultValue={30}
+        />
+      </div>
+    </ThemeProvider>
   );
 }