[docs] Update Style Library Interoperability + Container forwardRef (#…

…15147)

* [docs] Update Style Library Interoperability

* fix IE 11 text transform

* [Container] Forward ref

* [docs] Fix key duplication

* [docs] a date picker is not a calendar

* [docs] Fix ad UI regressions

docs/src/modules/components/Ad.js

@@ -5,8 +5,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 import Paper from '@material-ui/core/Paper';
-import CodeFund from 'docs/src/modules/components/CodeFund';
-import Carbon from 'docs/src/modules/components/Carbon';
+import AdCodeFund from 'docs/src/modules/components/AdCodeFund';
+import AdCarbon from 'docs/src/modules/components/AdCarbon';
 import compose from 'docs/src/modules/utils/compose';
 
 const styles = theme => ({
@@ -35,13 +35,13 @@ const styles = theme => ({
 function getAdblock(classes, t) {
   return (
     <Paper component="span" elevation={0} className={classes.paper}>
-      <Typography display="block" component="span" gutterBottom>
+      <Typography variant="body2" display="block" component="span" gutterBottom>
         {t('likeMui')}
       </Typography>
-      <Typography display="block" component="span" gutterBottom>
+      <Typography variant="body2" display="block" component="span" gutterBottom>
         {t('adblock')}
       </Typography>
-      <Typography display="block" component="span">
+      <Typography variant="body2" display="block" component="span">
         {t('thanks')}{' '}
         <span role="img" aria-label="Love">
           ❤️
@@ -101,7 +101,7 @@ class Ad extends React.Component {
 
     return (
       <span className={classes.root}>
-        {this.random >= 0.9 ? <CodeFund /> : <Carbon />}
+        {this.random >= 0.9 ? <AdCodeFund /> : <AdCarbon />}
         {adblock === true ? getAdblock(classes, t) : null}
         {adblock === false ? (
           <Tooltip id="ad-info" title={t('adTitle')} placement="left">

docs/src/modules/components/Carbon.js → docs/src/modules/components/AdCarbon.js

@@ -20,6 +20,7 @@ const styles = theme => ({
         verticalAlign: 'middle',
       },
       '& a': {
+        color: theme.palette.text.primary,
         textDecoration: 'none',
       },
       '& .carbon-text': {
@@ -35,7 +36,7 @@ const styles = theme => ({
   },
 });
 
-class Carbon extends React.Component {
+class AdCarbon extends React.Component {
   componentDidMount() {
     const scriptSlot = document.querySelector('#carbon-ad');
 
@@ -56,4 +57,4 @@ class Carbon extends React.Component {
   }
 }
 
-export default withStyles(styles)(Carbon);
+export default withStyles(styles)(AdCarbon);

docs/src/modules/components/CodeFund.js → docs/src/modules/components/AdCodeFund.js

@@ -20,6 +20,7 @@ const styles = theme => ({
         verticalAlign: 'middle',
       },
       '& a': {
+        color: theme.palette.text.primary,
         textDecoration: 'none',
       },
       '& .cf-text.cf-text': {
@@ -38,7 +39,7 @@ const styles = theme => ({
   },
 });
 
-class CodeFund extends React.Component {
+class AdCodeFund extends React.Component {
   componentDidMount() {
     const scriptSlot = document.querySelector('#code-fund-script-slot');
 
@@ -60,4 +61,4 @@ class CodeFund extends React.Component {
   }
 }
 
-export default withStyles(styles)(CodeFund);
+export default withStyles(styles)(AdCodeFund);

docs/src/modules/components/MarkdownDocs.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-array-index-key */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
@@ -109,7 +111,7 @@ function MarkdownDocs(props) {
                 sourceCodeRootUrl={SOURCE_CODE_ROOT_URL}
               />
             </div>
-            {contents.map(content => {
+            {contents.map((content, index) => {
               if (demos && demoRegexp.test(content)) {
                 let demoOptions;
                 try {
@@ -155,7 +157,7 @@ function MarkdownDocs(props) {
               }
 
               return (
-                <MarkdownElement className={classes.markdownElement} key={content} text={content} />
+                <MarkdownElement className={classes.markdownElement} key={index} text={content} />
               );
             })}
           </AppContent>

docs/src/pages/demos/pickers/pickers.md

@@ -17,7 +17,7 @@ Have a look at the [complementary projects](#complementary-projects) for a riche
 
 ### Date pickers
 
-A native date picker example with `type="date"`, it can be used as a calendar too.
+A native date picker example with `type="date"`.
 
 {{"demo": "pages/demos/pickers/DatePickers.js"}}
 

docs/src/pages/demos/tabs/CustomizedTabs.js

@@ -19,7 +19,7 @@ const StyledTabs = withStyles({
 
 const StyledTab = withStyles(theme => ({
   root: {
-    textTransform: 'initial',
+    textTransform: 'none',
     color: '#fff',
     fontWeight: theme.typography.fontWeightRegular,
     fontSize: theme.typography.pxToRem(15),
@@ -39,7 +39,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: '#1890ff',
   },
   tabRoot: {
-    textTransform: 'initial',
+    textTransform: 'none',
     minWidth: 72,
     fontWeight: theme.typography.fontWeightRegular,
     marginRight: theme.spacing(4),

docs/src/pages/demos/tabs/CustomizedTabs.tsx

@@ -29,7 +29,7 @@ interface StyledTabProps {
 const StyledTab = withStyles((theme: Theme) =>
   createStyles({
     root: {
-      textTransform: 'initial',
+      textTransform: 'none',
       color: '#fff',
       fontWeight: theme.typography.fontWeightRegular,
       fontSize: theme.typography.pxToRem(15),
@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: '#1890ff',
   },
   tabRoot: {
-    textTransform: 'initial',
+    textTransform: 'none',
     minWidth: 72,
     fontWeight: theme.typography.fontWeightRegular,
     marginRight: theme.spacing(4),

docs/src/pages/guides/interoperability/interoperability.md

@@ -54,7 +54,7 @@ function PlainCssButton() {
 export default PlainCssButton;
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vmv2mz9785)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl)
 
 **Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
@@ -98,7 +98,7 @@ export default StyledComponents;
 
 {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzwqkk1p7j)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv)
 
 **Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
@@ -158,8 +158,6 @@ export default StyledComponentsDeep;
 
 {{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideHeader": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/j4n13yl1r9)
-
 **Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### ThemeProvider
@@ -241,7 +239,7 @@ function CssModulesButton() {
 export default CssModulesButton;
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/m4j01r75wx)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn)
 
 **Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
@@ -260,7 +258,7 @@ import { jsx, css } from "@emotion/core";
 import Button from "@material-ui/core/Button";
 
 // We just assign them the Button's className attribute
-function EmotionCSS() {
+function EmotionButton() {
   return (
     <div>
       <Button>Material-UI</Button>
@@ -281,7 +279,7 @@ function EmotionCSS() {
   );
 }
 
-export default EmotionCSS;
+export default EmotionButton;
 ```
 
 {{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}}
@@ -327,8 +325,6 @@ export default EmotionStyled;
 
 {{"demo": "pages/guides/interoperability/EmotionStyled.js", "hideHeader": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4q8o1y975w)
-
 **Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### Deeper elements
@@ -376,8 +372,6 @@ export default EmotionDeep;
 
 {{"demo": "pages/guides/interoperability/EmotionDeep.js", "hideHeader": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/xj81yqx504)
-
 **Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
 ### ThemeProvider
@@ -424,7 +418,7 @@ function GlobalCssButton() {
 export default GlobalCssButton;
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2zv5m0j37p)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp)
 
 **Note:** JSS injects its styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.
 
@@ -439,7 +433,7 @@ We went ahead and forked the project in order to handle our unique needs, but we
 ```jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import injectSheet from 'react-jss/lib/injectSheet';
+import injectSheet from 'react-jss';
 import Button from '@material-ui/core/Button';
 
 const styles = {
@@ -470,56 +464,7 @@ ReactJssButton.propTypes = {
 export default injectSheet(styles)(ReactJssButton);
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/219x6qqx0p)
-
-## CSS to MUI webpack Loader
-
-The [css-to-mui-loader](https://www.npmjs.com/package/css-to-mui-loader) for webpack allows you to write CSS that gets transpiled into JS for use with the `withStyles()` higher-order component. It provides a few hooks for accessing the theme from within the CSS.
-
-**webpack.config.js**
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [ 'css-to-mui-loader' ]
-      }
-    ]
-  }
-}
-```
-
-**CssToMuiButton.css**
-```css
-.button {
-  background: $(theme.palette.primary.main);
-  padding: 2su; /* Material-UI spacing units */
-}
-
-.button:hover {
-  background: $(theme.palette.primary.light);
-}
-
-@media $(theme.breakpoints.down('sm')) {
-  .button {
-    font-size: $(theme.typography.caption.fontSize);
-  }
-}
-```
-
-**CssToMuiButton.js**
-```js
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
-import styles from './CssToMuiButton.css';
-
-const CssToMuiButton = withStyles(styles)(({ classes }) => (
-  <Button className={classes.button}>
-    CSS to MUI Button
-  </Button>
-));
-```
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp)
 
 ## Glamor
 
@@ -529,45 +474,33 @@ const CssToMuiButton = withStyles(styles)(({ classes }) => (
 A good way to apply styles with Glamor is using the **css()** function and then **classnames** to get them as strings:
 
 ```jsx
-import React from 'react';
-import glamorous from 'glamorous';
-import { css } from 'glamor';
-import classnames from 'classnames';
-import Button from '@material-ui/core/Button';
+import React from "react";
+import { css } from "glamor";
+import Button from "@material-ui/core/Button";
 
 const buttonStyles = {
-  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+  background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
   borderRadius: 3,
   border: 0,
-  color: 'white',
+  color: "white",
   height: 48,
-  padding: '0 30px',
-  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+  padding: "0 30px",
+  boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .30)"
 };
 
-// First we get the clsx with Glamor css function
-const buttonClasses = css(buttonStyles);
-
-// We need the class names to be strings
-const className = buttonClasses.toString();
-
 // Then we just assign them the Button's className attribute
 function GlamorButton() {
   return (
     <div>
-      <Button>
-        Material-UI
-      </Button>
-      <Button className={className}>
-        Glamor
-      </Button>
+      <Button>Material-UI</Button>
+      <Button {...css(buttonStyles)}>Glamor</Button>
     </div>
   );
 }
 
 export default GlamorButton;
 ```
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vp2znmj40)
 
 **Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/css-in-js/advanced/#css-injection-order), as in the demo.

docs/src/pages/premium-themes/paperbase/Paperbase.js

@@ -38,7 +38,7 @@ theme = {
     },
     MuiButton: {
       label: {
-        textTransform: 'initial',
+        textTransform: 'none',
       },
       contained: {
         boxShadow: 'none',
@@ -60,7 +60,7 @@ theme = {
     },
     MuiTab: {
       root: {
-        textTransform: 'initial',
+        textTransform: 'none',
         margin: '0 16px',
         minWidth: 0,
         padding: 0,

packages/material-ui/src/Container/Container.js

@@ -58,7 +58,7 @@ export const styles = theme => ({
   },
 });
 
-function Container(props) {
+const Container = React.forwardRef(function Container(props, ref) {
   const { children, classes, className, component: Component, fixed, maxWidth, ...other } = props;
 
   return (
@@ -71,12 +71,13 @@ function Container(props) {
         },
         className,
       )}
+      ref={ref}
       {...other}
     >
       {children}
     </Component>
   );
-}
+});
 
 Container.propTypes = {
   children: PropTypes.node.isRequired,