[DatePicker] Update DatePicker

[jkruder]

DatePicker style has been updated to match updated design for DatePicker components. This introduces some breaking changes/new behaviors:

1. When navigating months using the chevrons, the selected date will not change; only the display date. In order to affect the selectedDate you need to click/tap a date or change the year. Google's demo of month navigation does not change the selected date, just the month that is currently visible.
2. No more double chevrons to navigate years as they are not part of the Material spec. These files have also been removed from svg-icons.
3. Clicking/Tapping the year will bring up the year selection widget. Selecting a year will change the selected and display dates.

[jkruder]

Addresses #1261 and mui/mui-x#7293

[hai-cea]

@jkruder Thank you for this! It's working great. Here's some of my feedback:

1. Can you add a toggle to the docs site to enable/disable year selector please? Also, the docs should say that disableYearSelection is default: false rather than optional.
2. I also found some space issues - would you to address them in this PR as well?

[jkruder]

@hai-cea Can do. What spacing issues are you seeing?

[hai-cea]

@jkruder Here's a side by side comparison of the profile version. I may be able to do pixel measurements in photoshop if you'd like?

[jkruder]

@hai-cea I should be ok, thanks though. I'll get to work on this list. If you see something else, let me know.

• Looks like the header padding needs to be reduced
• Spacing between the columns can be reduced
• Reduce space between last row and buttons
• Reduce font weight of title and increase font size

[hai-cea]

@jkruder The green one is actually the correct version. Teal is the current one in MUI. So, spacing should be increased not reduced.

[jkruder]

@hai-cea Thanks! I'll get the updates done soon.

[jkruder]

@hai-cea Updated the docs and addressed spacing issues.

[acornejo]

This looks great, hopefully it will get merged soon.

[hai-cea]

@jkruder The picker is looking really great! 👍

Just found 2 small issues:

1. Top right and left corners should be rounded.
2. I wasn't able to get the disable year selector toggle to work? Year selection was still enabled despite the toggle.

[MrOrz]

I've been trying using the update-datepicker branch.

While it looks pretty good in devtools (though not vertically centered):

On mobile devices (mine is HTC M8 with Google Chrome), the browser header (location bar) still pushes the buttons to below the screen.

[jkruder]

@MrOrz The vertical spacing at the top should be resolved by some of the dialog fixes that have come out. I haven't had time to merge in the latest and resolve @hai-cea's concerns. Should be done tonight though.

[jkruder]

@hai-cea Running into some problems with border-radius and the dialog/paper. Trying to work a solution that does not modify dialog/paper. When I remove the paper background-color the border radius is applied correctly but when there is a background color you do not see the full 2px border radius.

[hai-cea]

@jkruder The container with the bgColor should have a border radius style.

[jkruder]

@hai-cea Yes, I added the border radius style to the date display container but the border radius appears to not be applied. I'll push the changes tomorrow so you can take a look.

[oliviertassinari]

Can you rebase? :)

[hai-cea]

Thanks @jkruder @oliviertassinari