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

[core] Batch small changes #22746

Merged
merged 4 commits into from Sep 28, 2020
Merged

[core] Batch small changes #22746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e286a5b
[docs] Remove duplicated ids
oliviertassinari Sep 26, 2020
052a813
[breakpoint] Fix NaN value
oliviertassinari Sep 26, 2020
4741b07
[test] Lowercase to match BrowserStack API results
oliviertassinari Sep 26, 2020
f7acfbc
[docs] Use px
oliviertassinari Sep 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api-docs/swipeable-drawer.md
View file
Open in desktop
Expand Up @@ -36,7 +36,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name required">onOpen<abbr title="required">*</abbr></span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be opened.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
| <span class="prop-name required">open<abbr title="required">*</abbr></span> | <span class="prop-type">bool</span> | | If `true`, the drawer is open. |
| <span class="prop-name">SwipeAreaProps</span> | <span class="prop-type">object</span> | | The element is used to intercept the touch events on the edge. |
| <span class="prop-name">swipeAreaWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">20</span> | The width of the left most (or right most) area in px that the drawer can be swiped open from. |
| <span class="prop-name">swipeAreaWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">20</span> | The width of the left most (or right most) area in `px` that the drawer can be swiped open from. |
| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |

The `ref` is forwarded to the root element.
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider-styled/DiscreteSlider.js
View file
Open in desktop
Expand Up @@ -31,13 +31,13 @@ export default function DiscreteSlider() {
min={10}
max={110}
/>
<Typography id="discrete-slider" gutterBottom>
<Typography id="discrete-slider-disabled" gutterBottom>
Disabled
</Typography>
<Slider
defaultValue={30}
getAriaValueText={valuetext}
aria-labelledby="discrete-slider"
aria-labelledby="discrete-slider-disabled"
valueLabelDisplay="auto"
step={10}
marks
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider-styled/DiscreteSlider.tsx
View file
Open in desktop
Expand Up @@ -31,13 +31,13 @@ export default function DiscreteSlider() {
min={10}
max={110}
/>
<Typography id="discrete-slider" gutterBottom>
<Typography id="discrete-slider-disabled" gutterBottom>
Disabled
</Typography>
<Slider
defaultValue={30}
getAriaValueText={valuetext}
aria-labelledby="discrete-slider"
aria-labelledby="discrete-slider-disabled"
valueLabelDisplay="auto"
step={10}
marks
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider-styled/RangeSlider.js
View file
Open in desktop
Expand Up @@ -23,14 +23,14 @@ export default function RangeSlider() {

return (
<div className={classes.root}>
<Typography id="range-slider" gutterBottom>
<Typography id="range-slider-demo" gutterBottom>
Temperature range
</Typography>
<Slider
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
aria-labelledby="range-slider-demo"
getAriaValueText={valuetext}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider-styled/RangeSlider.tsx
View file
Open in desktop
Expand Up @@ -26,14 +26,14 @@ export default function RangeSlider() {

return (
<div className={classes.root}>
<Typography id="range-slider" gutterBottom>
<Typography id="range-slider-demo" gutterBottom>
Temperature range
</Typography>
<Slider
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
aria-labelledby="range-slider-demo"
getAriaValueText={valuetext}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider/DiscreteSlider.js
View file
Open in desktop
Expand Up @@ -31,13 +31,13 @@ export default function DiscreteSlider() {
min={10}
max={110}
/>
<Typography id="discrete-slider" gutterBottom>
<Typography id="discrete-slider-disabled" gutterBottom>
Disabled
</Typography>
<Slider
defaultValue={30}
getAriaValueText={valuetext}
aria-labelledby="discrete-slider"
aria-labelledby="discrete-slider-disabled"
valueLabelDisplay="auto"
step={10}
marks
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider/DiscreteSlider.tsx
View file
Open in desktop
Expand Up @@ -31,13 +31,13 @@ export default function DiscreteSlider() {
min={10}
max={110}
/>
<Typography id="discrete-slider" gutterBottom>
<Typography id="discrete-slider-disabled" gutterBottom>
Disabled
</Typography>
<Slider
defaultValue={30}
getAriaValueText={valuetext}
aria-labelledby="discrete-slider"
aria-labelledby="discrete-slider-disabled"
valueLabelDisplay="auto"
step={10}
marks
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider/RangeSlider.js
View file
Open in desktop
Expand Up @@ -23,14 +23,14 @@ export default function RangeSlider() {

return (
<div className={classes.root}>
<Typography id="range-slider" gutterBottom>
<Typography id="range-slider-demo" gutterBottom>
Temperature range
</Typography>
<Slider
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
aria-labelledby="range-slider-demo"
getAriaValueText={valuetext}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/slider/RangeSlider.tsx
View file
Open in desktop
Expand Up @@ -26,14 +26,14 @@ export default function RangeSlider() {

return (
<div className={classes.root}>
<Typography id="range-slider" gutterBottom>
<Typography id="range-slider-demo" gutterBottom>
Temperature range
</Typography>
<Slider
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
aria-labelledby="range-slider-demo"
getAriaValueText={valuetext}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/SwipeableDrawer/SwipeArea.js
View file
Open in desktop
Expand Up @@ -64,7 +64,7 @@ SwipeArea.propTypes = {
*/
className: PropTypes.string,
/**
* The width of the left most (or right most) area in px where the
* The width of the left most (or right most) area in `px` where the
* drawer can be swiped open from.
*/
width: PropTypes.number.isRequired,
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.d.ts
View file
Open in desktop
Expand Up @@ -55,7 +55,7 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
*/
SwipeAreaProps?: object;
/**
* The width of the left most (or right most) area in px that
* The width of the left most (or right most) area in `px` that
* the drawer can be swiped open from.
* @default 20
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
View file
Open in desktop
Expand Up @@ -648,7 +648,7 @@ SwipeableDrawer.propTypes = {
*/
SwipeAreaProps: PropTypes.object,
/**
* The width of the left most (or right most) area in px that
* The width of the left most (or right most) area in `px` that
* the drawer can be swiped open from.
* @default 20
*/
Expand Down
10 changes: 1 addition & 9 deletions packages/material-ui/src/styles/createBreakpoints.js
View file
Open in desktop
Expand Up @@ -27,15 +27,7 @@ export default function createBreakpoints(breakpoints) {
}

function down(key) {
const endIndex = keys.indexOf(key);
const upperbound = values[keys[endIndex]];

if (endIndex === keys.length) {
// down from the biggest breakpoint applies to all sizes
return up(0);
}

const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (max-width:${value - step / 100}${unit})`;
}

Expand Down
4 changes: 4 additions & 0 deletions packages/material-ui/src/styles/createBreakpoints.test.js
View file
Open in desktop
Expand Up @@ -34,6 +34,10 @@ describe('createBreakpoints', () => {
expect(breakpoints.down('md')).to.equal('@media (max-width:959.95px)');
});

it('should work for xs', () => {
expect(breakpoints.down('xs')).to.equal('@media (max-width:-0.05px)');
});

it('should accept a number', () => {
expect(breakpoints.down(600)).to.equal('@media (max-width:599.95px)');
});
Expand Down
8 changes: 4 additions & 4 deletions test/karma.conf.js
View file
Open in desktop
Expand Up @@ -115,28 +115,28 @@ module.exports = function setKarmaConfig(config) {
base: 'BrowserStack',
os: 'OS X',
os_version: 'Sierra',
browser: 'Chrome',
browser: 'chrome',
browser_version: '49.0',
},
BrowserStack_Firefox: {
base: 'BrowserStack',
os: 'Windows',
os_version: '10',
browser: 'Firefox',
browser: 'firefox',
browser_version: '52.0',
},
BrowserStack_Safari: {
base: 'BrowserStack',
os: 'OS X',
os_version: 'Sierra',
browser: 'Safari',
browser: 'safari',
browser_version: '10.1',
},
BrowserStack_Edge: {
base: 'BrowserStack',
os: 'Windows',
os_version: '10',
browser: 'Edge',
browser: 'edge',
browser_version: '14.0',
},
},
Expand Down