Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Slider] Unstyled version + emotion styled #5

Open
wants to merge 37 commits into
base: origin/next
Choose a base branch
from
Open

[Slider] Unstyled version + emotion styled #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
f966e23
wip
mnajdova Aug 29, 2020
4c58672
fix
mnajdova Aug 29, 2020
7fe38a0
implementet theme default props, implemented rtl
mnajdova Aug 31, 2020
0f9b659
wip overrides, needs refactor
mnajdova Aug 31, 2020
6adbc82
converted CustomizedSlider to use components for overrides
mnajdova Sep 1, 2020
0c98292
cleanups
mnajdova Sep 1, 2020
99499b6
overrides fixed
mnajdova Sep 1, 2020
d375e3d
reverted changes in continious slider
mnajdova Sep 1, 2020
40f7019
Merge branch 'next' into feat/slider-emotion
mnajdova Sep 1, 2020
4777a55
reverted some changes
mnajdova Sep 1, 2020
f891647
implemented variants
mnajdova Sep 1, 2020
2c22ace
fixed variants presendance over overrides
mnajdova Sep 1, 2020
5e7f826
prettier + docs:formatted
mnajdova Sep 1, 2020
940f6d7
renamed components
mnajdova Sep 2, 2020
3a80cda
Update packages/material-ui/src/Slider/Slider.js
mnajdova Sep 3, 2020
27e7286
components names fixed
mnajdova Sep 3, 2020
2946ee1
fixed used cx in base
mnajdova Sep 3, 2020
03a64fa
export *
mnajdova Sep 3, 2020
b05a8e7
reverted some changes
mnajdova Sep 3, 2020
a21e199
fixed disabled and active class selectors
mnajdova Sep 3, 2020
ff8af15
Update packages/material-ui/src/Slider/Slider.d.ts
mnajdova Sep 3, 2020
fa0b76f
try to style the unstyled component
oliviertassinari Sep 3, 2020
8f22840
have the demo interactive
oliviertassinari Sep 3, 2020
c448969
fixed style, fixed classnames
mnajdova Sep 7, 2020
7564cc0
Merge branch 'next' into feat/slider-emotion
mnajdova Sep 7, 2020
4333ed1
merge conflicts
mnajdova Sep 7, 2020
79b8a26
moved cache creation
mnajdova Sep 7, 2020
0780a15
improved typings
mnajdova Sep 7, 2020
530b79f
fixed overrides & extracted state
mnajdova Sep 7, 2020
49e50e4
fixed ts
mnajdova Sep 7, 2020
9ec7c65
wip
mnajdova Sep 9, 2020
6f87bc1
extracted muiStyled wip
mnajdova Sep 9, 2020
4cdb02c
removed dependency + cleanup
mnajdova Sep 9, 2020
551e2f9
cleanups
mnajdova Sep 9, 2020
bb0e959
refactors
mnajdova Sep 9, 2020
0fbd75e
refactors and comments addressed
mnajdova Sep 10, 2020
1da5ffe
extracted muiStyled default params
mnajdova Sep 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 63 additions & 23 deletions docs/src/pages/components/slider/ContinuousSlider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
);
}
88 changes: 64 additions & 24 deletions docs/src/pages/components/slider/ContinuousSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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>
);
}
Loading