From 053cba23268a1efc874fb784f65f72e42d0a6104 Mon Sep 17 00:00:00 2001 From: flavien Date: Wed, 27 Nov 2024 13:50:46 +0100 Subject: [PATCH] Work on Calendar doc page --- docs/data/date-pickers/rfc/calendar.md | 16 +-- docs/data/date-pickers/rfc/field.md | 18 +++- docs/data/date-pickers/rfc/picker.md | 138 +++++++++++++++++++++++-- 3 files changed, 154 insertions(+), 18 deletions(-) diff --git a/docs/data/date-pickers/rfc/calendar.md b/docs/data/date-pickers/rfc/calendar.md index 21833589dcd5..0976ec82ca01 100644 --- a/docs/data/date-pickers/rfc/calendar.md +++ b/docs/data/date-pickers/rfc/calendar.md @@ -37,7 +37,7 @@ import { Calendar } from '@base-ui/x-date-pickers/Calendar'; ◀ - + ▶ @@ -88,7 +88,7 @@ import { Calendar } from '@base-ui/x-date-pickers/Calendar'; ◀ - + ▶ @@ -167,7 +167,7 @@ When MD3 is supported, the default views of `` should probably b target={view === 'year' ? 'day' : 'year'} disabled={view === 'month'} > - + ▶ @@ -177,7 +177,7 @@ When MD3 is supported, the default views of `` should probably b target={view === 'month' ? 'day' : 'month'} disabled={view === 'year'} > - + ▶ @@ -224,7 +224,7 @@ Today's `` header would look as follow: {({ view }) => ( - {view === 'year' ? '▲' : '▼'} + {view === 'year' ? '▲' : '▼'}
@@ -338,7 +338,7 @@ The `` component can be built in a few different ways: function CustomCalendarHeader() { return ( - + ); } @@ -379,7 +379,7 @@ The `` component can be built in a few different ways: paddingRight: 12, }); - export const PickerCalendarHeaderLabel = styled(Calendar.Header.Label)({ + export const PickerCalendarHeaderLabel = styled(Calendar.Header.Title)({ /** ... */ }); @@ -507,7 +507,7 @@ Top level component for the `Calendar.Header.*` components. - Extends `React.HTMLAttributes` -### `Calendar.Header.Label` +### `Calendar.Header.Title` Renders the header label for the current value based on the provided format. diff --git a/docs/data/date-pickers/rfc/field.md b/docs/data/date-pickers/rfc/field.md index 5c54b870106c..4691271ef184 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 69f86d473e9e..091efd2c44c2 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,142 @@ 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 + +```tsx +function CustomDatePicker(props) { + const manager = useDateManager(); + + return ( + + + + + {/** See field documentation */} + 📅 + + + + + + + + + + + ); +} +``` + +## Add an action bar + +### With Material UI + +TODO + +### Without Material UI + +```tsx + + {/** See demo above */} +
+ Clear + Close +
+ +``` + +## Add a toolbar + +### With Material UI + +TODO + +### Without Material UI + +```tsx + + + + + {/** See demo above */} + +``` + +```tsx + + + + + + + + + + {/** See demo above */} + +``` + +## Add tabs + +### With Material UI + +TODO + +### Without Material UI TODO -## Without Material UI +## Add shortcuts + +### With Material UI + +TODO + +### Without Material UI + +TODO + +## Anatomy of `Picker.*` + +### `Picker.Root` + +TODO + +### `Picker.Clear` + +TODO + +### `Picker.SetValue` + +TODO + +### `Picker.SetView` + +TODO + +### `Picker.Layout` + +TODO + +### `Picker.Toolbar.Root` + +TODO + +### `Picker.Toolbar.Title` + +TODO + +### `Picker.Shortcuts.Root` + +TODO -### Basic usage +### `Picker.Shortcut.Item` TODO