new component

docs/pages/api/css-baseline.md

@@ -25,11 +25,27 @@ Kickstart an elegant, consistent, and simple baseline to build upon.
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> | <span class="prop-default">null</span> | You can wrap a node. |
-| <span class="prop-name">scopeToChildren</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If true the css baseline is only applied to the children |
 
 The component cannot hold a ref.
 
 
+## CSS
+
+- Style sheet name: `MuiCssBaseline`.
+- Style sheet details:
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">@global</span> | | Apply global styles.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js) for more detail.
+
 ## Demos
 
 - [Css Baseline](/components/css-baseline/)

docs/pages/api/input-base.md

@@ -66,6 +66,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
+| <span class="prop-name">@global</span> | | Apply global styles.
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiInputBase-root</span> | Styles applied to the root element.
 | <span class="prop-name">formControl</span> | <span class="prop-name">.MuiInputBase-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.

docs/pages/api/scoped-css-basline.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './scoped-css-basline.md';
+
+export default function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}

docs/pages/api/scoped-css-basline.md

@@ -0,0 +1,50 @@
+---
+filename: /packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ScopedCssBasline API
+
+<p class="description">The API documentation of the ScopedCssBasline React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import ScopedCssBasline from '@material-ui/core/ScopedCssBasline';
+// or
+import { ScopedCssBasline } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+- Style sheet name: `MuiScopedCssBasline`.
+- Style sheet details:
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiScopedCssBasline-root</span> | Styles applied to the root element.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.js) for more detail.
+

docs/src/modules/utils/generateMarkdown.js

@@ -342,8 +342,11 @@ function generateClasses(reactAPI) {
   text = `| Rule name | Global class | Description |
 |:-----|:-------------|:------------|\n`;
   text += reactAPI.styles.classes
-    .filter(cls => cls !== '@global')
     .map(styleRule => {
+      if (styleRule === '@global') {
+        return '| <span class="prop-name">@global</span> | | Apply global styles.';
+      }
+
       const description = reactAPI.styles.descriptions[styleRule];
 
       if (typeof description === 'undefined' && ['Grid', 'Paper'].indexOf(reactAPI.name) === -1) {

docs/src/pages/components/css-baseline/css-baseline.md

@@ -1,11 +1,13 @@
 ---
-components: CssBaseline
+components: CssBaseline, ScopedCssBaseline
 ---
 
 # CSS Baseline
 
 <p class="description">Material-UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.</p>
 
+## Global reset
+
 You might be familiar with [normalize.css](https://github.com/necolas/normalize.css), a collection of HTML element and attribute style-normalizations.
 
 ```jsx
@@ -24,17 +26,18 @@ export default function MyApp() {
 
 ## Scoping on children
 
-It's possible to apply the baseline only on the children by setting the prop `scopeToChildren` to true.
+However, you might be progressively migrating a website to Material-UI, using a global reset might not be an option.
+It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component.
 
 ```jsx
 import React from 'react';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
 
 export default function MyApp() {
   return (
-    <CssBaseline scopeToChildren>
+    <ScopedCssBaseline>
       {/* The rest of your application */}
-    </CssBaseline>
+    </ScopedCssBaseline>
   );
 }
 ```
@@ -60,6 +63,5 @@ which ensures that the declared width of the element is never exceeded due to pa
 - No base font-size is declared on the `<html>`, but 16px is assumed (the browser default).
 You can learn more about the implications of changing the `<html>` default font size in [the theme documentation](/customization/typography/#typography-html-font-size) page.
 - Set the `theme.typography.body2` style on the `<body>` element.
-- Set the font-weight to "bolder" for the `<b>` and `<strong>` elements.
-  Bolder is one font weight heavier than the parent element (among the available weights of the font).
+- Set the font-weight to `theme.typography.fontWeightBold` for the `<b>` and `<strong>` elements.
 - Font antialiasing is enabled for better display of the Roboto font.

packages/material-ui/src/CssBaseline/CssBaseline.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 export interface CssBaselineProps {
   children?: React.ReactElement;
-  scopeToChildren?: boolean;
 }
 
 declare const CssBaseline: React.ComponentType<CssBaselineProps>;

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

@@ -1,95 +1,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import makeStyles from '../styles/makeStyles';
+import withStyles from '../styles/withStyles';
 import { exactProp } from '@material-ui/utils';
 
-const useGlobalStyles = makeStyles(
-  theme => ({
-    '@global': {
-      html: {
-        WebkitFontSmoothing: 'antialiased', // Antialiasing.
-        MozOsxFontSmoothing: 'grayscale', // Antialiasing.
-        // Change from `box-sizing: content-box` so that `width`
-        // is not affected by `padding` or `border`.
-        boxSizing: 'border-box',
-      },
-      '*, *::before, *::after': {
-        boxSizing: 'inherit',
-      },
-      'strong, b': {
-        fontWeight: 'bolder',
-      },
-      body: {
-        margin: 0, // Remove the margin in all browsers.
-        color: theme.palette.text.primary,
-        ...theme.typography.body2,
-        backgroundColor: theme.palette.background.default,
-        '@media print': {
-          // Save printer ink.
-          backgroundColor: theme.palette.common.white,
-        },
-        // Add support for document.body.requestFullScreen().
-        // Other elements, if background transparent, are not supported.
-        '&::backdrop': {
-          backgroundColor: theme.palette.background.default,
-        },
-      },
-    },
-  }),
-  { name: 'MuiCssBaseline' },
-);
+export const html = {
+  WebkitFontSmoothing: 'antialiased', // Antialiasing.
+  MozOsxFontSmoothing: 'grayscale', // Antialiasing.
+  // Change from `box-sizing: content-box` so that `width`
+  // is not affected by `padding` or `border`.
+  boxSizing: 'border-box',
+};
 
-const useScopedStyles = makeStyles(
-  theme => ({
-    root: {
-      WebkitFontSmoothing: 'antialiased', // Antialiasing.
-      MozOsxFontSmoothing: 'grayscale', // Antialiasing.
-      // Change from `box-sizing: content-box` so that `width`
-      // is not affected by `padding` or `border`.
-      boxSizing: 'border-box',
-      '& *, & *::before, & *::after': {
-        boxSizing: 'inherit',
-      },
-      '& strong, & b': {
-        fontWeight: 'bolder',
-      },
-      color: theme.palette.text.primary,
-      ...theme.typography.body2,
-      backgroundColor: theme.palette.background.default,
-      '@media print': {
-        // Save printer ink.
-        backgroundColor: theme.palette.common.white,
-      },
+export const body = theme => ({
+  color: theme.palette.text.primary,
+  ...theme.typography.body2,
+  backgroundColor: theme.palette.background.default,
+  '@media print': {
+    // Save printer ink.
+    backgroundColor: theme.palette.common.white,
+  },
+});
+
+export const styles = theme => ({
+  '@global': {
+    html,
+    '*, *::before, *::after': {
+      boxSizing: 'inherit',
+    },
+    'strong, b': {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    body: {
+      margin: 0, // Remove the margin in all browsers.
+      ...body(theme),
       // Add support for document.body.requestFullScreen().
       // Other elements, if background transparent, are not supported.
       '&::backdrop': {
         backgroundColor: theme.palette.background.default,
       },
     },
-  }),
-  { name: 'MuiCssBaseline' },
-);
-
-const createUseStyles = scopeToChildren => {
-  if (scopeToChildren) {
-    return useScopedStyles;
-  }
-
-  return useGlobalStyles;
-};
+  },
+});
 
 /**
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
 function CssBaseline(props) {
-  const { children = null, scopeToChildren = false } = props;
-  const useStyles = createUseStyles(scopeToChildren);
-  const classes = useStyles(props);
-
-  if (scopeToChildren) {
-    return <div className={classes.root}>{children}</div>;
-  }
-
+  const { children = null } = props;
   return <React.Fragment>{children}</React.Fragment>;
 }
 
@@ -98,15 +55,11 @@ CssBaseline.propTypes = {
    * You can wrap a node.
    */
   children: PropTypes.node,
-  /**
-   * If true the css baseline is only applied to the children
-   */
-  scopeToChildren: PropTypes.bool,
 };
 
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);
 }
 
-export default CssBaseline;
+export default withStyles(styles, { name: 'MuiCssBaseline' })(CssBaseline);

packages/material-ui/src/CssBaseline/CssBaseline.test.js

@@ -24,13 +24,4 @@ describe('<CssBaseline />', () => {
     );
     assert.strictEqual(wrapper.find('#child').type(), 'div');
   });
-
-  it('renders its children when scoped', () => {
-    const scopedWrapper = mount(
-      <CssBaseline scopeToChildren>
-        <div id="child" />
-      </CssBaseline>,
-    );
-    assert.strictEqual(scopedWrapper.find('#child').type(), 'div');
-  });
 });

packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface ScopedCssBaselineProps {
+  children?: React.ReactElement;
+}
+
+declare const ScopedCssBaseline: React.ComponentType<ScopedCssBaselineProps>;
+
+export type ScopedCssBaselineClassKey = 'root';
+
+export default ScopedCssBaseline;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { withStyles } from '@material-ui/core/styles';
+import { html, body } from '../CssBaseline/CssBaseline';
+
+export const styles = theme => ({
+  /* Styles applied to the root element. */
+  root: {
+    ...html,
+    ...body(theme),
+    '& *, & *::before, & *::after': {
+      boxSizing: 'inherit',
+    },
+    '& strong, &b': {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+  },
+});
+
+const ScopedCssBasline = React.forwardRef(function ScopedCssBasline(props, ref) {
+  const { classes, className, ...other } = props;
+
+  return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
+});
+
+ScopedCssBasline.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+};
+
+export default withStyles(styles, { name: 'MuiScopedCssBasline' })(ScopedCssBasline);