Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add demos for public picker components #25812

Merged
merged 8 commits into from
Apr 20, 2021
Merged

[docs] Add demos for public picker components #25812

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8a8bf15
[docs] List demos for picker components
eps1lon Apr 17, 2021
5941dfb
Add demos for MonthPicker and YearPicker
eps1lon Apr 17, 2021
1ade1ec
Add demo for ClockPicker
eps1lon Apr 17, 2021
0ba1991
Add demo for DateRangePickerDay
eps1lon Apr 17, 2021
a10114d
Merge branch 'next' into docs/picker-component-demos
eps1lon Apr 17, 2021
04d84a8
Fix c&p label
eps1lon Apr 19, 2021
f7e46c9
Merge remote-tracking branch 'upstream/next' into docs/picker-compone…
eps1lon Apr 20, 2021
05bff4a
Reduce YearPicker height
eps1lon Apr 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api-docs/calendar-picker-skeleton.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
"styledComponent": false,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/calendar-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/material-ui-lab/src/CalendarPicker/CalendarPicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
"styledComponent": false,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/clock-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/time-picker/\">Time Picker</a></li></ul>",
"styledComponent": false,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/date-range-picker-day.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"forwardsRefTo": "HTMLButtonElement",
"filename": "/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-range-picker/\">Date Range Picker</a></li></ul>",
"styledComponent": false,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/desktop-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
"spread": true,
"filename": "/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
"styledComponent": true,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/desktop-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/material-ui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/time-picker/\">Time Picker</a></li></ul>",
"styledComponent": true,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/mobile-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
"spread": true,
"filename": "/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
"styledComponent": true,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/mobile-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/material-ui-lab/src/MobileTimePicker/MobileTimePicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/time-picker/\">Time Picker</a></li></ul>",
"styledComponent": true,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/month-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/material-ui-lab/src/MonthPicker/MonthPicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
"styledComponent": false,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/static-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
"spread": true,
"filename": "/packages/material-ui-lab/src/StaticDatePicker/StaticDatePicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
"styledComponent": true,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/static-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
"forwardsRefTo": "undefined",
"filename": "/packages/material-ui-lab/src/StaticTimePicker/StaticTimePicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/time-picker/\">Time Picker</a></li></ul>",
"styledComponent": true,
"cssComponent": false
}
2 changes: 1 addition & 1 deletion docs/pages/api-docs/year-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/material-ui-lab/src/YearPicker/YearPicker.tsx",
"inheritance": null,
"demos": "",
"demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
"styledComponent": false,
"cssComponent": false
}
54 changes: 46 additions & 8 deletions docs/src/pages/components/date-picker/SubComponentsPickers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,56 @@
import * as React from 'react';
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core/styles';
import CalendarPicker from '@material-ui/lab/CalendarPicker';
import MonthPicker from '@material-ui/lab/MonthPicker';
import YearPicker from '@material-ui/lab/YearPicker';

const minDate = new Date('2000-01-01T00:00:00.000');
const maxDate = new Date('2100-01-01T00:00:00.000');

const useYearPickerStyles = makeStyles({
root: {
maxWidth: '30ch',
},
});

export default function SubComponentsPickers() {
const [date, setDate] = React.useState(new Date());

const yearPickerClasses = useYearPickerStyles();

return (
<LocalizaitonProvider dateAdapter={AdapterDateFns}>
<CalendarPicker
allowKeyboardControl={false}
date={date}
onChange={(newValue) => setDate(newValue)}
/>
</LocalizaitonProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box
sx={{
display: 'flex',
alignItems: 'start',
flexDirection: 'row',
'& > div': { margin: 2 },
}}
>
<CalendarPicker
allowKeyboardControl={false}
date={date}
onChange={(newValue) => setDate(newValue)}
/>
<MonthPicker
date={date}
minDate={minDate}
maxDate={maxDate}
onChange={(newValue) => setDate(newValue)}
/>
<YearPicker
className={yearPickerClasses.root}
date={date}
isDateDisabled={() => false}
minDate={minDate}
maxDate={maxDate}
onChange={(newValue) => setDate(newValue)}
/>
</Box>
</LocalizationProvider>
);
}
54 changes: 46 additions & 8 deletions docs/src/pages/components/date-picker/SubComponentsPickers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,56 @@
import * as React from 'react';
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core/styles';
eps1lon marked this conversation as resolved.
Show resolved Hide resolved
import CalendarPicker from '@material-ui/lab/CalendarPicker';
import MonthPicker from '@material-ui/lab/MonthPicker';
import YearPicker from '@material-ui/lab/YearPicker';

const minDate = new Date('2000-01-01T00:00:00.000');
const maxDate = new Date('2100-01-01T00:00:00.000');

const useYearPickerStyles = makeStyles({
root: {
maxWidth: '30ch',
},
});

export default function SubComponentsPickers() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The layout seems broken on this demo. For instance, shouldn't we have an overflow here:

Screenshot 2021-04-18 at 16 40 58

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand what you mean. Please elaborate why this layout seems broken first. Then we can talk about what should overflow into what.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. 1800 pixels tall demo. It's impossible to have the source "side by side" with this content. A max-height on the year picker would be a great first step

scroll

  1. It overflows on smaller screens

Screenshot 2021-04-20 at 01 16 06

  1. The CalendarPicker flexbox shrinks. It shouldn't. I think that we miss a flexShrink: 0 in its source. It looks significantly distorted:

Screenshot 2021-04-20 at 01 18 21

The same goes for the 2 other components.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Limited to just a couple of years.

const [date, setDate] = React.useState<Date | null>(new Date());

const yearPickerClasses = useYearPickerStyles();

return (
<LocalizaitonProvider dateAdapter={AdapterDateFns}>
<CalendarPicker
allowKeyboardControl={false}
date={date}
onChange={(newValue) => setDate(newValue)}
/>
</LocalizaitonProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box
sx={{
display: 'flex',
alignItems: 'start',
flexDirection: 'row',
'& > div': { margin: 2 },
}}
>
<CalendarPicker
allowKeyboardControl={false}
date={date}
onChange={(newValue) => setDate(newValue)}
/>
<MonthPicker
date={date}
minDate={minDate}
maxDate={maxDate}
onChange={(newValue) => setDate(newValue)}
/>
<YearPicker
className={yearPickerClasses.root}
date={date}
isDateDisabled={() => false}
minDate={minDate}
maxDate={maxDate}
onChange={(newValue) => setDate(newValue)}
/>
</Box>
</LocalizationProvider>
);
}
2 changes: 1 addition & 1 deletion docs/src/pages/components/date-picker/date-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: React Date Picker component
components: DatePicker, PickersDay
components: CalendarPicker, CalendarPickerSkeleton, DatePicker, DesktopDatePicker, MobileDatePicker, MonthPicker, PickersDay, StaticDatePicker, YearPicker
githubLabel: 'component: DatePicker'
packageName: '@material-ui/lab'
materialDesign: https://material.io/components/date-pickers
Expand Down
64 changes: 64 additions & 0 deletions docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core';
import Box from '@material-ui/core/Box';
import TextField from '@material-ui/core/TextField';
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
import DateRangePicker from '@material-ui/lab/DateRangePicker';
import DateRangePickerDay from '@material-ui/lab/DateRangePickerDay';
import clsx from 'clsx';

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%',
},
}));

export default function CustomDateRangePickerDay() {
const classes = useStyles();
const [selectedDate, handleDateChange] = React.useState([null, null]);

const renderWeekPickerDay = (date, dateRangePickerDayProps) => {
return (
<DateRangePickerDay
{...dateRangePickerDayProps}
className={clsx(dateRangePickerDayProps.className, {
[classes.firstHighlight]: dateRangePickerDayProps.isStartOfHighlighting,
[classes.endHighlight]: dateRangePickerDayProps.isEndOfHighlighting,
[classes.highlight]: dateRangePickerDayProps.isHighlighting,
})}
/>
);
};

return (
<LocalizaitonProvider dateAdapter={AdapterDateFns}>
<DateRangePicker
label="date range"
value={selectedDate}
onChange={(date) => handleDateChange(date)}
renderDay={renderWeekPickerDay}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} variant="standard" />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} variant="standard" />
</React.Fragment>
)}
/>
</LocalizaitonProvider>
);
}
72 changes: 72 additions & 0 deletions docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core';
Copy link
Member

@oliviertassinari oliviertassinari Apr 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use the styled API instead? (progressively dropping @material-ui/styles)

Suggested change
import { makeStyles } from '@material-ui/core';

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can do this another time. I haven't looked into styled and have more control with makeStyles for now. I'm not looking forward to HOC related type issues with styled.

Copy link
Member

@oliviertassinari oliviertassinari Apr 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was asking because we already know that we will need to handle the migration. We could be more efficient by doing it now (we have more context now). The fewer demos using JSS, the closer to the objective.

If we really want to do it later:

Suggested change
import { makeStyles } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

Copy link
Member Author

@eps1lon eps1lon Apr 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do this in a follow-up. Marking this review for future reference when I'm being told we "move fast".

import Box from '@material-ui/core/Box';
import TextField from '@material-ui/core/TextField';
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
import DateRangePicker, { DateRange } from '@material-ui/lab/DateRangePicker';
import DateRangePickerDay, {
DateRangePickerDayProps,
} from '@material-ui/lab/DateRangePickerDay';
import clsx from 'clsx';

const useStyles = makeStyles((theme) => ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a bug with the transition duration on this customization:

transition bug

https://deploy-preview-25812--material-ui.netlify.app/components/date-range-picker/#customized-day-rendering

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the bug?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The transition duration is different, leading to an uncomfortable visual feedback

Screenshot 2021-04-20 at 01 00 49

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hard to tell whether this is the component or the demo. I'm adding it for now so that we have a reference demo and then we can follow-up when we get to the DateRangePicker.

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%',
},
}));

export default function CustomDateRangePickerDay() {
const classes = useStyles();
const [selectedDate, handleDateChange] = React.useState<DateRange<Date>>([
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about following the naming convention of the other demos?

Suggested change
const [selectedDate, handleDateChange] = React.useState<DateRange<Date>>([
const [value, setValue] = React.useState<DateRange<Date>>([

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I followed a convention.

Copy link
Member

@oliviertassinari oliviertassinari Apr 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With a grep of React.useState<Date | null>, I can count:

  • value x19
  • selectedDate x3
  • date x1

It seems that, so far (if we ignore what Dmitiry was doing), we have used the name of the prop (unless there are multiple states) as name for the state.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do this in a follow-up. Marking this review for future reference when I'm being told we "move fast".

null,
null,
]);

const renderWeekPickerDay = (
date: Date,
dateRangePickerDayProps: DateRangePickerDayProps<Date>,
) => {
return (
<DateRangePickerDay
{...dateRangePickerDayProps}
className={clsx(dateRangePickerDayProps.className, {
[classes.firstHighlight]: dateRangePickerDayProps.isStartOfHighlighting,
[classes.endHighlight]: dateRangePickerDayProps.isEndOfHighlighting,
[classes.highlight]: dateRangePickerDayProps.isHighlighting,
})}
/>
);
};

return (
<LocalizaitonProvider dateAdapter={AdapterDateFns}>
<DateRangePicker
label="date range"
value={selectedDate}
onChange={(date) => handleDateChange(date)}
renderDay={renderWeekPickerDay}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} variant="standard" />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} variant="standard" />
</React.Fragment>
)}
/>
</LocalizaitonProvider>
);
}
Loading