Skip to content

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

Merged
flaviendelangle merged 40 commits intomui:masterfrom
flaviendelangle:readonly-field
Oct 7, 2024
Merged

[docs] New recipe of a read-only field#14606
flaviendelangle merged 40 commits intomui:masterfrom
flaviendelangle:readonly-field

Conversation

@flaviendelangle
Copy link
Copy Markdown
Member

@flaviendelangle flaviendelangle commented Sep 13, 2024 •
edited
Loading

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).

@flaviendelangle flaviendelangle added docs Improvements or additions to the documentation. scope: pickers Changes related to the date/time pickers. labels Sep 13, 2024
@flaviendelangle flaviendelangle self-assigned this Sep 13, 2024
flaviendelangle
flaviendelangle commented Sep 13, 2024
View reviewed changes
Comment thread packages/x-date-pickers/src/hooks/useFieldPlaceholder.ts Outdated
@mui-bot
Copy link
Copy Markdown

mui-bot commented Sep 13, 2024 •
edited
Loading

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

Updated pages:

Generated by 🚫 dangerJS against 70b1bef

flaviendelangle
flaviendelangle commented Sep 13, 2024
View reviewed changes
Comment thread docs/data/date-pickers/custom-field/CustomReadonlyBehaviorMaterialTextField.tsx Outdated
@flaviendelangle flaviendelangle marked this pull request as ready for review September 13, 2024 07:54
@flaviendelangle flaviendelangle mentioned this pull request Sep 24, 2024
Merged
LukasTy
LukasTy reviewed Oct 4, 2024
View reviewed changes
Comment thread packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts Outdated
Comment thread packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts Outdated
Comment thread packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts Outdated
Comment thread packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts Outdated
Comment thread packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx Outdated
Comment thread packages/x-date-pickers/src/internals/components/PickersProvider.tsx Outdated
Comment thread packages/x-date-pickers/src/internals/components/PickersProvider.tsx Outdated
Comment thread packages/x-date-pickers/src/internals/components/PickersProvider.tsx Outdated
Comment thread packages/x-date-pickers/src/internals/components/PickersProvider.tsx Outdated
Comment thread packages/x-date-pickers/src/hooks/usePickersContext.ts
flaviendelangle
flaviendelangle commented Oct 7, 2024
View reviewed changes
Comment thread packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts
LukasTy
LukasTy approved these changes Oct 7, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@LukasTy LukasTy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread packages/x-date-pickers/src/hooks/usePickersContext.ts Outdated
Comment thread packages/x-date-pickers/src/hooks/usePickersContext.ts
Comment thread packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts
Comment thread packages/x-date-pickers/src/internals/components/PickersProvider.tsx Outdated
Comment thread packages/x-date-pickers/src/internals/components/PickersProvider.tsx Outdated
Comment thread packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts Outdated
Comment thread packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts
Comment thread packages/x-date-pickers/src/hooks/useParsedFormat.ts Outdated
LukasTy
LukasTy reviewed Oct 7, 2024
View reviewed changes
Comment thread docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx Outdated
flaviendelangle and others added 6 commits October 7, 2024 13:07
@flaviendelangle @LukasTy
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>
@flaviendelangle @LukasTy
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>
@flaviendelangle @LukasTy
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>
@flaviendelangle @LukasTy
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>
@flaviendelangle @LukasTy
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>
@flaviendelangle
Improve demo
018158d
@flaviendelangle flaviendelangle merged commit b1a8dd4 into mui:master Oct 7, 2024
@flaviendelangle flaviendelangle deleted the readonly-field branch October 7, 2024 12:31
LukasTy
LukasTy reviewed Oct 8, 2024
View reviewed changes
Comment thread docs/data/date-pickers/custom-field/custom-behavior/ReadOnlyMaterialTextField.tsx
InputProps={{
...InputProps,
readOnly: true,
endAdornment: <CalendarIcon color="action" />,
Copy link
Copy Markdown
Member

@LukasTy LukasTy Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member Author

@flaviendelangle flaviendelangle Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

@DMPatod DMPatod mentioned this pull request Nov 2, 2024
Open
@mbreadmachine mbreadmachine mentioned this pull request Nov 5, 2024
Merged
This was referenced Nov 8, 2024
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@LukasTy LukasTy LukasTy approved these changes

@joserodolfofreitas joserodolfofreitas Awaiting requested review from joserodolfofreitas

@arthurbalduini arthurbalduini Awaiting requested review from arthurbalduini

Assignees

@flaviendelangle flaviendelangle

Labels

docs Improvements or additions to the documentation. scope: pickers Changes related to the date/time pickers.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[docs] Create a recipe of a read-only textfield field

4 participants

@flaviendelangle @mui-bot @LukasTy @arthurbalduini