[docs] New page for the action bar customization

[flaviendelangle]

Add a doc page to explain how to override components on the pickers, with a 1st detailed example for ActionBar

The Overriding components section is mainly a copy paste of the grid doc.
Maybe it would be nice to have a well written page shared by all our components (core and X) explaining the components and componentsProps instead.

Doc preview

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	247	495	336.8	340.62	88.193
Sort 100k rows	ms	424.7	786.3	760.3	663.66	141.633
Select 100k rows	ms	130.8	207.2	188	180.56	27.685
Deselect 100k rows	ms	97.1	313.5	204.4	185.4	72.729

Generated by 🚫 dangerJS against 77a2449

[alexfauquette]

What about using StatikDatePicker instead of StatikDateTimePicker for the demonstrations such that we can focus on the action bar without being distracted by the view switching between calender/clock?

About the second demo, the code is maybe over complicated. What about a CustomActionBar that displays a cancel/validate buttons made with <IconButton />

Instead of the too long switch could be something like

{actions.includes('cancel') && <CancelButton onClick={onCancel} />}

Such that you define the UI code (CancelButton and ValidateButton) on top, and CustomActionBar only contains the interesting parts for the doc:

• dev has access to actions prop
• dev has access to onCancel, ... (maybe the list of methods available should be listed)

[flaviendelangle]

@alexfauquette

What about using StatikDatePicker instead of StatikDateTimePicker for the demonstrations such that we can focus on the action bar without being distracted by the view switching between calender/clock?

Done

About the second demo, the code is maybe over complicated. What about a CustomActionBar that displays a cancel/validate buttons made with

That's a recurrent topic
How complete and powerfull should the demo be ?
If we go for a simpler demo, I would at least add a note linking to our code to help the user building a real working example on application with several pickers that might have various actions.

[mapache-salvaje]

Maybe it would be nice to have a well written page shared by all our components (core and X) explaining the components and componentsProps instead.

This is something I've been thinking about as well (mui/material-ui#33156 (comment)) as I'm polishing up the Base docs. For those pages, I think I'm going to document the usage of components and componentsProps for each component individually. I don't want to make the dev leave the page they're on to go learn a new concept before putting this into use. And once they see this on a few pages, I think most people will start to pick up the pattern intuitively. But I do also think we need a higher-level guide explaining how these work.

[mapache-salvaje]

Maybe it would be nice to have a well written page shared by all our components (core and X) explaining the components and componentsProps instead.

I just remembered we have this Usage page in the Base docs that explains how these props work! Another page to be considered for a "universal" MUI docs section.