Release v3.2.1

.circleci/config.yml

@@ -78,6 +78,30 @@ jobs:
       - run: cd lib && yarn test:<<parameters.lib>> -- -- --runInBand
       - steps: << parameters.after-tests >>
 
+  cypress_tests:
+    description: Run cypress tests
+    executor: cypress/browsers-chrome69
+    steps:
+      - attach_workspace:
+          at: .
+      - restore_cache:
+          name: Restore Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
+      - run:
+          name: Additional yarn install
+          command: yarn install --frozen-lockfile
+      - run:
+          name: Install, if no cypress binary found
+          command: yarn cypress install
+      - run: yarn workspace docs build
+      - run:
+          background: true
+          name: Run docs in background
+          command: yarn workspace docs start
+      - run: npx wait-on http://localhost:3000
+      - run: yarn percy exec -- cypress run --record
+
 ####################
 # Workflow
 ####################
@@ -90,17 +114,10 @@ workflows:
           requires:
             - checkout_code
 
-      - cypress/run:
+      - cypress_tests:
           name: 'Cypress tests'
           requires:
-            - 'Install deps, lint and build'
-          executor: cypress/browsers-chrome69
-          build: 'yarn workspace docs build'
-          start: 'yarn workspace docs start'
-          wait-on: 'http://localhost:3000'
-          record: true
-          yarn: true
-          cache-key: yarn-packages-{{ checksum "yarn.lock" }}
+            - checkout_code
 
       - jest_tests:
           name: 'Date-fns jest tests'

.prettierignore

@@ -3,3 +3,4 @@ build/
 coverage/
 *.mp4
 .next
+docs/prop-types.json

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="200" src="https://next.material-ui-pickers.dev/static/meta-image.png" alt="Material-UI logo"></a></p>
+  <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="200" src="https://material-ui-pickers.dev/static/meta-image.png" alt="Material-ui-pickers logo"></a></p>
 </p>
 
 <h1 align="center">Material-UI pickers</h1>
@@ -11,16 +11,17 @@ Accessible, customizable, delightful date & time pickers for [@material-ui/core]
 [![npm package](https://img.shields.io/npm/v/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
 [![npm download](https://img.shields.io/npm/dm/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
 [![codecov](https://codecov.io/gh/mui-org/material-ui-pickers/branch/next/graph/badge.svg)](https://codecov.io/gh/mui-org/material-ui-pickers)
-[![Bundle Size](https://badgen.net/bundlephobia/minzip/@material-ui/pickers)](https://bundlephobia.com/result?p=@material-ui/pickers@3.0.0-beta.1)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@material-ui/pickers)](https://bundlephobia.com/result?p=@material-ui/pickers@latest)
 [![CircleCI](https://circleci.com/gh/mui-org/material-ui-pickers.svg?style=svg)](https://circleci.com/gh/mui-org/material-ui-pickers)
 [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/qow28y/runs)
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/mui-org/material-ui-pickers)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 </div>
 
 ### Installation
 
-Please read the [migration guide](https://material-ui-pickers.dev/guides/upgrading-to-v3) if you are updating from v2
+Note that this package reqiures `@material-ui/core` **v4**. It will not work with the old v3. Please read the [migration guide](https://material-ui-pickers.dev/guides/upgrading-to-v3) if you are updating from v2
 
 ```sh
 // via npm
@@ -65,12 +66,6 @@ render(<App />, document.querySelector('#app'));
 
 Check out the [documentation website](https://material-ui-pickers.dev/)
 
-Old versions documentation:
-
-| Version | Documentation url                                     |
-| ------- | ----------------------------------------------------- |
-| v2      | https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/ |
-
 ### Recently updated?
 
 Changelog available [here](https://github.com/mui-org/material-ui-pickers/releases)

cypress.json

@@ -2,6 +2,7 @@
   "baseUrl": "http://localhost:3000",
   "integrationFolder": "e2e/integration",
   "supportFile": "e2e/support/index.js",
+  "pluginsFile": "e2e/plugins/index.js",
   "chromeWebSecurity": false,
   "projectId": "qow28y"
 }

docs/_constants.ts

@@ -1,6 +1,8 @@
 export const CODESANDBOX_EXAMPLE_ID = 'o7oojxx1pq';
 
-export const HOST_URL = 'https://material-ui-pickers.dev';
+export const DOMAIN = 'material-ui-pickers.dev';
+
+export const HOST_URL = 'https://' + DOMAIN;
 
 export const LOGO_URL = HOST_URL + '/static/meta-image.png';
 

docs/_shared/Ad.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { loadScript } from 'utils/helpers';
-import { Grid, Theme } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
+import { Grid, makeStyles } from '@material-ui/core';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(theme => ({
   '@global': {
     '#codefund': {
       '& .cf-wrapper': {
@@ -16,6 +15,11 @@ const useStyles = makeStyles((theme: Theme) => ({
         color: theme.palette.text.primary + '! important',
       },
     },
+    '@media only percy': {
+      '#codefund': {
+        display: 'none',
+      },
+    },
   },
 }));
 

docs/_shared/Code.tsx

@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import React from 'react';
 import { highlight } from '../utils/prism';
-import { withStyles, Theme, WithStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 
-const styles = (theme: Theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
-    margin: '0',
+    margin: 0,
     fontFamily: theme.typography.fontFamily,
     fontSize: '1em',
     color: theme.palette.text.primary,
@@ -19,23 +19,45 @@ const styles = (theme: Theme) => ({
       backgroundColor: theme.palette.background.paper + ' !important',
     },
   },
+  inlineRoot: {
+    padding: 0,
+    '& pre': {
+      padding: 0,
+    },
+  },
+  inlineCode: {
+    fontSize: 14,
+    // color: theme.palette.secondary.main,
+    whiteSpace: 'pre-wrap',
+  },
   margin: {
     margin: '10px 0 30px',
   },
-});
+}));
 
-type CodeProps = {
+interface CodeProps {
   children: string;
+  inline?: boolean;
   withMargin?: boolean;
   language?: 'jsx' | 'typescript' | 'markup';
-} & WithStyles<typeof styles>;
+}
 
-const Code: React.SFC<CodeProps> = ({ classes, language = 'jsx', children, withMargin }) => {
+const Code: React.SFC<CodeProps> = ({ language = 'jsx', inline, children, withMargin }) => {
+  const classes = useStyles();
   const highlightedCode = highlight(children, language);
+
   return (
-    <div className={clsx(classes.root, { [classes.margin]: withMargin })}>
+    <div
+      className={clsx(classes.root, {
+        [classes.margin]: withMargin,
+        [classes.inlineRoot]: inline,
+      })}
+    >
       <pre>
-        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+        <code
+          className={clsx({ [classes.inlineCode]: inline })}
+          dangerouslySetInnerHTML={{ __html: highlightedCode }}
+        />
       </pre>
     </div>
   );
@@ -46,4 +68,4 @@ Code.defaultProps = {
   language: 'jsx',
 };
 
-export default withStyles(styles)(Code);
+export default Code;

docs/_shared/Example.tsx

@@ -1,8 +1,9 @@
+import * as React from 'react';
+import clsx from 'clsx';
 import Code from './Code';
 import CodeIcon from '@material-ui/icons/Code';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import GithubIcon from '_shared/svgIcons/GithubIcon';
-import React, { useState, useCallback, useMemo, useContext } from 'react';
 import { copy } from 'utils/helpers';
 import { GITHUB_EDIT_URL } from '_constants';
 import { replaceGetFormatStrings } from 'utils/utilsService';
@@ -11,6 +12,8 @@ import { withUtilsService, UtilsContext } from './UtilsServiceContext';
 import { makeStyles, IconButton, Collapse, Tooltip } from '@material-ui/core';
 
 interface Props extends InjectedNotistackProps {
+  testId: string;
+  paddingBottom?: boolean;
   source: { raw: string; relativePath: string; default: React.FC<any> };
 }
 
@@ -43,6 +46,9 @@ const useStyles = makeStyles(theme => ({
       },
     },
   },
+  paddingBottom: {
+    paddingBottom: 40,
+  },
   sourceToolbar: {
     display: 'flex',
   },
@@ -59,28 +65,31 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function Example({ source, enqueueSnackbar }: Props) {
+function Example({ source, testId, paddingBottom, enqueueSnackbar }: Props) {
   if (!source.default || !source.raw || !source.relativePath) {
     throw new Error(
       'Missing component or raw component code, you likely forgot to .example to your example extension'
     );
   }
 
   const classes = useStyles();
-  const currentLib = useContext(UtilsContext).lib;
-  const [expanded, setExpanded] = useState(false);
+  const currentLib = React.useContext(UtilsContext).lib;
+  const [expanded, setExpanded] = React.useState(false);
 
   const replacedSource = replaceGetFormatStrings(currentLib, source.raw);
-  const copySource = useCallback(
+  const copySource = React.useCallback(
     () =>
       copy(replacedSource).then(() =>
         enqueueSnackbar('Source copied', { variant: 'success', autoHideDuration: 1000 })
       ),
     [enqueueSnackbar, replacedSource]
   );
 
-  // make each component rerender only on utils change
-  const Component = useMemo(() => withUtilsService(source.default), [source.default]);
+  // remount component only if utils change
+  const ExampleComponent = React.useMemo(
+    () => withUtilsService(source.default),
+    [currentLib, source.default] // eslint-disable-line
+  );
 
   return (
     <>
@@ -114,14 +123,17 @@ function Example({ source, enqueueSnackbar }: Props) {
         </div>
       </Collapse>
 
-      <div className={classes.pickers}>
+      <div
+        data-test-id={testId}
+        className={clsx(classes.pickers, { [classes.paddingBottom]: paddingBottom })}
+      >
         <Tooltip title="Show/Hide the source">
           <IconButton className={classes.sourceBtn} onClick={() => setExpanded(!expanded)}>
             <CodeIcon />
           </IconButton>
         </Tooltip>
 
-        <Component />
+        <ExampleComponent key={currentLib} />
       </div>
     </>
   );

docs/_shared/PropTypesTable.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Code from './Code';
 import FuzzySearch from 'fuzzy-search';
 import PropTypesDoc from '../prop-types.json';
 import SearchBar from 'material-ui-search-bar';
@@ -12,11 +13,10 @@ import {
   TableRow,
   makeStyles,
   Typography,
-  Theme,
   Grid,
 } from '@material-ui/core';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(theme => ({
   header: {
     marginTop: 24,
   },
@@ -123,10 +123,17 @@ const PropTypesTableLazy: React.FC<PropTypesTableProps> = ({ disableHeader, src
                     [classes.required]: prop.required,
                   })}
                 >
-                  {prop.required ? `${prop.name} *` : prop.name}
+                  <Typography variant="body2">
+                    {prop.required ? `${prop.name} *` : prop.name}{' '}
+                  </Typography>
+                </TableCell>
+
+                <TableCell>
+                  <Code inline language="typescript">
+                    {prop.type.name}
+                  </Code>
                 </TableCell>
 
-                <TableCell className={classes.type}>{prop.type.name}</TableCell>
                 <TableCell className={classes.defaultValue}>
                   <Typography align="center" variant="body1" component="span">
                     {prop.defaultValue && prop.defaultValue.value}

docs/_shared/UtilsServiceContext.tsx

@@ -7,7 +7,7 @@ export const UtilsContext = React.createContext<UtilsService>(createUtilsService
 export const withUtilsService = <P extends UtilsService>(Component: React.ComponentType<P>) => {
   const withUtilsService: React.SFC<Omit<P, keyof UtilsService>> = props => (
     <UtilsContext.Consumer>
-      {service => <Component {...service} {...props as any} />}
+      {service => <Component {...service} {...(props as any)} />}
     </UtilsContext.Consumer>
   );
 

docs/_shared/svgIcons/KawaiiIcon.tsx

@@ -15,9 +15,13 @@ const icons = {
 };
 
 function getRandomIcon() {
-  const icon = getRandomItem(Object.keys(icons));
   // @ts-ignore
-  return icons[icon];
+  if (process.browser && window.Cypress) {
+    return icons.ghost;
+  }
+
+  const icon = getRandomItem(Object.keys(icons));
+  return icons[icon as keyof typeof icons];
 }
 
 interface KawaiiIconProps extends KawaiiProps {
@@ -27,8 +31,9 @@ interface KawaiiIconProps extends KawaiiProps {
 
 const KawaiiIcon: React.FunctionComponent<KawaiiIconProps> = ({ icon, size, ...other }) => {
   const theme = useTheme();
-  const dimensionXs = useMediaQuery(theme.breakpoints.down('xs'));
-  const calculatedSize = size || dimensionXs ? 230 : 320;
+  const isXs = useMediaQuery(theme.breakpoints.down('xs'));
+  const calculatedSize = size || isXs ? 230 : 320;
+
   const Component = React.useMemo(() => (icon ? icons[icon] : getRandomIcon()), [icon]);
 
   return (

docs/layout/Layout.tsx

@@ -52,7 +52,7 @@ const styles = (theme: Theme) =>
     },
     main: {
       padding: '20px',
-      paddingTop: 55,
+      paddingTop: 75,
       minHeight: 'calc(100vh - 55px)',
       [theme.breakpoints.up('md')]: {
         minHeight: 'calc(100vh - 64px)',
@@ -160,7 +160,7 @@ class Layout extends Component<LayoutProps> {
             </Menu>
 
             <Tooltip title="Toggle light/dark theme" enterDelay={300}>
-              <IconButton color="inherit" onClick={toggleThemeType}>
+              <IconButton data-testid="toggle-theme-btn" color="inherit" onClick={toggleThemeType}>
                 <LightbulbOutlineIcon />
               </IconButton>
             </Tooltip>