migrate typography to material-ui v3.2.0

Author: vanyakosmos

lib/package-lock.json

@@ -84,7 +84,7 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "@material-ui/core": "^3.1.1",
+    "@material-ui/core": "^3.2.0",
     "@types/classnames": "^2.2.6",
     "@types/jest": "^22.2.3",
     "@types/jss": "^9.5.6",

lib/package.json

@@ -114,14 +114,14 @@ export class DatePicker extends React.PureComponent<
       <>
         <PickerToolbar>
           <ToolbarButton
-            variant="subheading"
+            variant="subtitle1"
             onClick={this.openYearSelection}
             selected={showYearSelection}
             label={utils.getYearText(this.date)}
           />
 
           <ToolbarButton
-            variant="display1"
+            variant="h4"
             onClick={this.openCalendar}
             selected={!showYearSelection}
             label={utils.getDatePickerHeaderText(this.date)}

lib/src/DatePicker/DatePicker.tsx

@@ -60,7 +60,7 @@ export const CalendarHeader: React.SFC<CalendarHeaderProps> = ({
           transKey={currentMonth.toString()}
           className={classes.transitionContainer}
         >
-          <Typography align="center" variant="body1">
+          <Typography align="center" variant="body2">
             {utils.getCalendarHeaderText(currentMonth)}
           </Typography>
         </SlideTransition>

lib/src/DatePicker/components/CalendarHeader.tsx

@@ -56,7 +56,7 @@ export class Year extends React.PureComponent<YearProps> {
         onClick={this.handleClick}
         onKeyPress={this.handleClick}
         color={selected ? 'primary' : 'default'}
-        variant={selected ? 'headline' : 'subheading'}
+        variant={selected ? 'h5' : 'subtitle1'}
         {...other}
       >
         {children}

lib/src/DatePicker/components/Year.tsx

@@ -47,14 +47,14 @@ export const DateTimePickerHeader: React.SFC<
     <PickerToolbar className={classes.toolbar}>
       <div className={classes.dateHeader}>
         <ToolbarButton
-          variant="subheading"
+          variant="subtitle1"
           onClick={changeOpenView(DateTimePickerView.YEAR)}
           selected={openView === DateTimePickerView.YEAR}
           label={utils.getYearText(date)}
         />
 
         <ToolbarButton
-          variant="display1"
+          variant="h4"
           onClick={changeOpenView(DateTimePickerView.DATE)}
           selected={openView === DateTimePickerView.DATE}
           label={utils.getDateTimePickerHeaderText(date)}
@@ -64,21 +64,21 @@ export const DateTimePickerHeader: React.SFC<
       <div className={classes.timeHeader}>
         <div className={hourMinuteClassName}>
           <ToolbarButton
-            variant="display2"
+            variant="h3"
             onClick={changeOpenView(DateTimePickerView.HOUR)}
             selected={openView === DateTimePickerView.HOUR}
             label={utils.getHourText(date, ampm!)}
           />
 
           <ToolbarButton
-            variant="display2"
+            variant="h3"
             label=":"
             selected={false}
             className={classes.separator}
           />
 
           <ToolbarButton
-            variant="display2"
+            variant="h3"
             onClick={changeOpenView(DateTimePickerView.MINUTES)}
             selected={openView === DateTimePickerView.MINUTES}
             label={utils.getMinuteText(date)}
@@ -90,15 +90,15 @@ export const DateTimePickerHeader: React.SFC<
             <ToolbarButton
               className={classes.ampmLabel}
               selected={meridiemMode === 'am'}
-              variant="subheading"
+              variant="subtitle1"
               label={utils.getMeridiemText('am')}
               onClick={setMeridiemMode('am')}
             />
 
             <ToolbarButton
               className={classes.ampmLabel}
               selected={meridiemMode === 'pm'}
-              variant="subheading"
+              variant="subtitle1"
               label={utils.getMeridiemText('pm')}
               onClick={setMeridiemMode('pm')}
             />