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] Experiments for base component #4

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

[Slider] Experiments for base component #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9eaed9d
wip
mnajdova Aug 5, 2020
b13a958
add emotion wip
mnajdova Aug 5, 2020
9d4d4b2
fixed active styles
mnajdova Aug 5, 2020
5eb2fee
class normalization
mnajdova Aug 5, 2020
f3d0bac
styled
mnajdova Aug 6, 2020
08c8aa4
fix
mnajdova Aug 6, 2020
0648c07
filtered valid prop on the elements, removed componentsProps in favor…
mnajdova Aug 8, 2020
e6843ee
added class name builders
mnajdova Aug 8, 2020
6d07d53
added tests
mnajdova Aug 8, 2020
c5942d2
perf examples + slider with default props
mnajdova Aug 11, 2020
f95ce09
updated classes generation
mnajdova Aug 23, 2020
e67bdd1
added classes obj
mnajdova Aug 29, 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
82 changes: 82 additions & 0 deletions docs/pages/performance/slider-base-default-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import { SliderBase as Slider } from '@material-ui/core/Slider';

const PerfExample = () => {
function valuetext(value) {
return `${value}°C`;
}

const marks = [
{
value: 0,
label: '0°C',
},
{
value: 20,
label: '20°C',
},
{
value: 37,
label: '37°C',
},
{
value: 100,
label: '100°C',
},
];

return (
<>
<Slider
track={false}
aria-labelledby="track-false-slider"
getAriaValueText={valuetext}
defaultValue={30}
marks={marks}
/>
<Slider
track={false}
aria-labelledby="track-false-range-slider"
getAriaValueText={valuetext}
defaultValue={[20, 37, 50]}
marks={marks}
/>
<Slider
track="inverted"
aria-labelledby="track-inverted-slider"
getAriaValueText={valuetext}
defaultValue={30}
marks={marks}
/>
<Slider
track="inverted"
aria-labelledby="track-inverted-range-slider"
getAriaValueText={valuetext}
defaultValue={[20, 37]}
marks={marks}
/>
<Slider
orientation="vertical"
getAriaValueText={valuetext}
defaultValue={30}
aria-labelledby="vertical-slider"
/>
<Slider
disabled
orientation="vertical"
getAriaValueText={valuetext}
defaultValue={30}
aria-labelledby="vertical-slider"
/>
<Slider
orientation="vertical"
defaultValue={[20, 37]}
aria-labelledby="vertical-slider"
getAriaValueText={valuetext}
marks={marks}
/>
</>
);
};

export default PerfExample;
82 changes: 82 additions & 0 deletions docs/pages/performance/slider-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import Slider from '@material-ui/core/Slider';

const PerfExample = () => {
function valuetext(value) {
return `${value}°C`;
}

const marks = [
{
value: 0,
label: '0°C',
},
{
value: 20,
label: '20°C',
},
{
value: 37,
label: '37°C',
},
{
value: 100,
label: '100°C',
},
];

return (
<>
<Slider
track={false}
aria-labelledby="track-false-slider"
getAriaValueText={valuetext}
defaultValue={30}
marks={marks}
/>
<Slider
track={false}
aria-labelledby="track-false-range-slider"
getAriaValueText={valuetext}
defaultValue={[20, 37, 50]}
marks={marks}
/>
<Slider
track="inverted"
aria-labelledby="track-inverted-slider"
getAriaValueText={valuetext}
defaultValue={30}
marks={marks}
/>
<Slider
track="inverted"
aria-labelledby="track-inverted-range-slider"
getAriaValueText={valuetext}
defaultValue={[20, 37]}
marks={marks}
/>
<Slider
orientation="vertical"
getAriaValueText={valuetext}
defaultValue={30}
aria-labelledby="vertical-slider"
/>
<Slider
disabled
orientation="vertical"
getAriaValueText={valuetext}
defaultValue={30}
aria-labelledby="vertical-slider"
/>
<Slider
orientation="vertical"
defaultValue={[20, 37]}
aria-labelledby="vertical-slider"
getAriaValueText={valuetext}
marks={marks}
/>
</>
);
};

export default PerfExample;
4 changes: 4 additions & 0 deletions packages/material-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,16 @@
},
"dependencies": {
"@babel/runtime": "^7.4.4",
"@emotion/core": "^10.0.28",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/styled": "^10.0.27",
"@material-ui/styles": "^5.0.0-alpha.1",
"@material-ui/system": "^5.0.0-alpha.1",
"@material-ui/types": "^5.1.0",
"@material-ui/utils": "^5.0.0-alpha.1",
"@types/react-transition-group": "^4.2.0",
"clsx": "^1.0.4",
"emotion-theming": "^10.0.27",
"hoist-non-react-statics": "^3.3.2",
"popper.js": "1.16.1-lts",
"prop-types": "^15.7.2",
Expand Down
Loading