search

mui / mui-design-kits

The public feature and bug tracker for the MUI Design kits and Connect Figma plugin.
https://mui.com/design-kits/
113 stars 16 forks source link

Date range picker #63

Closed oliviertassinari closed 8 months ago

oliviertassinari commented 2 years ago

We are making progress on the date range picker https://mui.com/x/react-date-pickers/date-range-picker/, once we finalize the final design for this component, it would start to be interesting to add coverage for it in the design kits.

cc @gerdadesign for context, she recently joined MUI X & MUI Toolpad, as the first designer on these teams.

31 is similar but focuses on the date picker.

Benchmark

Screenshot 2022-08-16 at 15 05 12
adrianmanea commented 2 years ago

Sounds good! I'll keep an eye on the changes so we can deploy the new MUI X Range pickers in the upcoming 5.8.0 version!

adrianmanea commented 2 years ago

We have worked on it, in the Adobe XD v5.9.0 update. Would be nice for someone to confirm 👍.

Screenshot 2022-08-16 at 15 02 06

https://xd.adobe.com/view/1c174062-04d1-463e-971e-df16f8a89e2f-4944/screen/9f2bb84f-4b7d-44e1-b540-b67860666ad8

mbrookes commented 2 years ago

@adrianmanea I'm not seeing the date range picker in that preview?

adrianmanea commented 2 years ago

Ahh, this is for the XD, not Figma, my bad! We dodged the Range Picker in Figma, sorry. We've added it to the to-do list for the next release.

oliviertassinari commented 2 years ago

@adrianmanea I have updated your initial comment with what I could find.

Yeah, it seems to be a good start. I wonder how much in the details we should go. I support designers who can display this inside a Paper below a TextField. As we move forward, I suspect that there will be some subtleties to cover, e.g. input text format, validation flow, range selection state.

splitloose-earth commented 1 year ago

notice comment here : https://github.com/mui/mui-design-kits/issues/31. should the on hold be removed on this issue?

oliviertassinari commented 1 year ago

I went through all the changes done since the very first v6.0.0-alpha.0: https://github.com/mui/mui-x/blob/next/CHANGELOG.md. Only few seems to impact the design kit. It seems that most of the effort was on:

The range presets is new https://next.mui.com/x/react-date-pickers/shortcuts/, and will impact the Figma file. Is this the only impact @gerdadesign?

I think that there are still important visual changes that we can expect to make the difference from good to great going forward. In https://github.com/mui/mui-x/issues/7440 I make the case that we should:

  1. Fix the dark mode display. It feels broken. It's actually broken differently, so twice, between the date range and date pickers.
  2. Fix the year grid. While end-users shouldn't really need a year picker, since they should use the keyboard for dates that are far in the past or future, the UX of the grid feels far from great. IMHO. I think that it would feel great if it was linear, so our eyes don't need to do zigzags. Material Design fixed this in their v3.
  3. Do something about the density on desktop. Every action feels like too distance, it's more effort to move the cursor that it needs to be. I get that if end-users have a cursor with low accuracy, it's even more painful to click on the wrong location, but Google isn't following Material Design's guidelines on most of it's products, the date pickers they use in production are denser. I think that it demonstrates that MD is, to some extent, worked in a bubble, disconnected from real life.

So, why not sync the component now, and re-sync another time in the future.