diff --git a/docs/data/date-pickers/rfc/field.md b/docs/data/date-pickers/rfc/field.md index 5c54b870106cc..4691271ef1844 100644 --- a/docs/data/date-pickers/rfc/field.md +++ b/docs/data/date-pickers/rfc/field.md @@ -8,7 +8,7 @@ title: DX - Field

This page describes how people can use field with Material UI and how they can build custom fields while keeping the built-in editing behavior.

:::success -This page extends the initial proposal made in [this Github comment](https://github.com/mui/mui-x/issues/14496#issuecomment-2348917294) +This page extends the initial proposal made in [this GitHub comment](https://github.com/mui/mui-x/issues/14496#issuecomment-2348917294) ::: ## Basic standalone usage @@ -87,9 +87,12 @@ The field can then be rendered just like the Material UI fields: ### With Material UI :::success -No DX change here compared to today +No DX change here compared to today. +The only change is that the field component are detecting if there is a picker around them and adding an opening button if so (instead of having the picker pass a prop to define this opening button). ::: +The field exposed by `@mui/x-date-pickers` and `@mui/x-date-pickers` automatically + ```tsx import { DatePicker } from '@mui/x-date-pickers/DatePicker'; @@ -102,6 +105,15 @@ The concept of slots does not fit this use case very well, but the exploration o ### Without Material UI +To use the field inside a picker, it has to contain a way to open the picker. + +:::success +TODO: Find the DX to define a trigger button. + +- Should it a custom `Picker.Trigger` or directly the `Popover.Trigger` and `Dialog.Trigger`? +- If it uses the Base UI component, how should it handle the responsive version of the picker? + ::: + #### Inside a picker from `@mui/x-date-pickers` Even if most applications with a custom field probably want to remove `@mui/material` entirely, using these custom fields inside a self contained picker component from `@mui/x-date-pickers/DatePicker` is totally doable. @@ -187,7 +199,7 @@ When used inside a picker, `` can be passed directly and ``` :::success -I have a POC of this in [#15505](https://github.com/mui/mui-x/pull/15505). +THere is a POC of this in [#15505](https://github.com/mui/mui-x/pull/15505). ::: ### Without Material UI diff --git a/docs/data/date-pickers/rfc/picker.md b/docs/data/date-pickers/rfc/picker.md index 69f86d473e9e7..c20d1eb6d6e72 100644 --- a/docs/data/date-pickers/rfc/picker.md +++ b/docs/data/date-pickers/rfc/picker.md @@ -1,9 +1,9 @@ --- productId: x-date-pickers -title: DX - Pickers +title: DX - Picker --- -# Fields +# Picker

This page describes how people can use picker with Material UI and how they can build custom pickers.

@@ -11,18 +11,102 @@ title: DX - Pickers This page extends the initial proposal made in [#14718](https://github.com/mui/mui-x/issues/14718) ::: -## With Material UI +## Basic usage -### Basic usage +### With Material UI TODO -### Override part of the UI +### Without Material UI -TODO +```tsx +function CustomDatePicker(props) { + const manager = useDateManager(); -## Without Material UI + return ( + + + + + {/** See field documentation */} + 📅 + + + + + + + + + + + ); +} +``` -### Basic usage +## Add an action bar -TODO +### Without Material UI + +```tsx + + {/** See demo above */} +
+ Clear + Close +
+
+``` + +## Add a toolbar + +### Without Material UI + +```tsx + + + + + {/** See demo above */} + +``` + +```tsx + + + + + + + + + + {/** See demo above */} + +``` + +## Add tabs + +### Without Material UI + +## Anatomy of `Picker.*` + +### `Picker.Root` + +### `Picker.Clear` + +### `Picker.SetValue` + +### `Picker.SetView` + +### `Picker.Layout` + +### `Picker.Toolbar.Root` + +### `Picker.Toolbar.Label` + +### `Picker.Toolbar.Label` + +### `Picker.Shortcuts.Root` + +### `Picker.Shortcut.Item`