Merge pull request mui#1534 from mui-org/feature/api-changes

Api changes

.percy.yml

@@ -0,0 +1,7 @@
+version: 1
+snapshot:
+  percy-css: |
+    #codefund {
+      display: none;
+    }
+  |

docs/_shared/Ad.tsx

@@ -36,6 +36,10 @@ const Ad: React.FC = () => {
     }
   }, []);
 
+  if (process.env.VISUAL_TESTING) {
+    return null;
+  }
+
   return (
     <Grid container>
       <span id="codefund-script-position" />

docs/_shared/PropTypesTable.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import Code from './Code';
 import FuzzySearch from 'fuzzy-search';
+import ReactMarkdown from 'react-markdown';
 import PropTypesDoc from '../prop-types.json';
 import SearchBar from 'material-ui-search-bar';
 import React, { useMemo, useState } from 'react';
@@ -141,7 +142,7 @@ const PropTypesTableLazy: React.FC<PropTypesTableProps> = ({ disableHeader, src
                 </TableCell>
 
                 <TableCell className={classes.description}>
-                  <span dangerouslySetInnerHTML={{ __html: prop.description }} />
+                  <ReactMarkdown source={prop.description} />
                 </TableCell>
               </TableRow>
             ))}

docs/pages/api/props.tsx

@@ -7,7 +7,7 @@ import { PageMeta } from '_shared/PageMeta';
 import { WithRouterProps, withRouter } from 'next/router';
 import { Typography, Grid, makeStyles } from '@material-ui/core';
 
-const internalComponents = ['Calendar', 'ClockView'];
+const internalComponents = ['Calendar', 'ClockView', 'Day'];
 const useStyles = makeStyles(theme => ({
   kawaiiIcon: {
     marginTop: 48,

docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx

@@ -12,7 +12,7 @@ function AdvancedKeyboardExample(props) {
         variant="outlined"
         label="Advanced keyboard"
         placeholder="2018/01/01"
-        format={props.__willBeReplacedGetFormatString({
+        inputFormat={props.__willBeReplacedGetFormatString({
           moment: 'YYYY/MM/DD',
           dateFns: 'yyyy/MM/dd',
         })}

docs/pages/demo/datepicker/CustomDay.example.jsx

@@ -1,36 +1,38 @@
 import clsx from 'clsx';
-import format from 'date-fns/format';
-import isValid from 'date-fns/isValid';
+import React, { useState } from 'react';
 import isSameDay from 'date-fns/isSameDay';
 import endOfWeek from 'date-fns/endOfWeek';
-import React, { PureComponent } from 'react';
 import startOfWeek from 'date-fns/startOfWeek';
 import isWithinInterval from 'date-fns/isWithinInterval';
-import { DatePicker } from '@material-ui/pickers';
-import { createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
+import { DatePicker, Day } from '@material-ui/pickers';
 // this guy required only on the docs site to work with dynamic date library
 import { makeJSDateObject } from '../../../utils/helpers';
-import { IconButton, withStyles } from '@material-ui/core';
 
-class CustomElements extends PureComponent {
-  state = {
-    selectedDate: new Date(),
-  };
-
-  handleWeekChange = date => {
-    this.setState({ selectedDate: startOfWeek(makeJSDateObject(date)) });
-  };
-
-  formatWeekSelectLabel = (date, invalidLabel) => {
-    let dateClone = makeJSDateObject(date);
+const useStyles = makeStyles(theme => ({
+  highlight: {
+    borderRadius: 0,
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.common.white,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.primary.dark,
+    },
+  },
+  firstHighlight: {
+    borderTopLeftRadius: '50%',
+    borderBottomLeftRadius: '50%',
+  },
+  endHighlight: {
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+  },
+}));
 
-    return dateClone && isValid(dateClone)
-      ? `Week of ${format(startOfWeek(dateClone), 'MMM do')}`
-      : invalidLabel;
-  };
+function WeekPicker(props) {
+  const classes = useStyles(props);
+  const [selectedDate, handleDateChange] = useState(new Date());
 
-  renderWrappedWeekDay = (date, selectedDate, dayInCurrentMonth) => {
-    const { classes } = this.props;
+  const renderWeekPickerDay = (date, selectedDate, DayComponentProps) => {
     let dateClone = makeJSDateObject(date);
     let selectedDateClone = makeJSDateObject(selectedDate);
 
@@ -41,81 +43,32 @@ class CustomElements extends PureComponent {
     const isFirstDay = isSameDay(dateClone, start);
     const isLastDay = isSameDay(dateClone, end);
 
-    const wrapperClassName = clsx({
-      [classes.highlight]: dayIsBetween,
-      [classes.firstHighlight]: isFirstDay,
-      [classes.endHighlight]: isLastDay,
-    });
-
-    const dayClassName = clsx(classes.day, {
-      [classes.nonCurrentMonthDay]: !dayInCurrentMonth,
-      [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth && dayIsBetween,
-    });
-
     return (
-      <div className={wrapperClassName}>
-        <IconButton className={dayClassName}>
-          <span> {format(dateClone, 'd')} </span>
-        </IconButton>
-      </div>
+      <Day
+        {...DayComponentProps}
+        disableMargin
+        className={clsx({
+          [classes.highlight]: dayIsBetween,
+          [classes.firstHighlight]: isFirstDay,
+          [classes.endHighlight]: isLastDay,
+        })}
+      />
     );
   };
 
-  render() {
-    const { selectedDate } = this.state;
-
-    return (
-      <DatePicker
-        label="Week picker"
-        value={selectedDate}
-        onChange={this.handleWeekChange}
-        renderDay={this.renderWrappedWeekDay}
-        labelFunc={this.formatWeekSelectLabel}
-      />
-    );
-  }
+  return (
+    <DatePicker
+      showDaysOutsideCurrentMonth
+      label="Week picker"
+      value={selectedDate}
+      onChange={handleDateChange}
+      renderDay={renderWeekPickerDay}
+      inputFormat={props.__willBeReplacedGetFormatString({
+        moment: `[Week of] MMM D`,
+        dateFns: "'Week of' MMM d",
+      })}
+    />
+  );
 }
 
-const styles = createStyles(theme => ({
-  dayWrapper: {
-    position: 'relative',
-  },
-  day: {
-    width: 36,
-    height: 36,
-    fontSize: theme.typography.caption.fontSize,
-    margin: '0 2px',
-    color: 'inherit',
-  },
-  customDayHighlight: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: '2px',
-    right: '2px',
-    border: `1px solid ${theme.palette.secondary.main}`,
-    borderRadius: '50%',
-  },
-  nonCurrentMonthDay: {
-    color: theme.palette.text.disabled,
-  },
-  highlightNonCurrentMonthDay: {
-    color: '#676767',
-  },
-  highlight: {
-    background: theme.palette.primary.main,
-    color: theme.palette.common.white,
-  },
-  firstHighlight: {
-    extend: 'highlight',
-    borderTopLeftRadius: '50%',
-    borderBottomLeftRadius: '50%',
-  },
-  endHighlight: {
-    extend: 'highlight',
-    borderTopRightRadius: '50%',
-    borderBottomRightRadius: '50%',
-  },
-}));
-
-export default withStyles(styles)(CustomElements);
+export default WeekPicker;

docs/pages/demo/datepicker/DatePickers.example.jsx

@@ -12,7 +12,7 @@ function DatePickersVariants(props) {
         value={selectedDate}
         placeholder="10/10/2018"
         onChange={date => handleDateChange(date)}
-        format={props.__willBeReplacedGetFormatString({
+        inputFormat={props.__willBeReplacedGetFormatString({
           moment: 'MM/DD/YYYY',
           dateFns: 'MM/dd/yyyy',
         })}

docs/pages/demo/datepicker/ServerRequest.example.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Badge } from '@material-ui/core';
-import { DatePicker } from '@material-ui/pickers';
+import { DatePicker, Day } from '@material-ui/pickers';
 import { makeJSDateObject } from '../../../utils/helpers';
 
 function getRandomNumber(min, max) {
@@ -24,16 +24,19 @@ function ServerRequest() {
   return (
     <>
       <DatePicker
-        label="With server data"
         value={selectedDate}
         onChange={date => handleDateChange(date)}
         onMonthChange={handleMonthChange}
-        renderDay={(day, selectedDate, isInCurrentMonth, dayComponent) => {
+        renderDay={(day, selectedDate, DayComponentProps) => {
           const date = makeJSDateObject(day); // skip this step, it is required to support date libs
-          const isSelected = isInCurrentMonth && selectedDays.includes(date.getDate());
+          const isSelected =
+            DayComponentProps.isInCurrentMonth && selectedDays.includes(date.getDate());
 
-          // You can also use our internal <Day /> component
-          return <Badge badgeContent={isSelected ? '🌚' : undefined}>{dayComponent}</Badge>;
+          return (
+            <Badge overlap="circle" badgeContent={isSelected ? '🌚' : undefined}>
+              <Day {...DayComponentProps} />
+            </Badge>
+          );
         }}
       />
     </>

docs/pages/demo/datepicker/index.mdx

@@ -61,7 +61,8 @@ We are providing default localized formats, but you can change this behaviour wi
 
 #### Customization
 
-The displaying of dates is heavily cusomizable. Thus you can add badges or fully change displaying of day.
+The displaying of dates is heavily cusomizable. Use `renderDay` function to customize view of the day.
+You can leverage our internal [Day](/api/Day) component, and render it in default way by spreading `dayProps` argument.
 
 <Example source={CustomDay} />
 

docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
+import AlarmIcon from '@material-ui/icons/Alarm';
 import SnoozeIcon from '@material-ui/icons/Snooze';
-import AlarmIcon from '@material-ui/icons/AddAlarm';
-import { IconButton, InputAdornment } from '@material-ui/core';
+import ClockIcon from '@material-ui/icons/AccessTime';
 import { DateTimePicker, MobileDateTimePicker } from '@material-ui/pickers';
 
 function CustomDateTimePicker(props) {
@@ -14,25 +14,20 @@ function CustomDateTimePicker(props) {
         autoOk
         disableFuture
         hideTabs
-        ampm={false}
+        showTodayButton
+        todayLabel="now"
+        openTo="hours"
         value={selectedDate}
         onChange={date => handleDateChange(date)}
-        allowKeyboardControl={false}
         minDate={new Date('2018-01-01')}
         helperText="Hardcoded helper text"
         leftArrowIcon={<AlarmIcon />}
-        leftArrowButtonProps={{ 'aria-label': 'Prev month' }}
-        rightArrowButtonProps={{ 'aria-label': 'Next month' }}
         rightArrowIcon={<SnoozeIcon />}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <IconButton>
-                <AlarmIcon />
-              </IconButton>
-            </InputAdornment>
-          ),
-        }}
+        leftArrowButtonText="Open previous month"
+        rightArrowButtonText="Open next month"
+        keyboardIcon={<ClockIcon />}
+        minTime={new Date(0, 0, 0, 9)}
+        maxTime={new Date(0, 0, 0, 20)}
       />
 
       <MobileDateTimePicker
@@ -41,7 +36,7 @@ function CustomDateTimePicker(props) {
         label="With error handler"
         onError={console.log}
         minDate={new Date('2018-01-01T00:00')}
-        format={props.__willBeReplacedGetFormatString({
+        inputFormat={props.__willBeReplacedGetFormatString({
           moment: 'YYYY/MM/DD hh:mm A',
           dateFns: 'yyyy/MM/dd hh:mm a',
         })}

docs/pages/demo/datetime-picker/DateTimePickers.example.jsx

@@ -28,7 +28,7 @@ function DateTimePickerDemo(props) {
         value={selectedDate}
         onChange={handleDateChange}
         onError={console.log}
-        format={props.__willBeReplacedGetFormatString({
+        inputFormat={props.__willBeReplacedGetFormatString({
           moment: 'YYYY/MM/DD HH:mm',
           dateFns: 'yyyy/MM/dd HH:mm',
         })}

docs/pages/demo/timepicker/SecondsTimePicker.example.jsx

@@ -10,7 +10,7 @@ function SecondsTimePicker() {
         ampm={false}
         openTo="hours"
         views={['hours', 'minutes', 'seconds']}
-        format="HH:mm:ss"
+        inputFormat="HH:mm:ss"
         label="With seconds"
         value={selectedDate}
         onChange={date => handleDateChange(date)}
@@ -20,7 +20,7 @@ function SecondsTimePicker() {
         ampmInClock
         openTo="minutes"
         views={['minutes', 'seconds']}
-        format="mm:ss"
+        inputFormat="mm:ss"
         label="Minutes and seconds"
         value={selectedDate}
         onChange={date => handleDateChange(date)}

docs/pages/guides/ControllingProgrammatically.example.jsx

@@ -23,7 +23,7 @@ function ControllingProgrammaticallyExample() {
         onOpen={() => setIsOpen(true)}
         onClose={() => setIsOpen(false)}
         label="Open me from button"
-        format="d MMM yyyy"
+        inputFormat="d MMM yyyy"
         value={selectedDate}
         onChange={handleDateChange}
       />

docs/pages/guides/Formats.example.jsx

@@ -19,7 +19,7 @@ function DateFnsLocalizationExample() {
       <DatePicker
         clearable
         helperText="Localization done right"
-        format="d MMM yyyy"
+        inputFormat="d MMM yyyy"
         value={selectedDate}
         onChange={handleDateChange}
         clearLabel="vider"

docs/pages/guides/Formik.example.jsx

@@ -13,7 +13,7 @@ const DatePickerField = ({ field, form, ...other }) => {
       disablePast
       name={field.name}
       value={field.value}
-      format="dd/MM/yyyy"
+      inputFormat="dd/MM/yyyy"
       helperText={currentError}
       error={Boolean(currentError)}
       onError={error => {

docs/pages/guides/ReduxForm.example.jsx

@@ -23,7 +23,7 @@ const DateField = props => {
     <DatePicker
       {...inputProps}
       {...others}
-      format="dd/MM/yyyy"
+      inputFormat="dd/MM/yyyy"
       value={value ? new Date(value) : null}
       disabled={submitting}
       onBlur={() => onBlur(value ? new Date(value).toISOString() : null)}

docs/pages/localization/Date-fns-customized.example.jsx

@@ -68,7 +68,7 @@ function DateFnsLocalizationExample() {
       <DatePicker
         value={selectedDate}
         onChange={handleDateChange}
-        format={localeFormatMap[locale]}
+        inputFormat={localeFormatMap[locale]}
         cancelLabel={localeCancelLabelMap[locale]}
         InputProps={{
           endAdornment: (