Skip to content

Commit 803c103

Browse files
limatganslimatgans
committed
Resolved Merge Conflicts
2 parents 5e51e82 + 321753a commit 803c103

File tree

20 files changed

+405
-39
lines changed

20 files changed

+405
-39
lines changed

‎dangerfile.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -171,10 +171,10 @@ async function run() {
171171
.map(([bundleId, size]) => [computeBundleLabel(bundleId), size])
172172
// orderBy(|parsedDiff| DESC, |gzipDiff| DESC, name ASC)
173173
.sort(([labelA, statsA], [labelB, statsB]) => {
174-
const compareParsedDiff = Math.abs(
175-
statsB.parsed.absoluteDiff - statsA.parsed.absoluteDiff,
176-
);
177-
const compareGzipDiff = Math.abs(statsB.gzip.absoluteDiff - statsA.gzip.absoluteDiff);
174+
const compareParsedDiff =
175+
Math.abs(statsB.parsed.absoluteDiff) - Math.abs(statsA.parsed.absoluteDiff);
176+
const compareGzipDiff =
177+
Math.abs(statsB.gzip.absoluteDiff) - Math.abs(statsA.gzip.absoluteDiff);
178178
const compareName = labelA.localeCompare(labelB);
179179

180180
if (compareParsedDiff === 0 && compareGzipDiff === 0) {

‎docs/pages/api/slider.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
4343
| <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
4444
| <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
4545
| <span class="prop-name">ThumbComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used to display the value label. |
46+
| <span class="prop-name">track</span> | <span class="prop-type">'normal'<br>&#124;&nbsp;false<br>&#124;&nbsp;'inverted'</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
4647
| <span class="prop-name">value</span> | <span class="prop-type">number<br>&#124;&nbsp;Array<number></span> | | The value of the slider. For ranged sliders, provide an array with two values. |
4748
| <span class="prop-name">ValueLabelComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ValueLabel</span> | The value label component. |
4849
| <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'on'<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;'off'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
@@ -67,6 +68,8 @@ Any other props supplied will be provided to the root element (native element).
6768
| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
6869
| <span class="prop-name">rail</span> | <span class="prop-name">MuiSlider-rail</span> | Styles applied to the rail element.
6970
| <span class="prop-name">track</span> | <span class="prop-name">MuiSlider-track</span> | Styles applied to the track element.
71+
| <span class="prop-name">trackFalse</span> | <span class="prop-name">MuiSlider-trackFalse</span> | Styles applied to the track element if `track={false}`.
72+
| <span class="prop-name">trackInverted</span> | <span class="prop-name">MuiSlider-trackInverted</span> | Styles applied to the track element if `track="inverted"`.
7073
| <span class="prop-name">thumb</span> | <span class="prop-name">MuiSlider-thumb</span> | Styles applied to the thumb element.
7174
| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">MuiSlider-thumbColorPrimary</span> | Styles applied to the thumb element if `color="primary"`.
7275
| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">MuiSlider-thumbColorSecondary</span> | Styles applied to the thumb element if `color="secondary"`.

‎docs/pages/api/speed-dial.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
3131
| <span class="prop-name">FabProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`Fab`](/api/fab/) element. |
3232
| <span class="prop-name">hidden</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the SpeedDial will be hidden. |
3333
| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | The icon to display in the SpeedDial Fab. The `SpeedDialIcon` component provides a default Icon with animation. |
34-
| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
35-
| <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be open.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
34+
| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be:`"toggle"`, `"blur"`, `"mouseLeave"`, `"escapeKeyDown"`. |
35+
| <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be open.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be:`"toggle"`, `"focus"`, `"mouseEnter"`. |
3636
| <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> | | If `true`, the SpeedDial is open. |
3737
| <span class="prop-name">openIcon</span> | <span class="prop-type">node</span> | | The icon to display in the SpeedDial Fab when the SpeedDial is open. |
3838
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Zoom</span> | The component used for the transition. |

‎docs/src/pages/components/slider/TrackFalseSlider.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import Slider from '@material-ui/core/Slider';
5+
6+
const useStyles = makeStyles(theme => ({
7+
root: {
8+
width: 250,
9+
},
10+
margin: {
11+
height: theme.spacing(3),
12+
},
13+
}));
14+
15+
const marks = [
16+
{
17+
value: 0,
18+
label: '0°C',
19+
},
20+
{
21+
value: 20,
22+
label: '20°C',
23+
},
24+
{
25+
value: 37,
26+
label: '37°C',
27+
},
28+
{
29+
value: 100,
30+
label: '100°C',
31+
},
32+
];
33+
34+
function valuetext(value) {
35+
return `${value}°C`;
36+
}
37+
38+
export default function TrackFalseSlider() {
39+
const classes = useStyles();
40+
41+
return (
42+
<div className={classes.root}>
43+
<Typography id="track-false-slider" gutterBottom>
44+
Removed track
45+
</Typography>
46+
<Slider
47+
track={false}
48+
aria-labelledby="track-false-slider"
49+
getAriaValueText={valuetext}
50+
defaultValue={30}
51+
marks={marks}
52+
/>
53+
<div className={classes.margin} />
54+
<Typography id="track-false-multi-values-slider" gutterBottom>
55+
Removed track multi-values
56+
</Typography>
57+
<Slider
58+
track={false}
59+
aria-labelledby="track-false-range-slider"
60+
getAriaValueText={valuetext}
61+
defaultValue={[20, 37, 50]}
62+
marks={marks}
63+
/>
64+
</div>
65+
);
66+
}

‎docs/src/pages/components/slider/TrackFalseSlider.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import Slider from '@material-ui/core/Slider';
5+
6+
const useStyles = makeStyles((theme: Theme) =>
7+
createStyles({
8+
root: {
9+
width: 250,
10+
},
11+
margin: {
12+
height: theme.spacing(3),
13+
},
14+
}),
15+
);
16+
17+
const marks = [
18+
{
19+
value: 0,
20+
label: '0°C',
21+
},
22+
{
23+
value: 20,
24+
label: '20°C',
25+
},
26+
{
27+
value: 37,
28+
label: '37°C',
29+
},
30+
{
31+
value: 100,
32+
label: '100°C',
33+
},
34+
];
35+
36+
function valuetext(value: number) {
37+
return `${value}°C`;
38+
}
39+
40+
export default function TrackFalseSlider() {
41+
const classes = useStyles();
42+
43+
return (
44+
<div className={classes.root}>
45+
<Typography id="track-false-slider" gutterBottom>
46+
Removed track
47+
</Typography>
48+
<Slider
49+
track={false}
50+
aria-labelledby="track-false-slider"
51+
getAriaValueText={valuetext}
52+
defaultValue={30}
53+
marks={marks}
54+
/>
55+
<div className={classes.margin} />
56+
<Typography id="track-false-multi-values-slider" gutterBottom>
57+
Removed track multi-values
58+
</Typography>
59+
<Slider
60+
track={false}
61+
aria-labelledby="track-false-range-slider"
62+
getAriaValueText={valuetext}
63+
defaultValue={[20, 37, 50]}
64+
marks={marks}
65+
/>
66+
</div>
67+
);
68+
}

‎docs/src/pages/components/slider/TrackInvertedSlider.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import Slider from '@material-ui/core/Slider';
5+
6+
const useStyles = makeStyles(theme => ({
7+
root: {
8+
width: 250,
9+
},
10+
margin: {
11+
height: theme.spacing(3),
12+
},
13+
}));
14+
15+
const marks = [
16+
{
17+
value: 0,
18+
label: '0°C',
19+
},
20+
{
21+
value: 20,
22+
label: '20°C',
23+
},
24+
{
25+
value: 37,
26+
label: '37°C',
27+
},
28+
{
29+
value: 100,
30+
label: '100°C',
31+
},
32+
];
33+
34+
function valuetext(value) {
35+
return `${value}°C`;
36+
}
37+
38+
export default function TrackInvertedSlider() {
39+
const classes = useStyles();
40+
41+
return (
42+
<div className={classes.root}>
43+
<Typography id="track-inverted-slider" gutterBottom>
44+
Inverted track
45+
</Typography>
46+
<Slider
47+
track="inverted"
48+
aria-labelledby="track-inverted-slider"
49+
getAriaValueText={valuetext}
50+
defaultValue={30}
51+
marks={marks}
52+
/>
53+
<div className={classes.margin} />
54+
<Typography id="track-inverted-range-slider" gutterBottom>
55+
Inverted track range
56+
</Typography>
57+
<Slider
58+
track="inverted"
59+
aria-labelledby="track-inverted-range-slider"
60+
getAriaValueText={valuetext}
61+
defaultValue={[20, 37]}
62+
marks={marks}
63+
/>
64+
</div>
65+
);
66+
}

‎docs/src/pages/components/slider/TrackInvertedSlider.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import Slider from '@material-ui/core/Slider';
5+
6+
const useStyles = makeStyles((theme: Theme) =>
7+
createStyles({
8+
root: {
9+
width: 250,
10+
},
11+
margin: {
12+
height: theme.spacing(3),
13+
},
14+
}),
15+
);
16+
17+
const marks = [
18+
{
19+
value: 0,
20+
label: '0°C',
21+
},
22+
{
23+
value: 20,
24+
label: '20°C',
25+
},
26+
{
27+
value: 37,
28+
label: '37°C',
29+
},
30+
{
31+
value: 100,
32+
label: '100°C',
33+
},
34+
];
35+
36+
function valuetext(value: number) {
37+
return `${value}°C`;
38+
}
39+
40+
export default function TrackInvertedSlider() {
41+
const classes = useStyles();
42+
43+
return (
44+
<div className={classes.root}>
45+
<Typography id="track-inverted-slider" gutterBottom>
46+
Inverted track
47+
</Typography>
48+
<Slider
49+
track="inverted"
50+
aria-labelledby="track-inverted-slider"
51+
getAriaValueText={valuetext}
52+
defaultValue={30}
53+
marks={marks}
54+
/>
55+
<div className={classes.margin} />
56+
<Typography id="track-inverted-range-slider" gutterBottom>
57+
Inverted track range
58+
</Typography>
59+
<Slider
60+
track="inverted"
61+
aria-labelledby="track-inverted-range-slider"
62+
getAriaValueText={valuetext}
63+
defaultValue={[20, 37]}
64+
marks={marks}
65+
/>
66+
</div>
67+
);
68+
}

‎docs/src/pages/components/slider/slider.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,22 @@ Continuous sliders allow users to select a value along a subjective range.
4848

4949
{{"demo": "pages/components/slider/VerticalSlider.js"}}
5050

51+
## Track
52+
53+
The track shows the range available for user selection.
54+
55+
### Removed track
56+
57+
The track can be turned off with `track={false}`.
58+
59+
{{"demo": "pages/components/slider/TrackFalseSlider.js"}}
60+
61+
### Inverted track
62+
63+
The track can be inverted with `track="inverted"`.
64+
65+
{{"demo": "pages/components/slider/TrackInvertedSlider.js"}}
66+
5167
## Accessibility
5268

5369
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)

‎docs/src/pages/customization/components/Component.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React from 'react';
22
import ClassNames from 'docs/src/pages/customization/components/ClassNames';
33

44
// We can use ClassNames over and over.
5-
function Component() {
5+
export default function Component() {
66
return <ClassNames>Component</ClassNames>;
77
}
8-
9-
export default Component;

‎docs/src/pages/customization/components/Component.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React from 'react';
22
import ClassNames from 'docs/src/pages/customization/components/ClassNames';
33

44
// We can use ClassNames over and over.
5-
function Component() {
5+
export default function Component() {
66
return <ClassNames>Component</ClassNames>;
77
}
8-
9-
export default Component;

0 commit comments

Comments
 (0)