From 889e75331a5af808613d9c2d59fa2045fa8ed7d1 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 13 Feb 2020 14:29:55 +0100 Subject: [PATCH] new component --- docs/pages/api/css-baseline.md | 18 ++- docs/pages/api/input-base.md | 1 + docs/pages/api/scoped-css-basline.js | 7 ++ docs/pages/api/scoped-css-basline.md | 50 ++++++++ docs/src/modules/utils/generateMarkdown.js | 5 +- .../components/css-baseline/css-baseline.md | 16 +-- .../src/CssBaseline/CssBaseline.d.ts | 1 - .../src/CssBaseline/CssBaseline.js | 115 ++++++------------ .../src/CssBaseline/CssBaseline.test.js | 9 -- .../ScopedCssBasline/ScopedCssBasline.d.ts | 11 ++ .../src/ScopedCssBasline/ScopedCssBasline.js | 43 +++++++ .../ScopedCssBasline/ScopedCssBasline.test.js | 26 ++++ .../src/ScopedCssBasline/index.d.ts | 2 + .../material-ui/src/ScopedCssBasline/index.js | 1 + 14 files changed, 205 insertions(+), 100 deletions(-) create mode 100644 docs/pages/api/scoped-css-basline.js create mode 100644 docs/pages/api/scoped-css-basline.md create mode 100644 packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.d.ts create mode 100644 packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.js create mode 100644 packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.test.js create mode 100644 packages/material-ui/src/ScopedCssBasline/index.d.ts create mode 100644 packages/material-ui/src/ScopedCssBasline/index.js diff --git a/docs/pages/api/css-baseline.md b/docs/pages/api/css-baseline.md index fc107f35d1a632..edb8627c953186 100644 --- a/docs/pages/api/css-baseline.md +++ b/docs/pages/api/css-baseline.md @@ -25,11 +25,27 @@ Kickstart an elegant, consistent, and simple baseline to build upon. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | null | You can wrap a node. | -| scopeToChildren | bool | false | 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 | +|:-----|:-------------|:------------| +| @global | | 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/) diff --git a/docs/pages/api/input-base.md b/docs/pages/api/input-base.md index dab99e618ecef7..f8518f6739ebf9 100644 --- a/docs/pages/api/input-base.md +++ b/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 | |:-----|:-------------|:------------| +| @global | | Apply global styles. | root | .MuiInputBase-root | Styles applied to the root element. | formControl | .MuiInputBase-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. | focused | .Mui-focused | Styles applied to the root element if the component is focused. diff --git a/docs/pages/api/scoped-css-basline.js b/docs/pages/api/scoped-css-basline.js new file mode 100644 index 00000000000000..dec1ee49a5da4a --- /dev/null +++ b/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 ; +} diff --git a/docs/pages/api/scoped-css-basline.md b/docs/pages/api/scoped-css-basline.md new file mode 100644 index 00000000000000..d04ca79742005e --- /dev/null +++ b/docs/pages/api/scoped-css-basline.md @@ -0,0 +1,50 @@ +--- +filename: /packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.js +--- + + + +# ScopedCssBasline API + +

The API documentation of the ScopedCssBasline React component. Learn more about the props and the CSS customization points.

+ +## 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 | +|:-----|:-----|:--------|:------------| +| children | node | | The content of the component. | +| classes | object | | 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 | +|:-----|:-------------|:------------| +| root | .MuiScopedCssBasline-root | 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. + diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index f504b7f2c170ce..0269cacdb6af57 100644 --- a/docs/src/modules/utils/generateMarkdown.js +++ b/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 '| @global | | Apply global styles.'; + } + const description = reactAPI.styles.descriptions[styleRule]; if (typeof description === 'undefined' && ['Grid', 'Paper'].indexOf(reactAPI.name) === -1) { diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md index 5c36ef510b9fdb..286b8be42aa1d2 100644 --- a/docs/src/pages/components/css-baseline/css-baseline.md +++ b/docs/src/pages/components/css-baseline/css-baseline.md @@ -1,11 +1,13 @@ --- -components: CssBaseline +components: CssBaseline, ScopedCssBaseline --- # CSS Baseline

Material-UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.

+## 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 ( - + {/* The rest of your application */} - + ); } ``` @@ -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 ``, but 16px is assumed (the browser default). You can learn more about the implications of changing the `` default font size in [the theme documentation](/customization/typography/#typography-html-font-size) page. - Set the `theme.typography.body2` style on the `` element. -- Set the font-weight to "bolder" for the `` and `` 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 `` and `` elements. - Font antialiasing is enabled for better display of the Roboto font. diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts b/packages/material-ui/src/CssBaseline/CssBaseline.d.ts index c5d7deb46d19e5..f919a429204a3b 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts +++ b/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; diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js index 85d5b4309754fd..73b2e32dec6bde 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.js +++ b/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
{children}
; - } - + const { children = null } = props; return {children}; } @@ -98,10 +55,6 @@ 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') { @@ -109,4 +62,4 @@ if (process.env.NODE_ENV !== 'production') { CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes); } -export default CssBaseline; +export default withStyles(styles, { name: 'MuiCssBaseline' })(CssBaseline); diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.test.js b/packages/material-ui/src/CssBaseline/CssBaseline.test.js index 0db416e7f5541b..b793334b7404ec 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.test.js +++ b/packages/material-ui/src/CssBaseline/CssBaseline.test.js @@ -24,13 +24,4 @@ describe('', () => { ); assert.strictEqual(wrapper.find('#child').type(), 'div'); }); - - it('renders its children when scoped', () => { - const scopedWrapper = mount( - -
- , - ); - assert.strictEqual(scopedWrapper.find('#child').type(), 'div'); - }); }); diff --git a/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.d.ts b/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.d.ts new file mode 100644 index 00000000000000..c9e7b48e825913 --- /dev/null +++ b/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; + +export type ScopedCssBaselineClassKey = 'root'; + +export default ScopedCssBaseline; diff --git a/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.js b/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.js new file mode 100644 index 00000000000000..c85c611d24ac5a --- /dev/null +++ b/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
; +}); + +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); diff --git a/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.test.js b/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.test.js new file mode 100644 index 00000000000000..d35462ef6b0336 --- /dev/null +++ b/packages/material-ui/src/ScopedCssBasline/ScopedCssBasline.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import ScopedCssBasline from './ScopedCssBasline'; +import describeConformance from '../test-utils/describeConformance'; + +describe('', () => { + let mount; + let classes; + + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); + + after(() => { + mount.cleanUp(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + })); +}); diff --git a/packages/material-ui/src/ScopedCssBasline/index.d.ts b/packages/material-ui/src/ScopedCssBasline/index.d.ts new file mode 100644 index 00000000000000..0f595efcb8477a --- /dev/null +++ b/packages/material-ui/src/ScopedCssBasline/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './ScopedCssBaseline'; +export * from './ScopedCssBaseline'; diff --git a/packages/material-ui/src/ScopedCssBasline/index.js b/packages/material-ui/src/ScopedCssBasline/index.js new file mode 100644 index 00000000000000..0aed1a8ba4a0a0 --- /dev/null +++ b/packages/material-ui/src/ScopedCssBasline/index.js @@ -0,0 +1 @@ +export { default } from './ScopedCssBasline';