[RFC] Rework Day, Year components

[oliviertassinari]

The material design specification has recently introduced a new guideline around how states should be handled: https://material.io/design/interaction/states.html. We have been iterating on the Pagination and TreeView component around this specification. This involves mui/material-ui#5186 and mui/material-ui#10870.

In our case, I would propose that we apply it to the Day and Year components at least, and maybe the Month component too (why is the style different?). It's also an opportunity to improve on #1674:

• Apply the exact state style approach as TreeView and Pagination.
• Give up on ButtonBase, it's too slow for displaying 100 days (date range with 3 months)
• Have one DOM node, no more.

The day we decide to prioritize this breaking change, we might as well solve #1680, #1845, #1285, and #1648 not too later after to minimize context switching cost.

[dmtrKovalenko]

What's wrong with <Day /> and <Year /> components? It follows https://material.io/components/pickers#specs, isn't it?

[oliviertassinari]

@dmtrKovalenko You can find the answer to this question in the links that are in the description of the issue :). The immediate concern of this issue is about using the same CSS output structure for hover, focus, and the theme value used. Examples I can notice in the deviation:

• Use '@media (hover: none)': { to avoid sticky focused style on touch (mobile)
• Use focusVisible to avoid the focused style when only clicking.
• Remove willChange: 'background-color',, this CSS property is meant for being set right before (a few ms) the change will happen.
• background required here to prevent collides with the other days when animating with transition group it doesn't seem to be true anymore, I can't reproduce the problem without.