[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
mui · Jun 19, 2019 · e8a4842 · e8a4842
1 parent 04cd6e1
commit e8a4842
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 42 deletions.
diff --git 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
@@ -7,6 +7,8 @@ components: Portal
 
 <p class="description">The portal component renders its children into a new "subtree" outside of current component hierarchy.</p>
 
+- 📦 [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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -55,8 +55,8 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
-| <span class="prop-name">scrollPaper</span> | Styles applied to the root element if `scroll="paper"`.
-| <span class="prop-name">scrollBody</span> | Styles applied to the root element if `scroll="body"`.
+| <span class="prop-name">scrollPaper</span> | Styles applied to the container element if `scroll="paper"`.
+| <span class="prop-name">scrollBody</span> | Styles applied to the container element if `scroll="body"`.
 | <span class="prop-name">container</span> | Styles applied to the container element.
 | <span class="prop-name">paper</span> | Styles applied to the `Paper` component.
 | <span class="prop-name">paperScrollPaper</span> | Styles applied to the `Paper` component if `scroll="paper"`.

diff --git 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,