[vNext] Redesing to material-ui 2.0 (#1416)

* Redesign datepicker toolbar * Add optinal chaining support * Redesign calendar view and switching between to year view * Small bugfixes and improvements * Add weekdays * Redesign year selection * Cleanup and remove not used files * Add typings for style overrdies of MuiBasePickerO, closes #1414 * New animations 😍 * Update lib/src/views/Calendar/CalendarView.tsx Co-Authored-By: Olivier Tassinari <[email protected]> * Start cypress component tests * Address PR feedback * Add alternative way to display ampm controls * Redesign TimePickers * Redesign DateTimePicker * Fix build errors * Convert ModalDialog to hook based styles * Remove unused stuff from dependencies * Fix ts build errros * Turn off empty interface rule * Fix rollup error * Fix displaying toolbars in firefox and safari * Replace theme.spacing( ) with static values * Fix examples with custom theme * Fix a bunch of tests * Fix tests * Rename cypress lib test file * Fix CI * Fix ts build errors * Replace global keydown handler in favor of per component * Fix timepicker switching to next view on scroll * Use object to create styles without theme * Rename MuiThemeProvider to ThemeProvider * Remove zIndex from am/pm buttons * Fix ts error * Fix ts issues * [CI] Split build and lint to different workflows * Attach workspace for new jobs * Remove console.log * Fix luxon tests * Remove animateYearScrolling from examples * Do not run docgen on test changes * Rename data-test-id to data-mui-test and remove test attributes in production * Remove animateYearScrolling prop * Improve new props api documentation * Fix z-index for in-clock am/pm buttons * Allow to reduce heavy animations * Use global keydown event for calendar keyboard navigation * Restyle highlighting of current dare * Move calendar test to datepicker e2e * Better styles for Year and Day :focus and :hover * Fix linter Co-authored-by: Olivier Tassinari <[email protected]>
mui · Dec 23, 2019 · 574944a · 574944a · vercel · Dec 23, 2019
1 parent ab249c2
commit 574944a
Show file tree

Hide file tree

Showing 103 changed files with 3,278 additions and 2,344 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -24,8 +24,7 @@ jobs:
       - persist_to_workspace:
           root: .
           paths: .
-
-  javascript:
+  install_deps:
     <<: *js_defaults
     steps:
       - attach_workspace:
@@ -42,32 +41,42 @@ jobs:
           key: yarn-packages-{{ checksum "yarn.lock" }}
           paths:
             - ~/.cache
+      - persist_to_workspace:
+          root: .
+          paths: .
 
-      - run:
-          name: Typescript
-          command: yarn workspaces run build:typescript
+  lint:
+    <<: *js_defaults
+    steps:
+      - attach_workspace:
+          at: .
       - run:
           name: Eslint
           command: yarn lint
       - run:
           name: Ensure prettier was run
           command: yarn prettier --check './**/*.{ts,tsx,js,jsx,json,md,mdx,html,css}'
+
+  build:
+    <<: *js_defaults
+    steps:
+      - attach_workspace:
+          at: .
+      - run:
+          name: Typescript
+          command: yarn workspaces run build:typescript
       - run:
           name: Build and analyze bundlesize
           command: yarn workspace @material-ui/pickers build:analyze
 
-      - persist_to_workspace:
-          root: .
-          paths: .
-
   jest_tests:
     description: Running jest test with separate library
     parameters:
       lib:
-        description: "Library to run tests"
+        description: 'Library to run tests'
         type: string
       after-tests:
-        description: "Steps that will be executed after test run is finished"
+        description: 'Steps that will be executed after test run is finished'
         type: steps
         default: []
     <<: *js_defaults
@@ -111,10 +120,18 @@ workflows:
   build_and_test:
     jobs:
       - checkout_code
-      - javascript:
-          name: 'Install deps, lint and build'
+      - install_deps:
+          name: 'Install deps'
           requires:
             - checkout_code
+      - build:
+          name: 'Build and analyze bundlesize'
+          requires:
+            - 'Install deps'
+      - lint:
+          name: 'Run linters'
+          requires:
+            - 'Install deps'
 
       - cypress_tests:
           name: 'Cypress tests'
@@ -127,16 +144,16 @@ workflows:
           after-tests:
             - run: npx codecov
           requires:
-            - 'Install deps, lint and build'
+            - 'Build and analyze bundlesize'
 
       - jest_tests:
           name: 'Moment jest tests'
           lib: moment
           requires:
-            - 'Install deps, lint and build'
+            - 'Build and analyze bundlesize'
 
       - jest_tests:
           name: 'Luxon jest tests'
           lib: luxon
           requires:
-            - 'Install deps, lint and build'
+            - 'Build and analyze bundlesize'
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -33,6 +33,8 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': 'warn',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-unused-vars': [
       'error',
       { vars: 'all', args: 'after-used', argsIgnorePattern: '^_', ignoreRestSiblings: true },

diff --git a/.gitignore b/.gitignore
@@ -19,7 +19,7 @@ coverage
 
 # Cache directory
 .npm
-cypress
+./cypress/**/*
 .next
 
 # Optional eslint cache

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["Formik", "Notistack", "Sourcable", "patreon"],
+  "cSpell.words": ["Formik", "Notistack", "Sourcable", "Unparsed", "ampm", "patreon"],
   "eslint.validate": [
     "javascript",
     "javascriptreact",

diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/docs/_shared/Example.tsx b/docs/_shared/Example.tsx
@@ -125,7 +125,7 @@ function Example({ source, testId, paddingBottom }: ExampleProps) {
       </Collapse>
 
       <div
-        data-test-id={testId}
+        data-mui-test={testId}
         className={clsx(classes.pickers, { [classes.paddingBottom]: paddingBottom })}
       >
         <Tooltip title="Show/Hide the source">

diff --git a/docs/_shared/PropTypesTable.tsx b/docs/_shared/PropTypesTable.tsx
@@ -43,11 +43,11 @@ const useStyles = makeStyles(theme => ({
     minWidth: 340,
   },
   searchBar: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginTop: 8,
+    marginBottom: 8,
 
     [theme.breakpoints.up('sm')]: {
-      marginTop: -theme.spacing(1),
+      marginTop: -8,
     },
   },
 }));

diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   presets: ['next/babel', '@zeit/next-typescript/babel'],
   plugins: [
+    '@babel/plugin-proposal-optional-chaining',
     [
       'babel-plugin-module-resolver',
       {

diff --git a/docs/layout/Layout.tsx b/docs/layout/Layout.tsx
@@ -152,15 +152,19 @@ class Layout extends Component<LayoutProps> {
                   key={option}
                   className={classes.utilsMenuItem}
                   selected={index === this.state.selectedIndex}
-                  onClick={event => this.handleUtilsChange(event, index)}
+                  onClick={(event: any) => this.handleUtilsChange(event, index)}
                 >
                   {option}
                 </MenuItem>
               ))}
             </Menu>
 
             <Tooltip title="Toggle light/dark theme" enterDelay={300}>
-              <IconButton data-testid="toggle-theme-btn" color="inherit" onClick={toggleThemeType}>
+              <IconButton
+                data-mui-test="toggle-theme-btn"
+                color="inherit"
+                onClick={toggleThemeType}
+              >
                 <LightbulbOutlineIcon />
               </IconButton>
             </Tooltip>

diff --git a/docs/package.json b/docs/package.json
@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.7.4",
     "@date-io/date-fns": "^1.3.7",
     "@date-io/dayjs": "^1.3.7",
     "@date-io/hijri": "^1.3.8",

diff --git a/docs/pages/demo/datepicker/BasicDatePicker.example.jsx b/docs/pages/demo/datepicker/BasicDatePicker.example.jsx
@@ -9,8 +9,7 @@ function BasicDatePicker(props) {
       <DatePicker
         label="Basic example"
         value={selectedDate}
-        onChange={handleDateChange}
-        animateYearScrolling
+        onChange={date => handleDateChange(date)}
       />
 
       <DatePicker
@@ -19,7 +18,7 @@ function BasicDatePicker(props) {
         clearable
         disableFuture
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
 
       <DatePicker
@@ -32,7 +31,7 @@ function BasicDatePicker(props) {
         label="Date of birth"
         views={['year', 'month', 'date']}
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
     </Fragment>
   );

diff --git a/docs/pages/demo/datepicker/InlineDatePicker.example.jsx b/docs/pages/demo/datepicker/InlineDatePicker.example.jsx
@@ -10,7 +10,7 @@ function InlineDatePickerDemo(props) {
         variant="inline"
         label="Basic example"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
 
       <DatePicker
@@ -19,7 +19,7 @@ function InlineDatePickerDemo(props) {
         label="Only calendar"
         helperText="No year selection"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
 
       <KeyboardDatePicker

diff --git a/docs/pages/demo/datepicker/ServerRequest.example.jsx b/docs/pages/demo/datepicker/ServerRequest.example.jsx
@@ -26,7 +26,7 @@ function ServerRequest() {
       <DatePicker
         label="With server data"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
         onMonthChange={handleMonthChange}
         renderDay={(day, selectedDate, isInCurrentMonth, dayComponent) => {
           const date = makeJSDateObject(day); // skip this step, it is required to support date libs

diff --git a/docs/pages/demo/datepicker/StaticDatePicker.example.jsx b/docs/pages/demo/datepicker/StaticDatePicker.example.jsx
@@ -2,17 +2,16 @@ import React, { useState } from 'react';
 import { DatePicker } from '@material-ui/pickers';
 
 const StaticDatePicker = () => {
-  const [date, changeDate] = useState(new Date());
+  const [date, handleDateChange] = useState(new Date());
 
-  // prettier-ignore
   return (
     <>
       <DatePicker
         autoOk
         variant="static"
         openTo="year"
         value={date}
-        onChange={changeDate}
+        onChange={date => handleDateChange(date)}
       />
 
       <DatePicker
@@ -21,7 +20,7 @@ const StaticDatePicker = () => {
         variant="static"
         openTo="date"
         value={date}
-        onChange={changeDate}
+        onChange={date => handleDateChange(date)}
       />
     </>
   );

diff --git a/docs/pages/demo/datepicker/ViewsDatePicker.example.jsx b/docs/pages/demo/datepicker/ViewsDatePicker.example.jsx
@@ -10,7 +10,7 @@ function YearMonthPicker() {
         views={['year']}
         label="Year only"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
 
       <DatePicker
@@ -20,7 +20,7 @@ function YearMonthPicker() {
         minDate={new Date('2018-03-01')}
         maxDate={new Date('2018-06-01')}
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
 
       <DatePicker
@@ -30,7 +30,7 @@ function YearMonthPicker() {
         label="Year and Month"
         helperText="Start from year selection"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
     </Fragment>
   );

diff --git a/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx b/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx
@@ -16,7 +16,7 @@ function CustomDateTimePicker(props) {
         hideTabs
         ampm={false}
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
         allowKeyboardControl={false}
         minDate={new Date('2018-01-01')}
         helperText="Hardcoded helper text"
@@ -37,7 +37,7 @@ function CustomDateTimePicker(props) {
 
       <KeyboardDateTimePicker
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
         label="Keyboard with error handler"
         onError={console.log}
         minDate={new Date('2018-01-01T00:00')}

diff --git a/docs/pages/demo/timepicker/BasicTimePicker.example.jsx b/docs/pages/demo/timepicker/BasicTimePicker.example.jsx
@@ -16,8 +16,10 @@ function BasicTimePicker() {
         onChange={handleDateChange}
       />
 
+      {/* Alternative way to show am/pm */}
       <TimePicker
         showTodayButton
+        ampmInClock
         todayLabel="now"
         label="Step = 5"
         value={selectedDate}

diff --git a/docs/pages/demo/timepicker/InlineTimePicker.example.jsx b/docs/pages/demo/timepicker/InlineTimePicker.example.jsx
@@ -9,16 +9,18 @@ function InlineTimePickerDemo() {
       <TimePicker
         variant="inline"
         label="Inline mode"
+        disableToolbar
+        ampmInClock
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
 
       <KeyboardTimePicker
         ampm={false}
         variant="inline"
         label="With keyboard"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
     </Fragment>
   );

diff --git a/docs/pages/demo/timepicker/SecondsTimePicker.example.jsx b/docs/pages/demo/timepicker/SecondsTimePicker.example.jsx
@@ -13,17 +13,17 @@ function SecondsTimePicker() {
         format="HH:mm:ss"
         label="With seconds"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
 
       <TimePicker
-        ampm={false}
+        ampmInClock
         openTo="minutes"
         views={['minutes', 'seconds']}
         format="mm:ss"
         label="Minutes and seconds"
         value={selectedDate}
-        onChange={handleDateChange}
+        onChange={date => handleDateChange(date)}
       />
     </Fragment>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ coverage @@
     # Cache directory
     .npm
-    cypress
+    ./cypress/**/*
     .next
     # Optional eslint cache
@@ Expand Down @@