[core] Small fixes (mui#19803)

EsoterikStare · Mar 30, 2020 · f2ba979 · f2ba979
1 parent 0a9cd37
commit f2ba979
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 35 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -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
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -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) => {

diff --git a/docs/src/pages/components/icons/FontAwesome.js b/docs/src/pages/components/icons/FontAwesome.js
@@ -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'),
     );
   }, []);

diff --git a/docs/src/pages/components/icons/FontAwesome.tsx b/docs/src/pages/components/icons/FontAwesome.tsx
@@ -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'),
     );
   }, []);

diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js
@@ -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>
   );
 }
diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md
@@ -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).
diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md
@@ -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
 

diff --git a/docs/src/pages/getting-started/learn/learn.md b/docs/src/pages/getting-started/learn/learn.md
@@ -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/)

diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size.md
@@ -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';

diff --git a/packages/material-ui/src/styles/cssUtils.js b/packages/material-ui/src/styles/cssUtils.js
@@ -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;
       }
     }
@@ -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;
       }

diff --git a/test/regressions/index.js b/test/regressions/index.js
@@ -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,