Merge pull request #686 from matt-wright86/issue-678

issue-678
mui · Oct 11, 2018 · d7cd2d3 · d7cd2d3
2 parents 16509de + 7ff7aeb
commit d7cd2d3
Show file tree

Hide file tree

Showing 19 changed files with 66 additions and 66 deletions.
diff --git a/docs/src/Examples/Localization/PersianPickers.jsx b/docs/src/Examples/Localization/PersianPickers.jsx
@@ -22,7 +22,7 @@ export default class BasicUsage extends Component {
     return (
       <MuiPickersUtilsProvider utils={JalaliUtils} locale="fa">
         <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
+          <Typography variant="h5" align="center" gutterBottom>
             Date picker
           </Typography>
 
@@ -39,7 +39,7 @@ export default class BasicUsage extends Component {
         </div>
 
         <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
+          <Typography variant="h5" align="center" gutterBottom>
             Time picker
           </Typography>
 
@@ -55,7 +55,7 @@ export default class BasicUsage extends Component {
         </div>
 
         <div className="picker">
-          <Typography variant="headline" align="center" gutterBottom>
+          <Typography variant="h5" align="center" gutterBottom>
             DateTime picker
           </Typography>
 

diff --git a/docs/src/Routes/Demos/DatePickerDemo.jsx b/docs/src/Routes/Demos/DatePickerDemo.jsx
@@ -5,13 +5,13 @@ import { Typography } from '@material-ui/core';
 
 const DatePickerDemoDemo = () => (
   <div>
-    <Typography variant="display2" gutterBottom>
+    <Typography variant="h3" gutterBottom>
       Date picker
     </Typography>
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Date pickers use a dialog window to select a single date.
     </Typography>
-    <Typography variant="body1">
+    <Typography variant="body2">
       The selected day is indicated by a filled circle.
       The current day is indicated by a different color and type weight.
     </Typography>
@@ -35,7 +35,7 @@ const DatePickerDemoDemo = () => (
       title="Custom day element"
       sourceFile="Demo/DatePicker/CustomElementsDatePicker.jsx"
       description={
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           Customization performing by overriding render method for Day component.
           <a href="https://codesandbox.io/s/mozqv539lp"> Here </a> example with moment-js
         </Typography>

diff --git a/docs/src/Routes/Demos/DateTimePickerDemo.jsx b/docs/src/Routes/Demos/DateTimePickerDemo.jsx
@@ -5,13 +5,13 @@ import { Typography } from '@material-ui/core';
 
 const DateTimePickerDemo = () => (
   <div>
-    <Typography variant="display2" gutterBottom>
+    <Typography variant="h3" gutterBottom>
       Date & time picker
     </Typography>
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       This component is not from material design guidelines.
     </Typography>
-    <Typography variant="body1">
+    <Typography variant="body2">
       Its a combination of date & time picker and allows
       that uses the modal to select both date and time with one control.
     </Typography>
@@ -30,7 +30,7 @@ const DateTimePickerDemo = () => (
       title="Customization"
       sourceFile="Demo/DateTimePicker/CustomDateTimePicker.jsx"
       description={
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           Applied mostly all customization, that available for date & time pickers
         </Typography>
       }

diff --git a/docs/src/Routes/Demos/TimePickerDemo.jsx b/docs/src/Routes/Demos/TimePickerDemo.jsx
@@ -5,21 +5,21 @@ import { Typography } from '@material-ui/core';
 
 const DatePickerDemoDemo = () => (
   <div>
-    <Typography variant="display2" gutterBottom>
+    <Typography variant="h3" gutterBottom>
       Time picker
     </Typography>
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Time pickers use a dialog to select a single time (in the hours:minutes format).
     </Typography>
-    <Typography variant="body1">
+    <Typography variant="body2">
       The selected time is indicated by the filled circle at the end of the clock hand.
     </Typography>
 
     <SourcablePanel
       title="Basic usage"
       sourceFile="Demo/TimePicker/TimePickerBasic.jsx"
       description={
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           A time picker should adjusts to a user’s preferred time setting,
           i.e. the 12-hour or 24-hour format.
         </Typography>
@@ -30,7 +30,7 @@ const DatePickerDemoDemo = () => (
       title="Seconds input"
       sourceFile="Demo/TimePicker/SecondsTimePicker.jsx"
       description={
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           Seconds input can be used for selection of precise time point
         </Typography>
       }

diff --git a/docs/src/Routes/GettingStarted/Installation.jsx b/docs/src/Routes/GettingStarted/Installation.jsx
@@ -14,17 +14,17 @@ npm i -s luxon`;
 
 const Installation = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Installation </Typography>
-    <Typography variant="body1" gutterBottom> Available as <a className="link" href="https://www.npmjs.com/package/material-ui-pickers"> npm package </a> </Typography>
+    <Typography variant="h3" gutterBottom> Installation </Typography>
+    <Typography variant="body2" gutterBottom> Available as <a className="link" href="https://www.npmjs.com/package/material-ui-pickers"> npm package </a> </Typography>
 
     <Code withMargin text="npm i -s material-ui-pickers" />
 
-    <Typography variant="display1" gutterBottom> Peer Library </Typography>
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="h4" gutterBottom> Peer Library </Typography>
+    <Typography variant="body2" gutterBottom>
       Material-ui-pickers was designed to use that date management library that you need.
     </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       We are providing interfaces for <a className="link" href="https://momentjs.com/">moment</a>
       &nbsp;, <a className="link" href="https://date-fns.org/">date-fns 2</a> and
       <a className="link" href="https://moment.github.io/luxon/"> luxon</a>.
@@ -34,7 +34,7 @@ const Installation = () => (
       because it is much more lightweight and will be correctly tree-shaken from the bundle.
     </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Note, that we support only 2.0.0-alpha.16 version of date-fns for now (see
       &nbsp;<a className="link" href="https://github.com/dmtrKovalenko/material-ui-pickers/issues/414#issuecomment-389523267">#414</a>
       ).
@@ -47,8 +47,8 @@ const Installation = () => (
     </Typography>
 
     <Code withMargin text={muiPickerProviderCode} />
-    <Typography variant="display1" gutterBottom> Font Icons </Typography>
-    <Typography variant="body1">
+    <Typography variant="h4" gutterBottom> Font Icons </Typography>
+    <Typography variant="body2">
       We are using material-ui-icons icon font to display icons.
       In order if you can override with a help of corresponding props. Just add this to your html
     </Typography>

diff --git a/docs/src/Routes/GettingStarted/ParsingDates.jsx b/docs/src/Routes/GettingStarted/ParsingDates.jsx
@@ -3,7 +3,7 @@ import { Typography } from '@material-ui/core';
 
 const ParsingDates = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Parsing dates </Typography>
+    <Typography variant="h3" gutterBottom> Parsing dates </Typography>
 
     <Typography gutterBottom>
       Material-UI pickers rely on the date management library when the date should be parsed.

diff --git a/docs/src/Routes/GettingStarted/Usage.jsx b/docs/src/Routes/GettingStarted/Usage.jsx
@@ -8,29 +8,29 @@ const sandBoxId = '74mqv6qq90';
 
 const Usage = ({ classes }) => (
   <div>
-    <Typography variant="display2" gutterBottom> Usage </Typography>
+    <Typography variant="h3" gutterBottom> Usage </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Material-UI-pickers rely only on material-ui controls and the date-management lib
       you have choose. Please note that all components are controlled, thats means that its required
       to pass <span className="inline-code"> value </span> and <span className="inline-code"> onChange </span> props.
     </Typography>
 
     <Typography
-      variant="display1"
+      variant="h4"
       className={classes.quickStartHeader}
       gutterBottom
     >
       Quick Start
     </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Here is a quick example you to get started
     </Typography>
 
     <Code withMargin text={quickStartCode} />
 
-    <Typography variant="display1" gutterBottom>
+    <Typography variant="h4" gutterBottom>
       Interactive example
     </Typography>
 

diff --git a/docs/src/Routes/Guides/ControllingProgrammatically.jsx b/docs/src/Routes/Guides/ControllingProgrammatically.jsx
@@ -4,9 +4,9 @@ import { Typography } from '@material-ui/core';
 
 const ControllingProgrammatically = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Control programmatically </Typography>
+    <Typography variant="h3" gutterBottom> Control programmatically </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Any picker can be controlled by <span className="inline-code"> ref </span> property
       which add an ability open any picker from the code. See an example below
     </Typography>

diff --git a/docs/src/Routes/Guides/CssOverrides.jsx b/docs/src/Routes/Guides/CssOverrides.jsx
@@ -4,14 +4,14 @@ import { Typography } from '@material-ui/core';
 
 const CssOverrides = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Override stylesheet </Typography>
+    <Typography variant="h3" gutterBottom> Override stylesheet </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Default pickers appearance built based on material-ui theme provided.
       So pickers will take all colors/fonts/theme setting as any other material-ui components.
     </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       But we are not providing any for-component classes api to override stylesheet for
       particular component. Only one way to override existed stylesheet -
       usage of global material-ui theme overrides.
@@ -21,7 +21,7 @@ const CssOverrides = () => (
       title="Override example"
       sourceFile="Guides/CssTheme.jsx"
       description={
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           You can find the override component name and class in
           the generated classnames for pickers components.
         </Typography>

diff --git a/docs/src/Routes/Guides/FormatsCustomization.jsx b/docs/src/Routes/Guides/FormatsCustomization.jsx
@@ -8,14 +8,14 @@ import utilsInterfaceCode from '!raw-loader!material-ui-pickers/typings/utils.d.
 
 const FormatCustomization = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Format customization </Typography>
+    <Typography variant="h3" gutterBottom> Format customization </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       For localization purpose may be needed to change displaying values in the pickers modal,
       because default formats can be not idiomatic for some localizations. There utils can help you.
     </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       It`s possible to override any of displaying date values by inheritance
       of utils passed to MuiPickersProvider.
     </Typography>
@@ -24,17 +24,17 @@ const FormatCustomization = () => (
       title="Patched french picker"
       sourceFile="Guides/OverrideFormatPicker.jsx"
       description={
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           You can use ES6 class syntax or override values with a help of .prototype property
         </Typography>
       }
     />
 
-    <Typography variant="display1" gutterBottom>
+    <Typography variant="h4" gutterBottom>
       Utils interface
     </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Where TDate - date object passed from state (moment, native Date or Luxon`s DateTime)
     </Typography>
 

diff --git a/docs/src/Routes/Guides/StaticPickers.jsx b/docs/src/Routes/Guides/StaticPickers.jsx
@@ -4,14 +4,14 @@ import { Typography } from '@material-ui/core';
 
 const StaticPickers = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Static pickers </Typography>
+    <Typography variant="h3" gutterBottom> Static pickers </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Somewhere its required to use some internal control for calendar or some timeinput.
       Here you are! You can use directly any sub-control of the pickers.
     </Typography>
 
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       Also you can use our own HOC that is using for any picker
       which provide managing temporary chosen date and submitting state logic.
     </Typography>
@@ -20,7 +20,7 @@ const StaticPickers = () => (
       title="Static pickers examples"
       sourceFile="Guides/StaticPickers.jsx"
       description={
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           The api for each component in much is same as for root component.
           But somewhere when needed you can check the api
           on the github or from component`s prop-types.

diff --git a/docs/src/Routes/Landing/Landing.jsx b/docs/src/Routes/Landing/Landing.jsx
@@ -30,10 +30,10 @@ class Demo extends Component {
             src={MuiLogo}
           />
 
-          <Typography variant="display1" color="inherit" className="title text-light" gutterBottom>
+          <Typography variant="h4" color="inherit" className="title text-light" gutterBottom>
             Material-UI Pickers
           </Typography>
-          <Typography variant="headline" align="center" color="inherit" gutterBottom className="text-light">
+          <Typography variant="h5" align="center" color="inherit" gutterBottom className="text-light">
             Accessible, customizable, delightful date & time pickers for @material-ui/core
           </Typography>
 
@@ -45,7 +45,7 @@ class Demo extends Component {
         </Toolbar>
 
         <div id="content" className={classes.content}>
-          <Typography variant="display1" align="center" gutterBottom>
+          <Typography variant="h4" align="center" gutterBottom>
             Support material-ui-pickers
           </Typography>
 

diff --git a/docs/src/Routes/Localization/DateFnsLocalization.jsx b/docs/src/Routes/Localization/DateFnsLocalization.jsx
@@ -4,8 +4,8 @@ import { Typography } from '@material-ui/core';
 
 const DateFnsLocalization = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Localization date-fns </Typography>
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="h3" gutterBottom> Localization date-fns </Typography>
+    <Typography variant="body2" gutterBottom>
       Date-fns localization simply performs by passing date-fns locale object
       to the MuiPickerUtilsProvider
     </Typography>
@@ -14,7 +14,7 @@ const DateFnsLocalization = () => (
       title="Localized example"
       sourceFile="Localization/DateFnsLocalizationExample.jsx"
       description={(
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           Note that pickers would be rerender automatically on locale change
         </Typography>
       )}

diff --git a/docs/src/Routes/Localization/MomentLocalization.jsx b/docs/src/Routes/Localization/MomentLocalization.jsx
@@ -6,11 +6,11 @@ import { Typography } from '@material-ui/core';
 
 const MomentLocalization = () => (
   <div>
-    <Typography variant="display2" gutterBottom> Localization moment </Typography>
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="h3" gutterBottom> Localization moment </Typography>
+    <Typography variant="body2" gutterBottom>
       Moment localization relying on the global moment object used.
     </Typography>
-    <Typography variant="body1" gutterBottom>
+    <Typography variant="body2" gutterBottom>
       It is possible to pass configured global moment with selected locale, default timezone, etc.
       Also pass selected locale as string to the provider
       to make pickers rerenders automatically on locale change.
@@ -19,7 +19,7 @@ const MomentLocalization = () => (
       title="Localized example"
       sourceFile="Localization/MomentLocalizationExample.jsx"
       description={(
-        <Typography variant="body1" gutterBottom>
+        <Typography variant="body2" gutterBottom>
           Note that pickers would be rerender automatically on locale change
         </Typography>
       )}