From 0c0eddec397f0fc7458a836867ff05a2018bb2ca Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 29 Dec 2022 11:56:31 +0100 Subject: [PATCH 01/14] [docs] Cleanup the doc pages of the community pickers --- .../date-picker/StaticDatePickerDemo.js | 2 +- .../date-picker/StaticDatePickerDemo.tsx | 2 +- .../StaticDatePickerDemo.tsx.preview | 2 +- .../date-picker/StaticDatePickerLandscape.js | 6 +- .../date-picker/StaticDatePickerLandscape.tsx | 6 +- .../StaticDatePickerLandscape.tsx.preview | 5 +- .../date-pickers/date-picker/date-picker.md | 38 +++++----- .../date-time-picker/CustomDateTimePicker.js | 33 --------- .../date-time-picker/CustomDateTimePicker.tsx | 33 --------- .../CustomDateTimePicker.tsx.preview | 15 ---- .../date-time-picker/DateTimePickerViews.js | 35 ++++++++++ .../date-time-picker/DateTimePickerViews.tsx | 35 ++++++++++ .../StaticDateTimePickerDemo.js | 6 +- .../StaticDateTimePickerDemo.tsx | 6 +- .../StaticDateTimePickerDemo.tsx.preview | 5 +- .../StaticDateTimePickerLandscape.js | 12 ++++ .../StaticDateTimePickerLandscape.tsx | 12 ++++ .../StaticDateTimePickerLandscape.tsx.preview | 1 + .../date-time-picker/date-time-picker.md | 69 +++++++++++++------ docs/data/date-pickers/fields/fields.md | 2 +- .../time-picker/StaticTimePickerDemo.js | 3 +- .../time-picker/StaticTimePickerDemo.tsx | 3 +- .../StaticTimePickerDemo.tsx.preview | 2 +- .../time-picker/StaticTimePickerLandscape.js | 6 +- .../time-picker/StaticTimePickerLandscape.tsx | 6 +- .../StaticTimePickerLandscape.tsx.preview | 5 +- .../date-pickers/time-picker/time-picker.md | 35 +++++----- .../useStaticRangePicker.tsx | 1 + .../hooks/useStaticPicker/useStaticPicker.tsx | 1 + 29 files changed, 199 insertions(+), 188 deletions(-) delete mode 100644 docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js delete mode 100644 docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx delete mode 100644 docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx.preview create mode 100644 docs/data/date-pickers/date-time-picker/DateTimePickerViews.js create mode 100644 docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx create mode 100644 docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.js create mode 100644 docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx create mode 100644 docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx.preview diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js index b2012428c329..979a3e639fbb 100644 --- a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js +++ b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js @@ -6,7 +6,7 @@ import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-da export default function StaticDatePickerDemo() { return ( - + ); } diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx index b2012428c329..979a3e639fbb 100644 --- a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx +++ b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx @@ -6,7 +6,7 @@ import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-da export default function StaticDatePickerDemo() { return ( - + ); } diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview index 67601e84bc1e..0d5053f46a26 100644 --- a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview +++ b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.js b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.js index 9b47b0bac543..d2be5ed8c15d 100644 --- a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.js +++ b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker'; @@ -7,10 +6,7 @@ import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-da export default function StaticDatePickerLandscape() { return ( - + ); } diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx index 9b47b0bac543..d2be5ed8c15d 100644 --- a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx +++ b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker'; @@ -7,10 +6,7 @@ import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-da export default function StaticDatePickerLandscape() { return ( - + ); } diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx.preview b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx.preview index fae826239656..e3c4479fcb5b 100644 --- a/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx.preview +++ b/docs/data/date-pickers/date-picker/StaticDatePickerLandscape.tsx.preview @@ -1,4 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index 421d291ea15d..7254e84f42e5 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -19,21 +19,14 @@ They will be renamed at the end of the v6 beta phase to have the same name as th (`NextDatePicker` will become `DatePicker`, ...) ::: -Date pickers are displayed with: - -- Dialogs on mobile -- Text field dropdowns on desktop - ## Basic usage -The Date Picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop. - {{"demo": "BasicDatePicker.js"}} ## Component composition -The Date Picker components are built using the `DateField` for the keyboard editing and the `DateCalendar` for the view editing. -All the documented props of those two components can also be passed to the Date Picker components. +The Date Picker component is built using the `DateField` for the keyboard editing, and the `DateCalendar` for the view editing. +All the documented props of those two components can also be passed to the Date Picker component. Check-out their documentation page for more information: @@ -42,27 +35,34 @@ Check-out their documentation page for more information: ## Uncontrolled vs. Controlled -The component can be uncontrolled or controlled +The Date Picker component can be uncontrolled or controlled {{"demo": "DatePickerValue.js"}} ## Responsiveness -The Date Picker component is designed and optimized for the device it runs on. +The Date Picker component is available in three variants: -- The `MobileNextDatePicker` component works best for touch devices and small screens. -- The `DesktopNextDatePicker` component works best for mouse devices and large screens. +- The `DesktopNextDatePicker` component which works best for mouse devices and large screens. + It renders the views inside a popover and allows editing values directly inside the field. -By default, the `NextDatePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. -This can be customized with the `desktopModeMediaQuery` prop. +- The `MobileNextDatePicker` component which works best for touch devices and small screens. + It renders the view inside a modal and does not allow editing values directly inside the field. -There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +- The `NextDatePicker` component which will render `DesktopNextDatePicker` or `MobileNextDatePicker` depending on the device it runs on. + + By default, it renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. + This can be customized with the `desktopModeMediaQuery` prop. {{"demo": "ResponsiveDatePickers.js"}} +:::warning +There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +::: + ## Static mode -It is also possible to render the Date Picker without the modal/popover and text field. +It is also possible to render the Date Picker without the popover/modal and field. This can be helpful when building custom popover/modal containers. {{"demo": "StaticDatePickerDemo.js", "bg": true}} @@ -75,7 +75,7 @@ The Date Picker component can be disabled or read-only. ## Views -The component can contain three views: `day`, `month`, and `year`. +The Date Picker component can contain three views: `day`, `month`, and `year`. By default, only the `day` and `year` views are enabled. You can customize the enabled views using the `views` prop. @@ -85,7 +85,7 @@ Views will appear in the order they're included in the `views` array. ## Landscape orientation -By default, the Date Picker automatically sets the orientation based on the `window.orientation` value. +By default, the Date Picker component automatically sets the orientation based on the `window.orientation` value. You can force a specific orientation using the `orientation` prop. diff --git a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js b/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js deleted file mode 100644 index 7b86e4b039dc..000000000000 --- a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; -import AlarmIcon from '@mui/icons-material/Alarm'; -import SnoozeIcon from '@mui/icons-material/Snooze'; -import ClockIcon from '@mui/icons-material/AccessTime'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; - -export default function CustomDateTimePicker() { - return ( - - - - - - - ); -} diff --git a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx b/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx deleted file mode 100644 index 7b86e4b039dc..000000000000 --- a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; -import AlarmIcon from '@mui/icons-material/Alarm'; -import SnoozeIcon from '@mui/icons-material/Snooze'; -import ClockIcon from '@mui/icons-material/AccessTime'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; - -export default function CustomDateTimePicker() { - return ( - - - - - - - ); -} diff --git a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx.preview b/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx.preview deleted file mode 100644 index d0659ae4a0e3..000000000000 --- a/docs/data/date-pickers/date-time-picker/CustomDateTimePicker.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerViews.js b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.js new file mode 100644 index 000000000000..569b4de95da2 --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.js @@ -0,0 +1,35 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; + +export default function DateTimePickerViews() { + return ( + + + + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx new file mode 100644 index 000000000000..569b4de95da2 --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; + +export default function DateTimePickerViews() { + return ( + + + + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js index 08bedc1abe43..84039284bc51 100644 --- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js +++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; @@ -7,10 +6,7 @@ import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@ export default function StaticDateTimePickerDemo() { return ( - + ); } diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx index 08bedc1abe43..84039284bc51 100644 --- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx +++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; @@ -7,10 +6,7 @@ import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@ export default function StaticDateTimePickerDemo() { return ( - + ); } diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview index f84ca2194095..1d31d5d29a2c 100644 --- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview +++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview @@ -1,4 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.js b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.js new file mode 100644 index 000000000000..ebc36c38017a --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.js @@ -0,0 +1,12 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; + +export default function StaticDateTimePickerLandscape() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx new file mode 100644 index 000000000000..ebc36c38017a --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; + +export default function StaticDateTimePickerLandscape() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx.preview b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx.preview new file mode 100644 index 000000000000..28ad1ad1b556 --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerLandscape.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md index 5d42a5a4354e..148746271038 100644 --- a/docs/data/date-pickers/date-time-picker/date-time-picker.md +++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md @@ -12,63 +12,90 @@ materialDesign: https://m2.material.io/components/date-pickers

This component combines the date & time pickers.

:::warning -The new date time pickers are unstable. +The new Date Time Pickers are unstable. They might receive breaking changes on their props to have the best component possible by the time of the stable release. They will be renamed at the end of the v6 beta phase to have the same name as the current legacy pickers (`NextDateTimePicker` will become `DateTimePicker`, ...) ::: -It allows the user to select both date and time with the same control. +## Basic usage -Note that this component is the [NextDatePicker](/x/react-date-pickers/date-picker/) and [NextTimePicker](/x/react-date-pickers/time-picker/) -component combined, so any of these components' props can be passed to the DateTimePicker. +{{"demo": "BasicDateTimePicker.js"}} -## Basic usage +## Component composition -Allows choosing date then time. There are 4 steps available (year, date, hour, and minute), so tabs are required to visually distinguish date/time steps. +The Date Time Picker component is built using the `DateTimeField` for the keyboard editing, the `DateCalendar` for the date view editing, and the `TimeClock` for the time view editing. +All the documented props of those three components can also be passed to the Date Time Picker component. -{{"demo": "BasicDateTimePicker.js"}} +Check-out their documentation page for more information: + +- [Date Field](/x/react-date-pickers/date-field/) +- [Date Calendar](/x/react-date-pickers/date-calendar/) +- [Time Clock](/x/react-date-pickers/time-clock/) ## Uncontrolled vs. Controlled -The component can be uncontrolled or controlled +The Date Time Picker component can be uncontrolled or controlled {{"demo": "DateTimePickerValue.js"}} ## Responsiveness -The `NextDateTimePicker` component is designed and optimized for the device it runs on. +The Date Time Picker component is available in three variants: -- The `MobileNextDateTimePicker` component works best for touch devices and small screens. -- The `DesktopNextDateTimePicker` component works best for mouse devices and large screens. +- The `DesktopNextDateTimePicker` component which works best for mouse devices and large screens. + It renders the views inside a popover and allows editing values directly inside the field. -By default, the `NextDateTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. -This can be customized with the `desktopModeMediaQuery` prop. +- The `MobileNextDateTimePicker` component which works best for touch devices and small screens. + It renders the view inside a modal and does not allow editing values directly inside the field. -There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +- The `NextDateTimePicker` component which will render `DesktopNextDateTimePicker` or `MobileNextDateTimePicker` depending on the device it runs on. + + By default, it renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. + This can be customized with the `desktopModeMediaQuery` prop. {{"demo": "ResponsiveDateTimePickers.js"}} +:::warning +There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +::: + ## Static mode -It is also possible to render any date time picker without the modal/popover and text field. -This will enable building custom popover/modal containers. +It is also possible to render the Date Time Picker without the popover/modal and field. +This can be helpful when building custom popover/modal containers. {{"demo": "StaticDateTimePickerDemo.js", "bg": true}} ## Form props -The date time picker component can be disabled or read-only. +The Date Time Picker component can be disabled or read-only. {{"demo": "FormPropsDateTimePickers.js"}} +## Views + +The Date Time Picker component can contain six views: `day`, `month`, `year`, `hours`, `minutes` and `seconds`. +By default, only the `year`, `day`, `hours`, and `minutes` views are enabled. + +You can customize the enabled views using the `views` prop. +Views will appear in the order they're included in the `views` array. + +{{"demo": "DateTimePickerViews.js"}} + +## Landscape orientation + +By default, the Date Time Picker component automatically sets the orientation based on the `window.orientation` value. + +You can force a specific orientation using the `orientation` prop. + +{{"demo": "StaticDateTimePickerLandscape.js", "bg": true}} + ## Validation You can find the documentation in the [Validation page](/x/react-date-pickers/validation/) -## Customization - -Here are some examples of heavily customized date & time pickers: +## Localization -{{"demo": "CustomDateTimePicker.js"}} +You can find the documentation about localization in the [Date localization](/x/react-date-pickers/adapters-locale/) and [Component localization](/x/react-date-pickers/localization/). diff --git a/docs/data/date-pickers/fields/fields.md b/docs/data/date-pickers/fields/fields.md index dd7307bedcea..33e058e034de 100644 --- a/docs/data/date-pickers/fields/fields.md +++ b/docs/data/date-pickers/fields/fields.md @@ -17,7 +17,7 @@ They might receive breaking changes on their props to have the best components p ## Introduction -The fields are React components that let you enter a date or time with the keyboard, without using any modal or dropdown UI. +The fields are React components that let you enter a date or time with the keyboard, without using any popover or modal UI. They provide refined navigation through arrow keys and support advanced behaviors like localization and validation. :::warning diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js index a0f58f08ff0b..b50a45c9d364 100644 --- a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js +++ b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker'; @@ -7,7 +6,7 @@ import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-da export default function StaticTimePickerDemo() { return ( - + ); } diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx index a0f58f08ff0b..b50a45c9d364 100644 --- a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx +++ b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker'; @@ -7,7 +6,7 @@ import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-da export default function StaticTimePickerDemo() { return ( - + ); } diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview index 1bc3fe1245b6..71a477e9254c 100644 --- a/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview +++ b/docs/data/date-pickers/time-picker/StaticTimePickerDemo.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js index b8fc1a86fd84..dde2e63473ab 100644 --- a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js +++ b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker'; @@ -7,10 +6,7 @@ import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-da export default function StaticTimePickerLandscape() { return ( - + ); } diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx index b8fc1a86fd84..dde2e63473ab 100644 --- a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx +++ b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker'; @@ -7,10 +6,7 @@ import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-da export default function StaticTimePickerLandscape() { return ( - + ); } diff --git a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview index c989921eb479..8d196684213d 100644 --- a/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview +++ b/docs/data/date-pickers/time-picker/StaticTimePickerLandscape.tsx.preview @@ -1,4 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md index 77b35990072d..9997dcb8dd55 100644 --- a/docs/data/date-pickers/time-picker/time-picker.md +++ b/docs/data/date-pickers/time-picker/time-picker.md @@ -19,18 +19,14 @@ They will be renamed at the end of the v6 beta phase to have the same name as th (`NextTimePicker` will become `TimePicker`, ...) ::: -The selected time is indicated by the filled circle at the end of the clock hand. - ## Basic usage -The Time Picker is rendered as a modal dialog on mobile, and in the field on desktop. - {{"demo": "BasicTimePicker.js"}} ## Component composition -The Time Picker components are built using the `TimeField` for the keyboard editing and the `TimeClock` for the view editing. -All the documented props of those two components can also be passed to the Time Picker components. +The Time Picker component is built using the `TimeField` for the keyboard editing, and the `TimeClock` for the view editing. +All the documented props of those two components can also be passed to the Time Picker component. Check-out their documentation page for more information: @@ -39,27 +35,34 @@ Check-out their documentation page for more information: ## Uncontrolled vs. Controlled -The component can be uncontrolled or controlled +The Time Picker component can be uncontrolled or controlled {{"demo": "TimePickerValue.js"}} ## Responsiveness -The Time picker Component is designed and optimized for the device it runs on. +The Time Picker component is available in three variants: -- The `MobileNextTimePicker` component works best for touch devices and small screens. -- The `DesktopNextTimePicker` component works best for mouse devices and large screens. +- The `DesktopNextTimePicker` component which works best for mouse devices and large screens. + It renders the views inside a popover and allows editing values directly inside the field. -By default, the `NextTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. -This can be customized with the `desktopModeMediaQuery` prop. +- The `MobileNextTimePicker` component which works best for touch devices and small screens. + It renders the view inside a modal and does not allow editing values directly inside the field. -There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +- The `NextTimePicker` component which will render `DesktopNextTimePicker` or `MobileNextTimePicker` depending on the device it runs on. + + By default, it renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. + This can be customized with the `desktopModeMediaQuery` prop. {{"demo": "ResponsiveTimePickers.js"}} +:::warning +There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +::: + ## Static mode -It is also possible to render any Time Picker without the modal/popover and text field. +It is also possible to render any Time Picker without the popover/modal and field. This will enable building custom popover/modal containers. {{"demo": "StaticTimePickerDemo.js", "bg": true}} @@ -72,7 +75,7 @@ The Time Picker component can be disabled or read-only. ## Views -The component can contain three views: `hours`, `minutes`, and `seconds`. +The Time Picker component can contain three views: `hours`, `minutes`, and `seconds`. By default, only the `hours` and `minutes` views are enabled. You can customize the enabled views using the `views` prop. @@ -82,7 +85,7 @@ Views will appear in the order they're included in the `views` array. ## Landscape orientation -By default, the Time Picker automatically sets the orientation based on the `window.orientation` value. +By default, the Time Picker component automatically sets the orientation based on the `window.orientation` value. You can force a specific orientation using the `orientation` prop. diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx index 909f795392e8..1aa8b6311745 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx @@ -19,6 +19,7 @@ import { import { DateRange, RangePosition } from '../../models/range'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ + position: 'relative', overflow: 'hidden', minWidth: DIALOG_WIDTH, backgroundColor: (theme.vars || theme).palette.background.paper, diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx index 206d74afdd2a..0c809b564d89 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -9,6 +9,7 @@ import { PickersLayout } from '../../../PickersLayout'; import { DIALOG_WIDTH } from '../../constants/dimensions'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ + position: 'relative', overflow: 'hidden', minWidth: DIALOG_WIDTH, backgroundColor: (theme.vars || theme).palette.background.paper, From f67883d689cda551511eb7780bc15c7aa7181978 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 2 Jan 2023 08:53:54 +0100 Subject: [PATCH 02/14] Code review: Lukas --- docs/data/date-pickers/date-picker/date-picker.md | 12 ++++++------ .../date-time-picker/date-time-picker.md | 14 +++++++------- docs/data/date-pickers/time-picker/time-picker.md | 14 +++++++------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index 7254e84f42e5..fe2d15571465 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -25,7 +25,7 @@ They will be renamed at the end of the v6 beta phase to have the same name as th ## Component composition -The Date Picker component is built using the `DateField` for the keyboard editing, and the `DateCalendar` for the view editing. +The component is built using the `DateField` for the keyboard editing and the `DateCalendar` for the view editing. All the documented props of those two components can also be passed to the Date Picker component. Check-out their documentation page for more information: @@ -35,13 +35,13 @@ Check-out their documentation page for more information: ## Uncontrolled vs. Controlled -The Date Picker component can be uncontrolled or controlled +The component can be uncontrolled or controlled {{"demo": "DatePickerValue.js"}} ## Responsiveness -The Date Picker component is available in three variants: +The component is available in three variants: - The `DesktopNextDatePicker` component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field. @@ -62,20 +62,20 @@ There are certain caveats when testing pickers, please refer to [this section](/ ## Static mode -It is also possible to render the Date Picker without the popover/modal and field. +It is also possible to render the Date Picker component without the popover/modal and field. This can be helpful when building custom popover/modal containers. {{"demo": "StaticDatePickerDemo.js", "bg": true}} ## Form props -The Date Picker component can be disabled or read-only. +The component can be disabled or read-only. {{"demo": "FormPropsDatePickers.js"}} ## Views -The Date Picker component can contain three views: `day`, `month`, and `year`. +The component can contain three views: `day`, `month`, and `year`. By default, only the `day` and `year` views are enabled. You can customize the enabled views using the `views` prop. diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md index 148746271038..d49fbb4bf33c 100644 --- a/docs/data/date-pickers/date-time-picker/date-time-picker.md +++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md @@ -9,7 +9,7 @@ materialDesign: https://m2.material.io/components/date-pickers # Date Time Picker -

This component combines the date & time pickers.

+

The Date Time Picker component let the user select a date and time.

:::warning The new Date Time Pickers are unstable. @@ -25,7 +25,7 @@ They will be renamed at the end of the v6 beta phase to have the same name as th ## Component composition -The Date Time Picker component is built using the `DateTimeField` for the keyboard editing, the `DateCalendar` for the date view editing, and the `TimeClock` for the time view editing. +The component is built using the `DateTimeField` for the keyboard editing, the `DateCalendar` for the date view editing and the `TimeClock` for the time view editing. All the documented props of those three components can also be passed to the Date Time Picker component. Check-out their documentation page for more information: @@ -36,13 +36,13 @@ Check-out their documentation page for more information: ## Uncontrolled vs. Controlled -The Date Time Picker component can be uncontrolled or controlled +The component can be uncontrolled or controlled {{"demo": "DateTimePickerValue.js"}} ## Responsiveness -The Date Time Picker component is available in three variants: +The component is available in three variants: - The `DesktopNextDateTimePicker` component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field. @@ -63,20 +63,20 @@ There are certain caveats when testing pickers, please refer to [this section](/ ## Static mode -It is also possible to render the Date Time Picker without the popover/modal and field. +It is also possible to render the Date Time Picker component without the popover/modal and field. This can be helpful when building custom popover/modal containers. {{"demo": "StaticDateTimePickerDemo.js", "bg": true}} ## Form props -The Date Time Picker component can be disabled or read-only. +The component can be disabled or read-only. {{"demo": "FormPropsDateTimePickers.js"}} ## Views -The Date Time Picker component can contain six views: `day`, `month`, `year`, `hours`, `minutes` and `seconds`. +The component can contain six views: `day`, `month`, `year`, `hours`, `minutes` and `seconds`. By default, only the `year`, `day`, `hours`, and `minutes` views are enabled. You can customize the enabled views using the `views` prop. diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md index 9997dcb8dd55..337732e3d579 100644 --- a/docs/data/date-pickers/time-picker/time-picker.md +++ b/docs/data/date-pickers/time-picker/time-picker.md @@ -9,7 +9,7 @@ materialDesign: https://m2.material.io/components/time-pickers # Time Picker -

Time Picker let the user select a time.

+

The Time Picker component let the user select a time.

:::warning The new Time Pickers are unstable. @@ -25,7 +25,7 @@ They will be renamed at the end of the v6 beta phase to have the same name as th ## Component composition -The Time Picker component is built using the `TimeField` for the keyboard editing, and the `TimeClock` for the view editing. +The component is built using the `TimeField` for the keyboard editing and the `TimeClock` for the view editing. All the documented props of those two components can also be passed to the Time Picker component. Check-out their documentation page for more information: @@ -35,13 +35,13 @@ Check-out their documentation page for more information: ## Uncontrolled vs. Controlled -The Time Picker component can be uncontrolled or controlled +The component can be uncontrolled or controlled {{"demo": "TimePickerValue.js"}} ## Responsiveness -The Time Picker component is available in three variants: +The component is available in three variants: - The `DesktopNextTimePicker` component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field. @@ -62,20 +62,20 @@ There are certain caveats when testing pickers, please refer to [this section](/ ## Static mode -It is also possible to render any Time Picker without the popover/modal and field. +It is also possible to render the Time Picker component without the popover/modal and field. This will enable building custom popover/modal containers. {{"demo": "StaticTimePickerDemo.js", "bg": true}} ## Form props -The Time Picker component can be disabled or read-only. +The component can be disabled or read-only. {{"demo": "FormPropsTimePickers.js"}} ## Views -The Time Picker component can contain three views: `hours`, `minutes`, and `seconds`. +The component can contain three views: `hours`, `minutes`, and `seconds`. By default, only the `hours` and `minutes` views are enabled. You can customize the enabled views using the `views` prop. From 2c062367bcbc8f8010f70c0673c134a8529ffb12 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 2 Jan 2023 09:03:50 +0100 Subject: [PATCH 03/14] Code review: Lukas --- .../date-picker/ResponsiveDatePickers.js | 24 +++++++++++-------- .../date-picker/ResponsiveDatePickers.tsx | 24 +++++++++++-------- .../ResponsiveDatePickers.tsx.preview | 21 +++++++++------- .../date-picker/StaticDatePickerDemo.js | 12 ---------- .../date-picker/StaticDatePickerDemo.tsx | 12 ---------- .../StaticDatePickerDemo.tsx.preview | 1 - .../date-pickers/date-picker/date-picker.md | 13 ++++------ .../ResponsiveDateTimePickers.js | 8 +++---- .../ResponsiveDateTimePickers.tsx | 8 +++---- .../ResponsiveDateTimePickers.tsx.preview | 8 +++---- .../time-picker/ResponsiveTimePickers.js | 8 +++---- .../time-picker/ResponsiveTimePickers.tsx | 8 +++---- .../ResponsiveTimePickers.tsx.preview | 8 +++---- 13 files changed, 68 insertions(+), 87 deletions(-) delete mode 100644 docs/data/date-pickers/date-picker/StaticDatePickerDemo.js delete mode 100644 docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx delete mode 100644 docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview diff --git a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.js b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.js index 14508f1e7eea..0d0778c0ac8c 100644 --- a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.js +++ b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.js @@ -1,25 +1,29 @@ import * as React from 'react'; import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker'; import { Unstable_MobileNextDatePicker as MobileNextDatePicker } from '@mui/x-date-pickers/MobileNextDatePicker'; import { Unstable_DesktopNextDatePicker as DesktopNextDatePicker } from '@mui/x-date-pickers/DesktopNextDatePicker'; +import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers'; export default function ResponsiveDatePickers() { return ( - - - + + + + + + + + + + + + ); diff --git a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx index 14508f1e7eea..0d0778c0ac8c 100644 --- a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx +++ b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx @@ -1,25 +1,29 @@ import * as React from 'react'; import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker'; import { Unstable_MobileNextDatePicker as MobileNextDatePicker } from '@mui/x-date-pickers/MobileNextDatePicker'; import { Unstable_DesktopNextDatePicker as DesktopNextDatePicker } from '@mui/x-date-pickers/DesktopNextDatePicker'; +import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers'; export default function ResponsiveDatePickers() { return ( - - - + + + + + + + + + + + + ); diff --git a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx.preview b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx.preview index 1db46db9e9b7..4171c055ea13 100644 --- a/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx.preview +++ b/docs/data/date-pickers/date-picker/ResponsiveDatePickers.tsx.preview @@ -1,9 +1,12 @@ - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js deleted file mode 100644 index 979a3e639fbb..000000000000 --- a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.js +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker'; - -export default function StaticDatePickerDemo() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx deleted file mode 100644 index 979a3e639fbb..000000000000 --- a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker'; - -export default function StaticDatePickerDemo() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview b/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview deleted file mode 100644 index 0d5053f46a26..000000000000 --- a/docs/data/date-pickers/date-picker/StaticDatePickerDemo.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index fe2d15571465..71de02e19c6c 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -41,7 +41,7 @@ The component can be uncontrolled or controlled ## Responsiveness -The component is available in three variants: +The component is available in four variants: - The `DesktopNextDatePicker` component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field. @@ -49,24 +49,19 @@ The component is available in three variants: - The `MobileNextDatePicker` component which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field. -- The `NextDatePicker` component which will render `DesktopNextDatePicker` or `MobileNextDatePicker` depending on the device it runs on. +- The `NextDatePicker` component which renders `DesktopNextDatePicker` or `MobileNextDatePicker` depending on the device it runs on. By default, it renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. This can be customized with the `desktopModeMediaQuery` prop. +- The `StaticDatePicker` component which renders without the popover/modal and field. + {{"demo": "ResponsiveDatePickers.js"}} :::warning There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. ::: -## Static mode - -It is also possible to render the Date Picker component without the popover/modal and field. -This can be helpful when building custom popover/modal containers. - -{{"demo": "StaticDatePickerDemo.js", "bg": true}} - ## Form props The component can be disabled or read-only. diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js index 165ef48bde85..b51b3d6af6a3 100644 --- a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js +++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js @@ -11,14 +11,14 @@ export default function ResponsiveDateTimePickers() { return ( - + - + + - + - + + Date: Tue, 3 Jan 2023 10:48:44 +0100 Subject: [PATCH 04/14] Code review: Lukas --- .../date-calendar/DateCalendarViews.js | 12 ++----- .../date-calendar/DateCalendarViews.tsx | 12 ++----- .../DateCalendarViews.tsx.preview | 12 ++----- .../date-calendar/date-calendar.md | 2 +- .../date-pickers/date-field/date-field.md | 2 +- .../date-picker/DatePickerOpenTo.js | 20 +++++++++++ .../date-picker/DatePickerOpenTo.tsx | 20 +++++++++++ .../date-picker/DatePickerOpenTo.tsx.preview | 6 ++++ .../date-picker/DatePickerViews.js | 14 ++------ .../date-picker/DatePickerViews.tsx | 14 ++------ .../date-picker/DatePickerViews.tsx.preview | 13 ++----- .../date-pickers/date-picker/date-picker.md | 34 ++++++++++++------- .../date-range-field/date-range-field.md | 2 +- .../date-time-field/date-time-field.md | 2 +- .../date-time-picker/DateTimePickerViews.js | 8 +---- .../date-time-picker/DateTimePickerViews.tsx | 8 +---- .../DateTimePickerViews.tsx.preview | 15 ++++++++ .../date-time-range-field.md | 2 +- .../date-pickers/time-clock/TimeClockViews.js | 13 ++----- .../time-clock/TimeClockViews.tsx | 13 ++----- .../time-clock/TimeClockViews.tsx.preview | 12 ++----- .../date-pickers/time-clock/time-clock.md | 2 +- .../date-pickers/time-field/time-field.md | 2 +- .../time-picker/TimePickerViews.js | 9 +---- .../time-picker/TimePickerViews.tsx | 9 +---- .../time-picker/TimePickerViews.tsx.preview | 8 +---- .../time-range-field/time-range-field.md | 2 +- 27 files changed, 120 insertions(+), 148 deletions(-) create mode 100644 docs/data/date-pickers/date-picker/DatePickerOpenTo.js create mode 100644 docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx create mode 100644 docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx.preview create mode 100644 docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx.preview diff --git a/docs/data/date-pickers/date-calendar/DateCalendarViews.js b/docs/data/date-pickers/date-calendar/DateCalendarViews.js index d18647b482fc..3f4f7a6a5660 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarViews.js +++ b/docs/data/date-pickers/date-calendar/DateCalendarViews.js @@ -10,19 +10,13 @@ export default function DateCalendarViews() { - + - + - + diff --git a/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx b/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx index d18647b482fc..3f4f7a6a5660 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx +++ b/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx @@ -10,19 +10,13 @@ export default function DateCalendarViews() { - + - + - + diff --git a/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx.preview b/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx.preview index b69f73d192c5..46d2793a9730 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx.preview +++ b/docs/data/date-pickers/date-calendar/DateCalendarViews.tsx.preview @@ -1,15 +1,9 @@ - + - + - + \ No newline at end of file diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md index 33f4d7132215..98db7b24f85f 100644 --- a/docs/data/date-pickers/date-calendar/date-calendar.md +++ b/docs/data/date-pickers/date-calendar/date-calendar.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers' # Date Calendar -

The Date Calendar lets the user select a date without any input or popper / modal.

+

The Date Calendar component lets the user select a date without any input or popper / modal.

## Basic usage diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md index 0bff43c43266..17386bc2e264 100644 --- a/docs/data/date-pickers/date-field/date-field.md +++ b/docs/data/date-pickers/date-field/date-field.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers' # Date Field -

The Date Field let the user select a date with the keyboard.

+

The Date Field component let the user select a date with the keyboard.

:::warning This component is unstable. diff --git a/docs/data/date-pickers/date-picker/DatePickerOpenTo.js b/docs/data/date-pickers/date-picker/DatePickerOpenTo.js new file mode 100644 index 000000000000..c43bd609c034 --- /dev/null +++ b/docs/data/date-pickers/date-picker/DatePickerOpenTo.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker'; + +export default function DatePickerOpenTo() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx b/docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx new file mode 100644 index 000000000000..c43bd609c034 --- /dev/null +++ b/docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_NextDatePicker as NextDatePicker } from '@mui/x-date-pickers/NextDatePicker'; + +export default function DatePickerOpenTo() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx.preview b/docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx.preview new file mode 100644 index 000000000000..4524d3ccce2d --- /dev/null +++ b/docs/data/date-pickers/date-picker/DatePickerOpenTo.tsx.preview @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/DatePickerViews.js b/docs/data/date-pickers/date-picker/DatePickerViews.js index 9fa58cfc4e62..a8783da8b099 100644 --- a/docs/data/date-pickers/date-picker/DatePickerViews.js +++ b/docs/data/date-pickers/date-picker/DatePickerViews.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -11,19 +10,10 @@ export default function DatePickerViews() { - - + + ); diff --git a/docs/data/date-pickers/date-picker/DatePickerViews.tsx b/docs/data/date-pickers/date-picker/DatePickerViews.tsx index 9fa58cfc4e62..a8783da8b099 100644 --- a/docs/data/date-pickers/date-picker/DatePickerViews.tsx +++ b/docs/data/date-pickers/date-picker/DatePickerViews.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -11,19 +10,10 @@ export default function DatePickerViews() { - - + + ); diff --git a/docs/data/date-pickers/date-picker/DatePickerViews.tsx.preview b/docs/data/date-pickers/date-picker/DatePickerViews.tsx.preview index 5a58ff0dc4e5..d40b59f8e108 100644 --- a/docs/data/date-pickers/date-picker/DatePickerViews.tsx.preview +++ b/docs/data/date-pickers/date-picker/DatePickerViews.tsx.preview @@ -1,15 +1,6 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index 71de02e19c6c..094aad96eccd 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -9,7 +9,7 @@ materialDesign: https://m2.material.io/components/date-pickers # Date Picker -

The Date Picker let the user select a date.

+

The Date Picker component let the user select a date.

:::warning The new Date Pickers are unstable. @@ -51,15 +51,16 @@ The component is available in four variants: - The `NextDatePicker` component which renders `DesktopNextDatePicker` or `MobileNextDatePicker` depending on the device it runs on. - By default, it renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. - This can be customized with the `desktopModeMediaQuery` prop. - - The `StaticDatePicker` component which renders without the popover/modal and field. {{"demo": "ResponsiveDatePickers.js"}} +By default, the `NextDatePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. +This can be customized with the `desktopModeMediaQuery` prop. + :::warning -There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +Responsive components can suffer some inconsistencies between testing environments if media query is not supported. +Please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for solutions. ::: ## Form props @@ -70,25 +71,34 @@ The component can be disabled or read-only. ## Views -The component can contain three views: `day`, `month`, and `year`. -By default, only the `day` and `year` views are enabled. +The component supports three views: `day`, `month`, and `year`. -You can customize the enabled views using the `views` prop. -Views will appear in the order they're included in the `views` array. +By default, the `day` and `year` views are enabled. +Use the `views` prop to change this behavior: {{"demo": "DatePickerViews.js"}} +By default, the component renders the `day` view on mount. +Use the `openTo` prop to change this behavior: + +{{"demo": "DatePickerOpenTo.js"}} + +:::info +The views will appear in the order defined by the `views` array. +If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow +(e.g. view the default behaviors, the `year` is only accessible when clicking on the toolbar). +::: + ## Landscape orientation By default, the Date Picker component automatically sets the orientation based on the `window.orientation` value. - -You can force a specific orientation using the `orientation` prop. +You can force a specific orientation using the `orientation` prop: {{"demo": "StaticDatePickerLandscape.js", "bg": true}} ## Helper text -You can show a helper text with the date format accepted. +You can show a helper text with the date format accepted: {{"demo": "HelperText.js"}} diff --git a/docs/data/date-pickers/date-range-field/date-range-field.md b/docs/data/date-pickers/date-range-field/date-range-field.md index ba60ff02d2ae..00e21ab6f10e 100644 --- a/docs/data/date-pickers/date-range-field/date-range-field.md +++ b/docs/data/date-pickers/date-range-field/date-range-field.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers-pro' # Date Range Field [](https://mui.com/store/items/mui-x-pro/) -

The Date Range Field let the user select a date range with the keyboard.

+

The Date Range Field components let the user select a date range with the keyboard.

:::warning This component is unstable. diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md index f9c0e6b2134d..5ed9af6693b2 100644 --- a/docs/data/date-pickers/date-time-field/date-time-field.md +++ b/docs/data/date-pickers/date-time-field/date-time-field.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers' # Date Time Field -

The Date Time Field lets the user select a date and a time with the keyboard.

+

The Date Time Field component lets the user select a date and a time with the keyboard.

:::warning This component is unstable. diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerViews.js b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.js index 569b4de95da2..b991e2af35a5 100644 --- a/docs/data/date-pickers/date-time-picker/DateTimePickerViews.js +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -13,19 +12,14 @@ export default function DateTimePickerViews() { label={'"year"", "month", "day", "hours", "minutes" and "seconds"'} > - + diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx index 569b4de95da2..b991e2af35a5 100644 --- a/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -13,19 +12,14 @@ export default function DateTimePickerViews() { label={'"year"", "month", "day", "hours", "minutes" and "seconds"'} > - + diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx.preview b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx.preview new file mode 100644 index 000000000000..64a93f9d7301 --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerViews.tsx.preview @@ -0,0 +1,15 @@ + + + + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md index 96ab01f3ec73..414f68f2ff9f 100644 --- a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md +++ b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers-pro' # Date Time Range Field [](https://mui.com/store/items/mui-x-pro/) -

The Date Time Range Field let the user select a date and time range with the keyboard.

+

The Date Time Range Field component let the user select a date and time range with the keyboard.

:::warning This component is unstable. diff --git a/docs/data/date-pickers/time-clock/TimeClockViews.js b/docs/data/date-pickers/time-clock/TimeClockViews.js index fc6661ed78e1..a0bc63ccf932 100644 --- a/docs/data/date-pickers/time-clock/TimeClockViews.js +++ b/docs/data/date-pickers/time-clock/TimeClockViews.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -10,19 +9,13 @@ export default function TimeClockViews() { - + - + - + diff --git a/docs/data/date-pickers/time-clock/TimeClockViews.tsx b/docs/data/date-pickers/time-clock/TimeClockViews.tsx index fc6661ed78e1..a0bc63ccf932 100644 --- a/docs/data/date-pickers/time-clock/TimeClockViews.tsx +++ b/docs/data/date-pickers/time-clock/TimeClockViews.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -10,19 +9,13 @@ export default function TimeClockViews() { - + - + - + diff --git a/docs/data/date-pickers/time-clock/TimeClockViews.tsx.preview b/docs/data/date-pickers/time-clock/TimeClockViews.tsx.preview index e3e6c82a3297..1e616e6a3bfb 100644 --- a/docs/data/date-pickers/time-clock/TimeClockViews.tsx.preview +++ b/docs/data/date-pickers/time-clock/TimeClockViews.tsx.preview @@ -1,15 +1,9 @@ - + - + - + \ No newline at end of file diff --git a/docs/data/date-pickers/time-clock/time-clock.md b/docs/data/date-pickers/time-clock/time-clock.md index 4de17e84a6f8..a2100afecfcb 100644 --- a/docs/data/date-pickers/time-clock/time-clock.md +++ b/docs/data/date-pickers/time-clock/time-clock.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers' # Time Clock -

The Time Clock lets the user select a time without any input or popper / modal.

+

The Time Clock component lets the user select a time without any input or popper / modal.

## Basic usage diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md index d14e85342049..c83080af3301 100644 --- a/docs/data/date-pickers/time-field/time-field.md +++ b/docs/data/date-pickers/time-field/time-field.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers' # Time Field -

The Time Field lets the user select a time with the keyboard.

+

The Time Field component lets the user select a time with the keyboard.

:::warning This component is unstable. diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.js b/docs/data/date-pickers/time-picker/TimePickerViews.js index 3774e19b59d8..6c261d57d3cb 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.js +++ b/docs/data/date-pickers/time-picker/TimePickerViews.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -11,17 +10,11 @@ export default function TimePickerViews() { - + diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.tsx b/docs/data/date-pickers/time-picker/TimePickerViews.tsx index 3774e19b59d8..6c261d57d3cb 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.tsx +++ b/docs/data/date-pickers/time-picker/TimePickerViews.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -11,17 +10,11 @@ export default function TimePickerViews() { - + diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview b/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview index e4465e808504..a86ec4e15e84 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview +++ b/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview @@ -1,15 +1,9 @@ - + \ No newline at end of file diff --git a/docs/data/date-pickers/time-range-field/time-range-field.md b/docs/data/date-pickers/time-range-field/time-range-field.md index ab193781a427..5e099a94e6fc 100644 --- a/docs/data/date-pickers/time-range-field/time-range-field.md +++ b/docs/data/date-pickers/time-range-field/time-range-field.md @@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers-pro' # Time Range Field [](https://mui.com/store/items/mui-x-pro/) -

The Time Range Field let the user select a time range with the keyboard.

+

The Time Range Field component let the user select a time range with the keyboard.

:::warning This component is unstable. From a714451fb0860cdbf2a33b2764cdf20155c5d5de Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 3 Jan 2023 14:39:24 +0100 Subject: [PATCH 05/14] Work --- .../date-pickers/date-picker/date-picker.md | 8 ++-- .../date-time-picker/DateTimePickerOpenTo.js | 16 ++++++++ .../date-time-picker/DateTimePickerOpenTo.tsx | 19 +++++++++ .../DateTimePickerOpenTo.tsx.preview | 5 +++ .../ResponsiveDateTimePickers.js | 27 ++++++------- .../ResponsiveDateTimePickers.tsx | 27 ++++++------- .../ResponsiveDateTimePickers.tsx.preview | 24 ++++++------ .../StaticDateTimePickerDemo.js | 12 ------ .../StaticDateTimePickerDemo.tsx | 12 ------ .../StaticDateTimePickerDemo.tsx.preview | 1 - .../date-time-picker/date-time-picker.md | 39 +++++++++++-------- 11 files changed, 106 insertions(+), 84 deletions(-) create mode 100644 docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js create mode 100644 docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx create mode 100644 docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview delete mode 100644 docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js delete mode 100644 docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx delete mode 100644 docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index 28ac012b2195..8783c40b7763 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -39,7 +39,7 @@ The component can be uncontrolled or controlled {{"demo": "DatePickerValue.js"}} -## Responsiveness +## Available components The component is available in four variants: @@ -76,14 +76,14 @@ The component supports three views: `day`, `month`, and `year`. By default, the `day` and `year` views are enabled. Use the `views` prop to change this behavior: -{{"demo": "DatePickerViews.js"}} +{{"demo": "DateTimePickerViews.js"}} By default, the component renders the `day` view on mount. Use the `openTo` prop to change this behavior: -{{"demo": "DatePickerOpenTo.js"}} +{{"demo": "DateTimePickerOpenTo.js"}} -:::info +:::success The views will appear in the order defined by the `views` array. If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow (e.g. view the default behaviors, the `year` is only accessible when clicking on the toolbar). diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js new file mode 100644 index 000000000000..7e80bc6bce5b --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; + +export default function DateTimePickerOpenTo() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx new file mode 100644 index 000000000000..82003a119e4c --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; + +export default function DateTimePickerOpenTo() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview new file mode 100644 index 000000000000..22d14a0c02d3 --- /dev/null +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js index b51b3d6af6a3..aba9455c20f2 100644 --- a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js +++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.js @@ -1,28 +1,29 @@ import * as React from 'react'; import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; import { Unstable_MobileNextDateTimePicker as MobileNextDateTimePicker } from '@mui/x-date-pickers/MobileNextDateTimePicker'; import { Unstable_DesktopNextDateTimePicker as DesktopNextDateTimePicker } from '@mui/x-date-pickers/DesktopNextDateTimePicker'; +import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; export default function ResponsiveDateTimePickers() { return ( - - - + + + + + + + + + + + + ); diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx index b51b3d6af6a3..8d3801a6019c 100644 --- a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx +++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx @@ -1,28 +1,29 @@ import * as React from 'react'; import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import {DemoContainer, DemoItem} from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; import { Unstable_MobileNextDateTimePicker as MobileNextDateTimePicker } from '@mui/x-date-pickers/MobileNextDateTimePicker'; import { Unstable_DesktopNextDateTimePicker as DesktopNextDateTimePicker } from '@mui/x-date-pickers/DesktopNextDateTimePicker'; +import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker' export default function ResponsiveDateTimePickers() { return ( - - - + + + + + + + + + + + + ); diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx.preview b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx.preview index 1c593d39c78c..7398dd08b04f 100644 --- a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx.preview +++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx.preview @@ -1,12 +1,12 @@ - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js deleted file mode 100644 index 84039284bc51..000000000000 --- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.js +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; - -export default function StaticDateTimePickerDemo() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx deleted file mode 100644 index 84039284bc51..000000000000 --- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; - -export default function StaticDateTimePickerDemo() { - return ( - - - - ); -} diff --git a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview b/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview deleted file mode 100644 index 1d31d5d29a2c..000000000000 --- a/docs/data/date-pickers/date-time-picker/StaticDateTimePickerDemo.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md index d49fbb4bf33c..8030feac383d 100644 --- a/docs/data/date-pickers/date-time-picker/date-time-picker.md +++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md @@ -40,9 +40,9 @@ The component can be uncontrolled or controlled {{"demo": "DateTimePickerValue.js"}} -## Responsiveness +## Available components -The component is available in three variants: +The component is available in four variants: - The `DesktopNextDateTimePicker` component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field. @@ -50,24 +50,20 @@ The component is available in three variants: - The `MobileNextDateTimePicker` component which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field. -- The `NextDateTimePicker` component which will render `DesktopNextDateTimePicker` or `MobileNextDateTimePicker` depending on the device it runs on. +- The `NextDateTimePicker` component which renders `DesktopNextDateTimePicker` or `MobileNextDateTimePicker` depending on the device it runs on. - By default, it renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. - This can be customized with the `desktopModeMediaQuery` prop. +- The `StaticDateTimePicker` component which renders without the popover/modal and field. {{"demo": "ResponsiveDateTimePickers.js"}} +By default, the `NextDateTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. +This can be customized with the `desktopModeMediaQuery` prop. + :::warning -There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +Responsive components can suffer some inconsistencies between testing environments if media query is not supported. +Please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for solutions. ::: -## Static mode - -It is also possible to render the Date Time Picker component without the popover/modal and field. -This can be helpful when building custom popover/modal containers. - -{{"demo": "StaticDateTimePickerDemo.js", "bg": true}} - ## Form props The component can be disabled or read-only. @@ -76,14 +72,23 @@ The component can be disabled or read-only. ## Views -The component can contain six views: `day`, `month`, `year`, `hours`, `minutes` and `seconds`. -By default, only the `year`, `day`, `hours`, and `minutes` views are enabled. +The component supports six views: `day`, `month`, `year`, `hours`, `minutes` and `seconds`. -You can customize the enabled views using the `views` prop. -Views will appear in the order they're included in the `views` array. +By default, the `year`, `day`, `hours`, and `minutes` views are enabled. +Use the `views` prop to change this behavior: {{"demo": "DateTimePickerViews.js"}} +By default, the component renders the `day` view on mount. +Use the `openTo` prop to change this behavior: + +:::success +The views will appear in the order defined by the `views` array. +If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow +(e.g. view the default behaviors, the `year` is only accessible when clicking on the toolbar). +::: + + ## Landscape orientation By default, the Date Time Picker component automatically sets the orientation based on the `window.orientation` value. From 756375fafd9abcc47580055fd1b06dcd57da47ef Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 3 Jan 2023 15:02:07 +0100 Subject: [PATCH 06/14] Code review: Lukas --- .../date-time-picker/DateTimePickerOpenTo.js | 6 ++-- .../date-time-picker/DateTimePickerOpenTo.tsx | 9 ++---- .../DateTimePickerOpenTo.tsx.preview | 7 ++-- .../ResponsiveDateTimePickers.tsx | 4 +-- .../date-time-picker/date-time-picker.md | 3 +- .../time-picker/TimePickerOpenTo.js | 20 ++++++++++++ .../time-picker/TimePickerOpenTo.tsx | 20 ++++++++++++ .../time-picker/TimePickerOpenTo.tsx.preview | 6 ++++ .../date-pickers/time-picker/time-picker.md | 32 +++++++++++++------ 9 files changed, 80 insertions(+), 27 deletions(-) create mode 100644 docs/data/date-pickers/time-picker/TimePickerOpenTo.js create mode 100644 docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx create mode 100644 docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js index 7e80bc6bce5b..1e022739c250 100644 --- a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.js @@ -2,14 +2,14 @@ import * as React from 'react'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; +import { Unstable_MobileNextDateTimePicker as MobileNextDateTimePicker } from '@mui/x-date-pickers/MobileNextDateTimePicker'; export default function DateTimePickerOpenTo() { return ( - - + + ); diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx index 82003a119e4c..1e022739c250 100644 --- a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx @@ -2,17 +2,14 @@ import * as React from 'react'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; +import { Unstable_MobileNextDateTimePicker as MobileNextDateTimePicker } from '@mui/x-date-pickers/MobileNextDateTimePicker'; export default function DateTimePickerOpenTo() { return ( - - + + ); diff --git a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview index 22d14a0c02d3..91bab1c28a62 100644 --- a/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview +++ b/docs/data/date-pickers/date-time-picker/DateTimePickerOpenTo.tsx.preview @@ -1,5 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx index 8d3801a6019c..aba9455c20f2 100644 --- a/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx +++ b/docs/data/date-pickers/date-time-picker/ResponsiveDateTimePickers.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import dayjs from 'dayjs'; -import {DemoContainer, DemoItem} from 'docsx/src/modules/components/DemoContainer'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_NextDateTimePicker as NextDateTimePicker } from '@mui/x-date-pickers/NextDateTimePicker'; import { Unstable_MobileNextDateTimePicker as MobileNextDateTimePicker } from '@mui/x-date-pickers/MobileNextDateTimePicker'; import { Unstable_DesktopNextDateTimePicker as DesktopNextDateTimePicker } from '@mui/x-date-pickers/DesktopNextDateTimePicker'; -import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker' +import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker'; export default function ResponsiveDateTimePickers() { return ( diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md index 8030feac383d..79a911000c3e 100644 --- a/docs/data/date-pickers/date-time-picker/date-time-picker.md +++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md @@ -82,13 +82,14 @@ Use the `views` prop to change this behavior: By default, the component renders the `day` view on mount. Use the `openTo` prop to change this behavior: +{{"demo": "DateTimePickerOpenTo.js"}} + :::success The views will appear in the order defined by the `views` array. If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow (e.g. view the default behaviors, the `year` is only accessible when clicking on the toolbar). ::: - ## Landscape orientation By default, the Date Time Picker component automatically sets the orientation based on the `window.orientation` value. diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.js b/docs/data/date-pickers/time-picker/TimePickerOpenTo.js new file mode 100644 index 000000000000..90c2754083d9 --- /dev/null +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker'; + +export default function TimePickerOpenTo() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx new file mode 100644 index 000000000000..90c2754083d9 --- /dev/null +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker'; + +export default function TimePickerOpenTo() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview new file mode 100644 index 000000000000..269fcb0a9c6d --- /dev/null +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md index 337732e3d579..c43d637be9dc 100644 --- a/docs/data/date-pickers/time-picker/time-picker.md +++ b/docs/data/date-pickers/time-picker/time-picker.md @@ -39,9 +39,9 @@ The component can be uncontrolled or controlled {{"demo": "TimePickerValue.js"}} -## Responsiveness +## Available components -The component is available in three variants: +The component is available in four variants: - The `DesktopNextTimePicker` component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field. @@ -49,15 +49,18 @@ The component is available in three variants: - The `MobileNextTimePicker` component which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field. -- The `NextTimePicker` component which will render `DesktopNextTimePicker` or `MobileNextTimePicker` depending on the device it runs on. +- The `NextTimePicker` component which renders `DesktopNextTimePicker` or `MobileNextTimePicker` depending on the device it runs on. - By default, it renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. - This can be customized with the `desktopModeMediaQuery` prop. +- The `StaticTimePicker` component which renders without the popover/modal and field. {{"demo": "ResponsiveTimePickers.js"}} +By default, the `NextTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) matches. +This can be customized with the `desktopModeMediaQuery` prop. + :::warning -There are certain caveats when testing pickers, please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for more information. +Responsive components can suffer some inconsistencies between testing environments if media query is not supported. +Please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for solutions. ::: ## Static mode @@ -75,14 +78,23 @@ The component can be disabled or read-only. ## Views -The component can contain three views: `hours`, `minutes`, and `seconds`. -By default, only the `hours` and `minutes` views are enabled. +The component supports three views: `hours`, `minutes` and `seconds`. -You can customize the enabled views using the `views` prop. -Views will appear in the order they're included in the `views` array. +By default, the `hours` and `minutes` views are enabled. +Use the `views` prop to change this behavior: {{"demo": "TimePickerViews.js"}} +By default, the component renders the `hours` view on mount. +Use the `openTo` prop to change this behavior: + +{{"demo": "TimePickerOpenTo.js"}} + +:::success +The views will appear in the order defined by the `views` array. +If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow. +::: + ## Landscape orientation By default, the Time Picker component automatically sets the orientation based on the `window.orientation` value. From 4b813671cdf0fb093cb4e736b26d43b3073adb97 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Jan 2023 10:46:48 +0100 Subject: [PATCH 07/14] Code review: Lukas --- docs/data/date-pickers/date-picker/CustomInput.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/data/date-pickers/date-picker/CustomInput.tsx b/docs/data/date-pickers/date-picker/CustomInput.tsx index b2b0ea8cec83..4cc55f7118de 100644 --- a/docs/data/date-pickers/date-picker/CustomInput.tsx +++ b/docs/data/date-pickers/date-picker/CustomInput.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import dayjs from 'dayjs'; import Box from '@mui/material/Box'; import { TextFieldProps } from '@mui/material/TextField'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; @@ -26,7 +25,6 @@ export default function CustomInput() { Date: Wed, 4 Jan 2023 11:47:08 +0100 Subject: [PATCH 08/14] Fix --- docs/data/date-pickers/date-picker/CustomInput.js | 2 -- docs/data/date-pickers/date-picker/CustomInput.tsx.preview | 1 - 2 files changed, 3 deletions(-) diff --git a/docs/data/date-pickers/date-picker/CustomInput.js b/docs/data/date-pickers/date-picker/CustomInput.js index 0e2ec8db56e7..5f2d06984eb0 100644 --- a/docs/data/date-pickers/date-picker/CustomInput.js +++ b/docs/data/date-pickers/date-picker/CustomInput.js @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import dayjs from 'dayjs'; import Box from '@mui/material/Box'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; @@ -52,7 +51,6 @@ export default function CustomInput() { Date: Wed, 4 Jan 2023 12:24:51 +0100 Subject: [PATCH 09/14] Empty --- docs/data/date-pickers/date-picker/date-picker.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index 8783c40b7763..180762d3b79c 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -76,12 +76,12 @@ The component supports three views: `day`, `month`, and `year`. By default, the `day` and `year` views are enabled. Use the `views` prop to change this behavior: -{{"demo": "DateTimePickerViews.js"}} +{{"demo": "DatePickerViews.js"}} By default, the component renders the `day` view on mount. Use the `openTo` prop to change this behavior: -{{"demo": "DateTimePickerOpenTo.js"}} +{{"demo": "DatePickerOpenTo.js"}} :::success The views will appear in the order defined by the `views` array. From a8c692cff1f90be85a82b55cc95efb15698bc7a3 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Jan 2023 13:22:32 +0100 Subject: [PATCH 10/14] Code review: Lukas --- docs/data/date-pickers/time-picker/TimePickerOpenTo.js | 3 ++- docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx | 3 ++- .../date-pickers/time-picker/TimePickerOpenTo.tsx.preview | 3 ++- docs/data/date-pickers/time-picker/TimePickerViews.js | 8 ++++---- docs/data/date-pickers/time-picker/TimePickerViews.tsx | 8 ++++---- .../date-pickers/time-picker/TimePickerViews.tsx.preview | 6 +++--- docs/data/date-pickers/time-picker/time-picker.md | 7 ------- 7 files changed, 17 insertions(+), 21 deletions(-) diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.js b/docs/data/date-pickers/time-picker/TimePickerOpenTo.js index 90c2754083d9..9705d3ff2370 100644 --- a/docs/data/date-pickers/time-picker/TimePickerOpenTo.js +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.js @@ -12,7 +12,8 @@ export default function TimePickerOpenTo() { diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx index 90c2754083d9..9705d3ff2370 100644 --- a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx @@ -12,7 +12,8 @@ export default function TimePickerOpenTo() { diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview index 269fcb0a9c6d..3bfbb52f186d 100644 --- a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview @@ -2,5 +2,6 @@ \ No newline at end of file diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.js b/docs/data/date-pickers/time-picker/TimePickerViews.js index 6c261d57d3cb..3a267eaa4d68 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.js +++ b/docs/data/date-pickers/time-picker/TimePickerViews.js @@ -2,18 +2,18 @@ import * as React from 'react'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker'; +import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker'; export default function TimePickerViews() { return ( - - - + diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.tsx b/docs/data/date-pickers/time-picker/TimePickerViews.tsx index 6c261d57d3cb..3a267eaa4d68 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.tsx +++ b/docs/data/date-pickers/time-picker/TimePickerViews.tsx @@ -2,18 +2,18 @@ import * as React from 'react'; import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker'; +import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker'; export default function TimePickerViews() { return ( - - - + diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview b/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview index a86ec4e15e84..dc1afff95e3d 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview +++ b/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview @@ -1,9 +1,9 @@ - - - + \ No newline at end of file diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md index c43d637be9dc..5cc1247c4794 100644 --- a/docs/data/date-pickers/time-picker/time-picker.md +++ b/docs/data/date-pickers/time-picker/time-picker.md @@ -63,13 +63,6 @@ Responsive components can suffer some inconsistencies between testing environmen Please refer to [this section](/x/react-date-pickers/getting-started/#testing-caveats) for solutions. ::: -## Static mode - -It is also possible to render the Time Picker component without the popover/modal and field. -This will enable building custom popover/modal containers. - -{{"demo": "StaticTimePickerDemo.js", "bg": true}} - ## Form props The component can be disabled or read-only. From f896d70cb47ffeadd0816144cc0002ef8d933d83 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Jan 2023 13:31:04 +0100 Subject: [PATCH 11/14] Code review: Lukas --- .../time-picker/ResponsiveTimePickers.js | 29 ++++++++++--------- .../time-picker/ResponsiveTimePickers.tsx | 29 ++++++++++--------- .../ResponsiveTimePickers.tsx.preview | 24 +++++++-------- 3 files changed, 42 insertions(+), 40 deletions(-) diff --git a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js index 65f1e3e15587..55e5e577233a 100644 --- a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js +++ b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.js @@ -1,28 +1,29 @@ import * as React from 'react'; import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker'; import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker'; import { Unstable_DesktopNextTimePicker as DesktopNextTimePicker } from '@mui/x-date-pickers/DesktopNextTimePicker'; +import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker'; export default function ResponsiveTimePickers() { return ( - - - + + + + + + + + + + + + ); diff --git a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx index 65f1e3e15587..55e5e577233a 100644 --- a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx +++ b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx @@ -1,28 +1,29 @@ import * as React from 'react'; import dayjs from 'dayjs'; -import { DemoContainer } from 'docsx/src/modules/components/DemoContainer'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DemoContainer, DemoItem } from 'docsx/src/modules/components/DemoContainer'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { Unstable_NextTimePicker as NextTimePicker } from '@mui/x-date-pickers/NextTimePicker'; import { Unstable_MobileNextTimePicker as MobileNextTimePicker } from '@mui/x-date-pickers/MobileNextTimePicker'; import { Unstable_DesktopNextTimePicker as DesktopNextTimePicker } from '@mui/x-date-pickers/DesktopNextTimePicker'; +import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker'; export default function ResponsiveTimePickers() { return ( - - - + + + + + + + + + + + + ); diff --git a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx.preview b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx.preview index a7bcb82a2a06..292ddec38201 100644 --- a/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx.preview +++ b/docs/data/date-pickers/time-picker/ResponsiveTimePickers.tsx.preview @@ -1,12 +1,12 @@ - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file From d8e0b8eef577ac627d4e2a706409611ea0e1c2c1 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Jan 2023 13:45:01 +0100 Subject: [PATCH 12/14] Code review: Lukas --- docs/data/date-pickers/time-picker/TimePickerOpenTo.js | 4 ++-- docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx | 4 ++-- .../date-pickers/time-picker/TimePickerOpenTo.tsx.preview | 4 ++-- docs/data/date-pickers/time-picker/TimePickerViews.js | 1 + docs/data/date-pickers/time-picker/TimePickerViews.tsx | 1 + .../data/date-pickers/time-picker/TimePickerViews.tsx.preview | 1 + 6 files changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.js b/docs/data/date-pickers/time-picker/TimePickerOpenTo.js index 9705d3ff2370..8c6ce6a816e0 100644 --- a/docs/data/date-pickers/time-picker/TimePickerOpenTo.js +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.js @@ -12,8 +12,8 @@ export default function TimePickerOpenTo() { diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx index 9705d3ff2370..8c6ce6a816e0 100644 --- a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx @@ -12,8 +12,8 @@ export default function TimePickerOpenTo() { diff --git a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview index 3bfbb52f186d..9b208f821838 100644 --- a/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview +++ b/docs/data/date-pickers/time-picker/TimePickerOpenTo.tsx.preview @@ -2,6 +2,6 @@ \ No newline at end of file diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.js b/docs/data/date-pickers/time-picker/TimePickerViews.js index 3a267eaa4d68..c1f81f3c7e45 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.js +++ b/docs/data/date-pickers/time-picker/TimePickerViews.js @@ -16,6 +16,7 @@ export default function TimePickerViews() { diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.tsx b/docs/data/date-pickers/time-picker/TimePickerViews.tsx index 3a267eaa4d68..c1f81f3c7e45 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.tsx +++ b/docs/data/date-pickers/time-picker/TimePickerViews.tsx @@ -16,6 +16,7 @@ export default function TimePickerViews() { diff --git a/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview b/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview index dc1afff95e3d..39249a229ba1 100644 --- a/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview +++ b/docs/data/date-pickers/time-picker/TimePickerViews.tsx.preview @@ -6,4 +6,5 @@ \ No newline at end of file From 7154635ba95af3c3774d583188975d3245c02af6 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Jan 2023 13:46:05 +0100 Subject: [PATCH 13/14] Revert package changes --- .../internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx | 1 - .../src/internals/hooks/useStaticPicker/useStaticPicker.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx index 1aa8b6311745..909f795392e8 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx @@ -19,7 +19,6 @@ import { import { DateRange, RangePosition } from '../../models/range'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ - position: 'relative', overflow: 'hidden', minWidth: DIALOG_WIDTH, backgroundColor: (theme.vars || theme).palette.background.paper, diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx index 0c809b564d89..206d74afdd2a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -9,7 +9,6 @@ import { PickersLayout } from '../../../PickersLayout'; import { DIALOG_WIDTH } from '../../constants/dimensions'; const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({ - position: 'relative', overflow: 'hidden', minWidth: DIALOG_WIDTH, backgroundColor: (theme.vars || theme).palette.background.paper, From c1492ed0f6b65555470c01e6ea0f220bcccbb41a Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Jan 2023 14:11:54 +0100 Subject: [PATCH 14/14] Empty