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.

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

[core] Small fixes #19803

Merged
merged 7 commits into from
Feb 23, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions docker-compose.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
hub:
image: selenium/hub:3.11.0
image: selenium/hub:3.141.0
ports:
- 4444:4444
chrome:
image: selenium/node-chrome:3.11.0
image: selenium/node-chrome:3.141.0
links:
- hub
1 change: 1 addition & 0 deletions docs/src/modules/components/MarkdownElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const externs = [
'https://www.w3.org/',
'https://devexpress.github.io/',
'https://ui-kit.co/',
'https://udemy.com',
];

renderer.link = (href, title, text) => {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/icons/FontAwesome.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function FontAwesome() {

React.useEffect(() => {
loadCSS(
'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
'https://use.fontawesome.com/releases/v5.12.0/css/all.css',
document.querySelector('#font-awesome-css'),
);
}, []);
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/icons/FontAwesome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function FontAwesome() {

React.useEffect(() => {
loadCSS(
'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
'https://use.fontawesome.com/releases/v5.12.0/css/all.css',
document.querySelector('#font-awesome-css'),
);
}, []);
Expand Down
36 changes: 23 additions & 13 deletions docs/src/pages/components/pagination/PaginationLink.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { MemoryRouter, Route } from 'react-router';
import { Link } from 'react-router-dom';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';

export default function PaginationLink() {
return (
<Router>
<Pagination
count={10}
renderItem={item => (
<PaginationItem
component={Link}
to={`/cars${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>
</Router>
<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
<Route>
{({ location }) => {
const query = new URLSearchParams(location.search);
const page = parseInt(query.get('page'), 10) || 1;

return (
<Pagination
page={page}
count={10}
renderItem={item => (
<PaginationItem
component={Link}
to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>
);
}}
</Route>
</MemoryRouter>
);
}
4 changes: 2 additions & 2 deletions docs/src/pages/components/text-fields/text-fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,5 +218,5 @@ In order for the text field to be accessible, **the input should be linked to th
For more advanced use cases you might be able to take advantage of:

- [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with [formik](https://jaredpalmer.com/formik).
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Bindings for using Material UI with [Redux Form](https://redux-form.com/).
- [mui-rff](https://github.com/lookfirst/mui-rff) Bindings for using Material UI with [React Final Form](https://final-form.org/react).
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Bindings for using Material-UI with [Redux Form](https://redux-form.com/).
- [mui-rff](https://github.com/lookfirst/mui-rff) Bindings for using Material-UI with [React Final Form](https://final-form.org/react).
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ This is a collection of third-party projects that extend Material-UI.
### Forms

- [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with [formik](https://jaredpalmer.com/formik).
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Bindings for using Material UI with [Redux Form](https://redux-form.com/).
- [mui-rff](https://github.com/lookfirst/mui-rff) Bindings for using Material UI with [React Final Form](https://final-form.org/react).
- [data-driven-forms MUI mapper](https://github.com/data-driven-forms/react-forms/tree/master/packages/mui-component-mapper) Bindings for using Material UI with [Data Driven Forms](https://data-driven-forms.org/).
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Bindings for using Material-UI with [Redux Form](https://redux-form.com/).
- [mui-rff](https://github.com/lookfirst/mui-rff) Bindings for using Material-UI with [React Final Form](https://final-form.org/react).
- [data-driven-forms MUI mapper](https://github.com/data-driven-forms/react-forms/tree/master/packages/mui-component-mapper) Bindings for using Material-UI with [Data Driven Forms](https://data-driven-forms.org/).

### Carousel

Expand Down
8 changes: 6 additions & 2 deletions docs/src/pages/getting-started/learn/learn.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,15 @@ Here are some recommended resources, some of which are free.

### Paid

- **Material-UI with React**: Material-UI is an excellent framework to develop beautiful React components faster! This course teaches the fundamentals of Google Material Design and how to develop an end-to-end flight search and booking application using Material-UI and React.
- **Apply Google Material Design**: This course teaches the fundamentals of Google Material Design and how to develop an end-to-end flight search and booking application using Material-UI and React.
- 📹 [Watch Course Trailer](https://www.youtube.com/watch?v=hhZ6yFvCWho)
- 💻 [The Course](https://bonsaiilabs.com/courseDetail/material-ui-with-react)

- **React Material-UI Cookbook**: Build modern-day applications by implementing Material Design principles in React, using Material-UI.
- **Implement high fidelity designs**: Bridge the gap between Design & Development. Break down detailed designs and bring them to life with Material-UI and React.

- 💻 [The Course](https://www.udemy.com/course/implement-high-fidelity-designs-with-material-ui-and-reactjs/)

- **Cookbook**: Build modern-day applications by implementing Material Design principles in React, using Material-UI.
- 📘 [The book](https://www.amazon.com/gp/product/1789615224/)

[![cookbook](/static/blog/material-ui-v4-is-out/cookbook.png)](https://www.amazon.com/gp/product/1789615224/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@ Combined with [dangerJS](https://danger.systems/js/) we can inspect

## When and how to use tree-shaking?

Tree-shaking of Material UI works out of the box in modern frameworks. Material UI exposes its full API on the top-level
`material-ui` import. If you're using ES6 modules and a bundler that supports tree-shaking
([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/),
[`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely
use named imports and still get an optimised bundle size automatically:
Tree-shaking of Material-UI works out of the box in modern frameworks.
Material-UI exposes its full API on the top-level `material-ui` import.
If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimised bundle size automatically:

```js
import { Button, TextField } from '@material-ui/core';
Expand Down
5 changes: 0 additions & 5 deletions packages/material-ui/src/styles/cssUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,6 @@ export function convertLength(baseFontSize) {
pxLength = toUnitless(length) * toUnitless(baseFontSize);
} else if (fromUnit === 'rem') {
pxLength = toUnitless(length) * toUnitless(baseFontSize);
} else if (fromUnit === 'ex') {
pxLength = toUnitless(length) * toUnitless(baseFontSize) * 2;
} else {
return length;
}
}
Expand All @@ -47,8 +44,6 @@ export function convertLength(baseFontSize) {
outputLength = pxLength / toUnitless(baseFontSize);
} else if (toUnit === 'rem') {
outputLength = pxLength / toUnitless(baseFontSize);
} else if (toUnit === 'ex') {
outputLength = pxLength / toUnitless(baseFontSize) / 2;
} else {
return length;
}
Expand Down
2 changes: 1 addition & 1 deletion test/regressions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ vrtest.before(() => {
families: ['Roboto:300,400,500,700', 'Material+Icons'],
},
custom: {
families: ['Font Awesome 5 Free:400,900'],
families: ['Font Awesome 5 Free:n9'],
urls: ['https://use.fontawesome.com/releases/v5.1.0/css/all.css'],
},
timeout: 20000,
Expand Down