[pickers] Update Date calendar styling following MD3 guidelines

[LukasTy]

It's marked as a breaking change because there is a significant change in minimum container width (it increases from 320px to 360px).

https://deploy-preview-9279--material-ui-x.netlify.app/x/react-date-pickers/

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-9279--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	585.1	1,085	649.2	810.96	178.195
Sort 100k rows	ms	517.3	1,119.5	741.3	818.86	196.95
Select 100k rows	ms	155.7	299	286.9	258.56	53.505
Deselect 100k rows	ms	145.9	276.8	169.8	195.66	51.717

Generated by 🚫 dangerJS against 7d7a71c

[flaviendelangle]

I think the increased width goes against point 10 in #7440 and I agree with @oliviertassinari that our picker is already bigger than most competitors

@gerdadesign what is your feeling on this density topic ?

[LukasTy]

I think the increased width goes against point 10 in #7440

Well, that's the spec that MD3 provides in their design kit. The increased width comes from the fact that they are going for 40px sized day element and margin: 4px to top it all of in order to avoid the potential mis-clicks by having small or no margin between each of the days. 🤔

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[oliviertassinari]

I think the increased width goes against point 10 in #7440 and I agree with @oliviertassinari that our picker is already bigger than most competitors

I have been navigating around the day dimension problem since mui/material-ui-pickers#1648 (comment). Ideas:

1. I think that Joy UI's date picker should be denser than Material UI because it targets a younger audience. https://ui.shadcn.com/docs/components/date-picker is at 36px. I think that it works well, it could be as small as 32px from my perspective, especially for Chinese but not smaller (the deal with Chinese is that they are soo trained to read . cc @siriwatknp @zanivan
2. Material Design v3 promotes 48px for the click area, and 40px for the visible day.
3. I think that this is an example of when to diverge from Material Design guidelines. As a user, there is too much distance for me with my mouse to travel to select a value and to quickly scan the data to be an enjoyable UX. I think that the best indicator of this is how Google is using denser UI on the desktop for its calendar-related products, ignoring these specs. I think that something around 34px for Joy UI and 40px for Material UI could feel great.

---

Implementation feedback:

• a. there is a gap:

Uploading Screen Recording 2023-06-17 at 20.48.56.mov…

• b. the font size, it's 12px, but it should be md.sys.typescale.body-large.size (16px)

• c. the range:

• d. a design revamp can be a great opportunity to simplify the implementation. I think that we could drop the ButtonBase, it adds a lot of "weight" for almost nothing in exchange.