Automatically import icons from @material-ui/icons if package install…

…ed (#840) * Update packages + remove postinstall prompt * Import icons from @material-ui/icons if it is installed * Add unit test for MuiIcon.test.tsx * Move import of MuiIcon to the top for not mocked test * Move default icons to the repository * Remove @material-ui/icons from the optionalDependecies * Remove icon font step from the installation guide
mnajdova · Jan 9, 2019 · f03eccb · f03eccb
1 parent 3efea2d
commit f03eccb
Show file tree

Hide file tree

Showing 29 changed files with 2,630 additions and 1,279 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,13 @@
-
 <p align="center">
   <a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="400" src="https://user-images.githubusercontent.com/16926049/50042115-1dea3d80-0068-11e9-9996-6b7ea8af9fc6.png" alt="Material-UI logo"></a></p>
 </p>
 
-<h1 align="center">Material-UI pickers</h1>  
+<h1 align="center">Material-UI pickers</h1>
 
 <div align="center">
-  
+
 Accessible, customizable, delightful date & time pickers for [@material-ui/core](https://material-ui.com/)
-  
+
 [![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/dmtrKovalenko/material-ui-pickers/branch/develop/graph/badge.svg)](https://codecov.io/gh/dmtrKovalenko/material-ui-pickers)
@@ -19,7 +18,9 @@ Accessible, customizable, delightful date & time pickers for [@material-ui/core]
 </div>
 
 ### Installation
+
 Available as npm package.
+
 ```sh
 npm i material-ui-pickers
 ```
@@ -53,20 +54,18 @@ function App() {
 render(<App />, document.querySelector('#app'));
 ```
 
-And the last step of installation would be an icon font. By default, we are relying on material-icons font, but it's possible to override any icons with the help of corresponding props.
-
-```html
-<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-```
-
 ## Documentation
+
 Check out the [documentation website](https://material-ui-pickers.firebaseapp.com/)
 
 ### Recently updated?
+
 Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases)
 
 ### Contributing
+
 For information about how to contribute, see the [CONTRIBUTING](https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/CONTRIBUTING.md) file.
 
 ### LICENSE
+
 The project is licensed under the terms of [MIT license](https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/LICENSE)
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -6,22 +6,23 @@
     "@date-io/date-fns": "0.0.2",
     "@date-io/luxon": "0.0.2",
     "@date-io/moment": "0.0.2",
-    "@material-ui/core": "^3.7.0",
-    "@types/classnames": "^2.2.6",
-    "@types/jest": "^23.3.10",
+    "@material-ui/core": "=3.7.0",
+    "@material-ui/icons": "^3.0.2",
+    "@types/classnames": "^2.2.7",
+    "@types/jest": "^23.3.12",
     "@types/luxon": "^1.4.1",
     "@types/moment-jalaali": "^0.7.4",
     "@types/node": "^10.12.18",
-    "@types/react": "^16.7.17",
+    "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
     "@types/react-jss": "^8.6.0",
     "@types/react-router": "^4.4.3",
     "@types/react-router-dom": "^4.3.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.0.0-alpha.26",
-    "formik": "^1.4.1",
+    "formik": "^1.4.2",
     "jss-rtl": "^0.2.3",
-    "luxon": "^1.8.3",
+    "luxon": "^1.9.0",
     "material-ui-pickers": "*",
     "material-ui-pickers-jalali-utils": "^0.4.3",
     "moment": "^2.23.0",
@@ -35,7 +36,7 @@
     "react-jss": "^8.6.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1",
+    "react-scripts": "^2.1.3",
     "typescript": "^3.2.2"
   },
   "scripts": {
@@ -58,6 +59,6 @@
   ],
   "devDependencies": {
     "patreon": "^0.4.1",
-    "react-docgen-typescript": "^1.12.2"
+    "react-docgen-typescript": "^1.12.3"
   }
 }
diff --git a/docs/public/index.html b/docs/public/index.html
@@ -19,8 +19,6 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#3f51b5">
-
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/docs/src/Pages/Components/DatePicker/CustomElementsDatePicker.example.jsx b/docs/src/Pages/Components/DatePicker/CustomElementsDatePicker.example.jsx
@@ -1,8 +1,6 @@
-/* eslint-disable no-param-reassign */
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import moment from 'moment';
 
 import { DatePicker } from 'material-ui-pickers';
 import { IconButton, withStyles } from '@material-ui/core';

diff --git a/docs/src/Pages/Components/DateTimePicker/CustomDateTimePicker.example.jsx b/docs/src/Pages/Components/DateTimePicker/CustomDateTimePicker.example.jsx
@@ -1,7 +1,9 @@
 import React, { PureComponent, Fragment } from 'react';
 import { DateTimePicker } from 'material-ui-pickers';
-import { IconButton, Icon, InputAdornment } from '@material-ui/core';
-import { withUtilsService } from '../../../_shared/UtilsServiceContext';
+import { IconButton, InputAdornment } from '@material-ui/core';
+import { withUtilsService } from '_shared/UtilsServiceContext';
+import AlarmIcon from '@material-ui/icons/AddAlarm';
+import SnoozeIcon from '@material-ui/icons/Snooze';
 
 class CustomDateTimePicker extends PureComponent {
   state = {
@@ -33,13 +35,13 @@ class CustomDateTimePicker extends PureComponent {
             value={selectedDate}
             onChange={this.handleDateChange}
             helperText="Hardcoded helper text"
-            leftArrowIcon={<Icon> add_alarm </Icon>}
-            rightArrowIcon={<Icon> snooze </Icon>}
+            leftArrowIcon={<AlarmIcon />}
+            rightArrowIcon={<SnoozeIcon />}
             InputProps={{
               endAdornment: (
                 <InputAdornment position="end">
                   <IconButton>
-                    <Icon>add_alarm</Icon>
+                    <AlarmIcon />
                   </IconButton>
                 </InputAdornment>
               ),

diff --git a/docs/src/Pages/Localization/Date-fns/DateFnsLocalization.example.jsx b/docs/src/Pages/Localization/Date-fns/DateFnsLocalization.example.jsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import DateFnsUtils from '@date-io/date-fns';
-import { Icon, IconButton, Menu, MenuItem } from '@material-ui/core';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import { DatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers';
 
 import frLocale from 'date-fns/locale/fr';
@@ -57,7 +58,7 @@ export default class DateFnsLocalizationExample extends PureComponent {
                   aria-owns={this.state.anchorEl ? 'locale-menu' : null}
                   onClick={this.handleMenuOpen}
                 >
-                  <Icon> more_vert </Icon>
+                  <MoreIcon />
                 </IconButton>
               ),
             }}

diff --git a/docs/src/Pages/Localization/Moment/MomentLocalization.example.jsx b/docs/src/Pages/Localization/Moment/MomentLocalization.example.jsx
@@ -3,7 +3,8 @@ import moment from 'moment';
 import 'moment/locale/fr';
 import 'moment/locale/ru';
 import MomentUtils from '@date-io/moment';
-import { Icon, IconButton, Menu, MenuItem } from '@material-ui/core';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import { DatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers';
 
 moment.locale('fr');
@@ -56,10 +57,10 @@ export default class MomentLocalizationExample extends PureComponent {
               endAdornment: (
                 <IconButton
                   aria-label="Select locale"
-                  aria-owns={this.state.anchorEl ? 'locale-menu' : null}
                   onClick={this.handleMenuOpen}
+                  aria-owns={this.state.anchorEl ? 'locale-menu' : null}
                 >
-                  <Icon> more_vert </Icon>
+                  <MoreIcon />
                 </IconButton>
               ),
             }}

diff --git a/docs/src/_shared/SourcablePanel.jsx b/docs/src/_shared/SourcablePanel.jsx
@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import { Typography, IconButton, Icon, withStyles, Collapse } from '@material-ui/core';
 import Code from './Code';
 import { withUtilsService } from './UtilsServiceContext';
+import CodeIcon from '@material-ui/icons/Code';
+import { Typography, IconButton, withStyles, Collapse } from '@material-ui/core';
 
 class SourcablePanel extends PureComponent {
   static propTypes = {
@@ -49,7 +50,7 @@ class SourcablePanel extends PureComponent {
 
         <div className={classes.pickers}>
           <IconButton className={classes.sourceBtn} onClick={this.toggleSource}>
-            <Icon>code</Icon>
+            <CodeIcon />
           </IconButton>
           <Component />
         </div>

diff --git a/docs/src/_shared/GithubIcon.jsx → docs/src/_shared/svgIcons/GithubIcon.jsx b/docs/src/_shared/GithubIcon.jsx → docs/src/_shared/svgIcons/GithubIcon.jsx
diff --git a/docs/src/_shared/svgIcons/LightbulbIcon.tsx b/docs/src/_shared/svgIcons/LightbulbIcon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+function LightbulbOutline(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  );
+}
+
+LightbulbOutline.muiName = 'SvgIcon';
+
+export default LightbulbOutline;
diff --git a/docs/src/layout/Layout.tsx b/docs/src/layout/Layout.tsx
@@ -7,7 +7,6 @@ import {
   AppBar,
   Toolbar,
   IconButton,
-  Icon,
   withStyles,
   Tooltip,
   WithStyles,
@@ -17,10 +16,16 @@ import {
   MenuItem,
 } from '@material-ui/core';
 
-import Github from '../_shared/GithubIcon';
+import Github from '../_shared/svgIcons/GithubIcon';
 import DrawerMenu from './DrawerMenu';
 import { utilsMap, UtilsLib } from '../App';
 
+import MenuIcon from '@material-ui/icons/Menu';
+import SettingsIcon from '@material-ui/icons/Settings';
+import TextDirectionLtrIcon from '@material-ui/icons/FormatTextdirectionLToR';
+import TextDirectionRtLIcon from '@material-ui/icons/FormatTextdirectionRToL';
+import LightbulbOutlineIcon from '../_shared/svgIcons/LightbulbIcon';
+
 interface LayoutProps extends RouteComponentProps, WithStyles<typeof styles, true> {
   toggleThemeType: () => void;
   toggleDirection: () => void;
@@ -80,14 +85,14 @@ class Layout extends Component<LayoutProps> {
               aria-label="Menu"
               onClick={this.handleDrawerToggle}
             >
-              <Icon>menu</Icon>
+              <MenuIcon />
             </IconButton>
 
             <div className={classes.flex} />
 
             <Tooltip title="Change library that will work with date under the hood">
               <IconButton color="inherit" onClick={this.handleUtilsMenuOpen}>
-                <Icon>settings</Icon>
+                <SettingsIcon />
               </IconButton>
             </Tooltip>
             <Menu
@@ -110,13 +115,13 @@ class Layout extends Component<LayoutProps> {
 
             <Tooltip title="Toggle light/dark theme" enterDelay={300}>
               <IconButton color="inherit" onClick={toggleThemeType}>
-                <Icon>lightbulb_outline</Icon>
+                <LightbulbOutlineIcon />
               </IconButton>
             </Tooltip>
 
             <Tooltip title="Toggle direction" enterDelay={300}>
               <IconButton color="inherit" onClick={toggleDirection}>
-                <Icon>format_textdirection_l_to_r</Icon>
+                {theme.direction === 'rtl' ? <TextDirectionLtrIcon /> : <TextDirectionRtLIcon />}
               </IconButton>
             </Tooltip>
             <Tooltip title="Github" enterDelay={300}>

diff --git a/docs/src/prop-types.json b/docs/src/prop-types.json
@@ -330,7 +330,7 @@
         "name": "DateTextFieldProps"
       },
       "required": false,
-      "type": { "name": "object" }
+      "type": { "name": "Partial<InputAdornmentProps>" }
     },
     "adornmentPosition": {
       "defaultValue": null,
@@ -642,7 +642,7 @@
         "name": "DateTextFieldProps"
       },
       "required": false,
-      "type": { "name": "object" }
+      "type": { "name": "Partial<InputAdornmentProps>" }
     },
     "adornmentPosition": {
       "defaultValue": null,
@@ -1119,7 +1119,7 @@
         "name": "DateTextFieldProps"
       },
       "required": false,
-      "type": { "name": "object" }
+      "type": { "name": "Partial<InputAdornmentProps>" }
     },
     "adornmentPosition": {
       "defaultValue": null,

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "allowJs": true,
+    "skipDefaultLibCheck": true,
     "lib": ["es6", "dom"],
     "skipLibCheck": false,
     "esModuleInterop": true,

diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 114194,
-    "minified": 67295,
-    "gzipped": 14631,
+    "bundled": 115237,
+    "minified": 68052,
+    "gzipped": 14835,
     "treeshaked": {
       "rollup": {
-        "code": 49588,
+        "code": 50219,
         "import_statements": 1317
       },
       "webpack": {
-        "code": 56392
+        "code": 57185
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 230591,
-    "minified": 100591,
-    "gzipped": 25518
+    "bundled": 231850,
+    "minified": 101280,
+    "gzipped": 25689
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 201925,
-    "minified": 90623,
-    "gzipped": 23903
+    "bundled": 203184,
+    "minified": 91312,
+    "gzipped": 24082
   }
 }