Work on Calendar doc page

mui · Nov 27, 2024 · 0470967 · 0470967
1 parent 87542d7
commit 0470967
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 12 deletions.
diff --git a/docs/data/date-pickers/rfc/field.md b/docs/data/date-pickers/rfc/field.md
@@ -8,7 +8,7 @@ title: DX - Field
 <p class="description">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.</p>
 
 :::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, `<MultiInputRangeField />` 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
@@ -1,28 +1,112 @@
 ---
 productId: x-date-pickers
-title: DX - Pickers
+title: DX - Picker
 ---
 
-# Fields
+# Picker
 
 <p class="description">This page describes how people can use picker with Material UI and how they can build custom pickers.</p>
 
 :::success
 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 (
+    <Popover.Root>
+      <Picker.Root manager={manager} {...props}>
+        <PickerField.Root>
+          <PickerField.Root>
+            {/** See field documentation */}
+            <Popover.Trigger>📅</Popover.Trigger>
+          </PickerField.Root>
+        </PickerField.Root>
+        <Popover.Backdrop />
+        <Popover.Positioner>
+          <Popover.Popup>
+            <Picker.Views></Picker.Views>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Picker.Root>
+    </Popover.Root>
+  );
+}
+```
 
-### Basic usage
+## Add an action bar
 
-TODO
+### Without Material UI
+
+```tsx
+<Picker.Layout>
+  <Picker.Views>{/** See demo above */}</Picker.Views>
+  <div>
+    <Picker.Clear>Clear</Picker.Clear>
+    <Popover.Close>Close</Popover.Close>
+  </div>
+</Picker.Layout>
+```
+
+## Add a toolbar
+
+### Without Material UI
+
+```tsx
+<Picker.Layout>
+  <Picker.Toolbar.Root>
+    <Picker.Toolbar.Label />
+  </Picker.Toolbar.Root>
+  <Picker.Views>{/** See demo above */}</Picker.Views>
+</Picker.Layout>
+```
+
+```tsx
+<Picker.Layout>
+  <Picker.Toolbar.Root>
+    <Picker.SetView target="year">
+      <Picker.Toolbar.Label format="YYYY" />
+    </Picker.SetView>
+    <Picker.SetView target="day">
+      <Picker.Toolbar.Label format="DD MMMM" />
+    </Picker.SetView>
+  </Picker.Toolbar.Root>
+  <Picker.Views>{/** See demo above */}</Picker.Views>
+</Picker.Layout>
+```
+
+## 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`