[docs] New recipe of a read-only field #14606

flaviendelangle · 2024-09-13T07:38:55Z

Closes #12342
Demo preview

It's a good opportunity to have a look at the overall DX of the most basic custom-behavior field possible.

In this PR

Create a new hook useFieldPlaceholder to generate the placeholder based on the format
Create a private context PickersFieldContext and a public hook usePickersFieldContext to pass information from the picker to the field without impacting the props (only one prop for now to open the field, name under discussion)
Improve the "Read only field" demo and move it in the public doc in a new custom-behavior folder (I will move the button and the autocomplete demos there once refined)

Follow up

Create doc sections to introduce useValidation, useFieldPlaceholder, usePickersFieldContext and useSplitFieldProps
Resume the work on the mask editing ([docs] Create Pickers masked field recipe #13515)
Update the existing demos (autocomplete, button, etc...) to use the new DX
Look which props we could move to usePickersFieldContext instead of drilling them down (would be breaking changes for v8).

packages/x-date-pickers/src/hooks/useFieldPlaceholder.ts

mui-bot · 2024-09-13T07:48:43Z

Deploy preview: https://deploy-preview-14606--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 70b1bef

docs/data/date-pickers/custom-field/CustomReadonlyBehaviorMaterialTextField.tsx

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts

packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts

packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx

packages/x-date-pickers/src/internals/components/PickersProvider.tsx

packages/x-date-pickers/src/hooks/usePickersContext.ts

packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts

LukasTy

Awesome work! 👏 💯
Leaving the final round of nitpicks. 🙈 😆

packages/x-date-pickers/src/hooks/usePickersContext.ts

packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts

packages/x-date-pickers/src/internals/components/PickersProvider.tsx

packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts

packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts

packages/x-date-pickers/src/hooks/useParsedFormat.ts

docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx

…er.tsx Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

…r.ts Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

LukasTy · 2024-10-08T07:45:57Z

docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx

+      InputProps={{
+        ...InputProps,
+        readOnly: true,
+        endAdornment: <CalendarIcon color="action" />,


I'm not sure we should have done this. 🙈
Now the keyboard navigation and a11y is borked. 🤷

The Tab sequence looks good to me, it does not focus the adornment anymore

I don't have the aria label on the TextField though, should probably add that (could be a nice addition in the context)

[docs] New recipe of a read-only field

ffda378

flaviendelangle added docs Improvements or additions to the documentation component: pickers This is the name of the generic UI component, not the React module! labels Sep 13, 2024

flaviendelangle self-assigned this Sep 13, 2024

Fix

81099d2

flaviendelangle commented Sep 13, 2024

View reviewed changes

packages/x-date-pickers/src/hooks/useFieldPlaceholder.ts Outdated Show resolved Hide resolved

Fix

95075dd

flaviendelangle commented Sep 13, 2024

View reviewed changes

docs/data/date-pickers/custom-field/CustomReadonlyBehaviorMaterialTextField.tsx Outdated Show resolved Hide resolved

Fix

92da0c7

flaviendelangle marked this pull request as ready for review September 13, 2024 07:54

flaviendelangle added 2 commits September 13, 2024 10:06

Add onOpen prop

b79b5f4

Fix types

c7a1032

flaviendelangle force-pushed the readonly-field branch from 845e945 to c7a1032 Compare September 13, 2024 08:30

Fix types

66574c3

flaviendelangle force-pushed the readonly-field branch from c7e9186 to e668ed2 Compare September 13, 2024 09:26

Fix

00c6329

flaviendelangle force-pushed the readonly-field branch from e668ed2 to 00c6329 Compare September 13, 2024 09:37

flaviendelangle requested review from LukasTy, joserodolfofreitas and arthurbalduini September 13, 2024 14:02

flaviendelangle added 2 commits September 17, 2024 09:29

Merge branch 'master' into readonly-field

cb32485

Improve doc

15fbfec

flaviendelangle force-pushed the readonly-field branch from 26a8775 to 15fbfec Compare September 17, 2024 10:18

flaviendelangle added 2 commits September 20, 2024 10:20

Merge branch 'master' into readonly-field

5768e56

Try to move onOpen to a context

26a2135

flaviendelangle mentioned this pull request Sep 24, 2024

[pickers] Improve typing of the range pickers #14716

Merged

flaviendelangle added 3 commits September 24, 2024 11:58

Remove TS changes

676aa65

Fix

9f5f302

Fix

9837ebf

LukasTy reviewed Oct 4, 2024

View reviewed changes

flaviendelangle added 4 commits October 7, 2024 07:47

Fix

3642e3c

Merge branch 'master' into readonly-field

e6ea1a5

Merge

cb91ec7

Merge

2365f69

flaviendelangle force-pushed the readonly-field branch from 1772912 to 0c81dda Compare October 7, 2024 09:44

Review Lukas + JSDoc for useParsedFormat

07a0285

flaviendelangle force-pushed the readonly-field branch from 0c81dda to 07a0285 Compare October 7, 2024 09:50

flaviendelangle commented Oct 7, 2024

View reviewed changes

packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts Show resolved Hide resolved

flaviendelangle requested a review from LukasTy October 7, 2024 10:01

Replace toggling method with onClose and onOpen

9d5e300

LukasTy approved these changes Oct 7, 2024

View reviewed changes

Merge branch 'master' into readonly-field

065dbfc

LukasTy reviewed Oct 7, 2024

View reviewed changes

docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx Outdated Show resolved Hide resolved

flaviendelangle and others added 6 commits October 7, 2024 13:07

Update packages/x-date-pickers/src/internals/components/PickersProvid…

3e976f8

…er.tsx Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

Update packages/x-date-pickers/src/internals/components/PickersProvid…

f5b950e

…er.tsx Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

Update packages/x-date-pickers/src/internals/hooks/usePicker/usePicke…

80e16b4

…r.ts Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

Update packages/x-date-pickers/src/hooks/useParsedFormat.ts

2fd6a5a

Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

Update packages/x-date-pickers/src/hooks/usePickersContext.ts

9443b65

Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>

Improve demo

018158d

flaviendelangle force-pushed the readonly-field branch from 68c41e9 to 018158d Compare October 7, 2024 12:00

Fix

70b1bef

flaviendelangle merged commit b1a8dd4 into mui:master Oct 7, 2024
18 checks passed

flaviendelangle deleted the readonly-field branch October 7, 2024 12:31

LukasTy reviewed Oct 8, 2024

View reviewed changes

DMPatod mentioned this pull request Nov 2, 2024

[Snyk] Upgrade @mui/x-date-pickers from 7.18.0 to 7.20.0 DMPatod/dmpatod-ledger-app#6

Open

mbreadmachine mentioned this pull request Nov 5, 2024

[Snyk] Upgrade @mui/x-date-pickers from 7.13.0 to 7.20.0 mbreadmachine/arany-d-osztaly-weboldal#61

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] New recipe of a read-only field #14606

[docs] New recipe of a read-only field #14606

flaviendelangle commented Sep 13, 2024 •

edited

Loading

mui-bot commented Sep 13, 2024 •

edited

Loading

LukasTy left a comment

LukasTy Oct 8, 2024

flaviendelangle Oct 8, 2024

[docs] New recipe of a read-only field #14606

[docs] New recipe of a read-only field #14606

Conversation

flaviendelangle commented Sep 13, 2024 • edited Loading

In this PR

Follow up

mui-bot commented Sep 13, 2024 • edited Loading

LukasTy left a comment

Choose a reason for hiding this comment

LukasTy Oct 8, 2024

Choose a reason for hiding this comment

flaviendelangle Oct 8, 2024

Choose a reason for hiding this comment

flaviendelangle commented Sep 13, 2024 •

edited

Loading

mui-bot commented Sep 13, 2024 •

edited

Loading