From e8a484265367aad15b969334aeccea2f19328ed5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 19 Jun 2019 16:22:44 +0200 Subject: [PATCH] [styles] Only run the check on the client-side (#16284) * [styles] Only run the check on the client-side * sort asc * v4 * style camelCase * remove dead file * [Dialog] More accurate description * [Portal] Monitor the bundle size * Poke codecov --- .github/ISSUE_TEMPLATE/1.bug.md | 2 +- docs/src/pages/components/portal/portal.md | 2 ++ docs/webpackBaseConfig.js | 2 +- packages/material-ui-styles/src/index.js | 2 +- .../src/ButtonBase/createRippleHandler.js | 34 ------------------- packages/material-ui/src/Dialog/Dialog.js | 4 +-- .../src/NativeSelect/NativeSelect.js | 2 +- pages/api/dialog.md | 4 +-- scripts/sizeSnapshot/webpack.config.js | 6 ++++ 9 files changed, 16 insertions(+), 42 deletions(-) delete mode 100644 packages/material-ui/src/ButtonBase/createRippleHandler.js diff --git a/.github/ISSUE_TEMPLATE/1.bug.md b/.github/ISSUE_TEMPLATE/1.bug.md index 64023c5b6192b7..c12fbf48514be2 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.md +++ b/.github/ISSUE_TEMPLATE/1.bug.md @@ -59,7 +59,7 @@ Link: | Tech | Version | |--------------|---------| -| Material-UI | v3.?.? | +| Material-UI | v4.?.? | | React | | | Browser | | | TypeScript | | diff --git a/docs/src/pages/components/portal/portal.md b/docs/src/pages/components/portal/portal.md index 15ea8064c2ab5b..7e164433a8d3da 100644 --- a/docs/src/pages/components/portal/portal.md +++ b/docs/src/pages/components/portal/portal.md @@ -7,6 +7,8 @@ components: Portal

The portal component renders its children into a new "subtree" outside of current component hierarchy.

+- 📦 [1.5 kB gzipped](/size-snapshot) + The children of the portal component will be appended to the `container` specified. The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components. diff --git a/docs/webpackBaseConfig.js b/docs/webpackBaseConfig.js index b6b6e6b89bf38f..f25acc35103ef8 100644 --- a/docs/webpackBaseConfig.js +++ b/docs/webpackBaseConfig.js @@ -12,8 +12,8 @@ module.exports = { '@material-ui/icons': path.resolve(__dirname, '../packages/material-ui-icons/src'), '@material-ui/lab': path.resolve(__dirname, '../packages/material-ui-lab/src'), '@material-ui/styles': path.resolve(__dirname, '../packages/material-ui-styles/src'), - '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'), '@material-ui/system': path.resolve(__dirname, '../packages/material-ui-system/src'), + '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'), docs: path.resolve(__dirname, '../docs'), }, }, diff --git a/packages/material-ui-styles/src/index.js b/packages/material-ui-styles/src/index.js index 4335d9ee0571af..ed32ed97aa3c60 100644 --- a/packages/material-ui-styles/src/index.js +++ b/packages/material-ui-styles/src/index.js @@ -1,7 +1,7 @@ import { ponyfillGlobal } from '@material-ui/utils'; /* Warning if there are several instances of @material-ui/styles */ -if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') { +if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') { ponyfillGlobal['__@material-ui/styles-init__'] = ponyfillGlobal['__@material-ui/styles-init__'] || 0; diff --git a/packages/material-ui/src/ButtonBase/createRippleHandler.js b/packages/material-ui/src/ButtonBase/createRippleHandler.js deleted file mode 100644 index 3b18cdc0201c71..00000000000000 --- a/packages/material-ui/src/ButtonBase/createRippleHandler.js +++ /dev/null @@ -1,34 +0,0 @@ -/* eslint-disable import/no-mutable-exports */ - -let createRippleHandler = (instance, eventName, action, cb) => event => { - if (cb) { - cb.call(instance, event); - } - - let ignore = false; - - // Ignore events that have been `event.preventDefault()` marked. - if (event.defaultPrevented) { - ignore = true; - } - - if (instance.props.disableTouchRipple && eventName !== 'Blur') { - ignore = true; - } - - if (!ignore && instance.ripple) { - instance.ripple[action](event); - } - - if (typeof instance.props[`on${eventName}`] === 'function') { - instance.props[`on${eventName}`](event); - } - - return true; -}; - -if (typeof window === 'undefined') { - createRippleHandler = () => () => {}; -} - -export default createRippleHandler; diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index 3a9713d5680a16..3b8dbe76013df4 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -20,13 +20,13 @@ export const styles = theme => ({ position: 'absolute !important', }, }, - /* Styles applied to the root element if `scroll="paper"`. */ + /* Styles applied to the container element if `scroll="paper"`. */ scrollPaper: { display: 'flex', justifyContent: 'center', alignItems: 'center', }, - /* Styles applied to the root element if `scroll="body"`. */ + /* Styles applied to the container element if `scroll="body"`. */ scrollBody: { overflowY: 'auto', overflowX: 'hidden', diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index 78fcbcbbf47b05..7f53757809b622 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -63,7 +63,7 @@ export const styles = theme => ({ right: 0, top: 'calc(50% - 12px)', // Center vertically color: theme.palette.action.active, - 'pointer-events': 'none', // Don't block pointer events on the select under the icon. + pointerEvents: 'none', // Don't block pointer events on the select under the icon. }, }); diff --git a/pages/api/dialog.md b/pages/api/dialog.md index 9e41f8dcf26032..f79931a2fb2514 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -55,8 +55,8 @@ This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. -| scrollPaper | Styles applied to the root element if `scroll="paper"`. -| scrollBody | Styles applied to the root element if `scroll="body"`. +| scrollPaper | Styles applied to the container element if `scroll="paper"`. +| scrollBody | Styles applied to the container element if `scroll="body"`. | container | Styles applied to the container element. | paper | Styles applied to the `Paper` component. | paperScrollPaper | Styles applied to the `Paper` component if `scroll="paper"`. diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 25a23da5618b24..592160a0ba80a3 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -102,6 +102,12 @@ async function getSizeLimitBundles() { webpack: true, path: 'packages/material-ui-lab/build/esm/Slider/index.js', }, + { + // vs https://bundlephobia.com/result?p=react-portal + name: 'Portal', + webpack: true, + path: 'packages/material-ui/build/esm/Portal/index.js', + }, { name: 'docs.main', webpack: false,