Material-ui: [TimePicker] minutesStep, handle disabled minutes

[mikepc]

Is your feature request related to a problem? Please describe.
When setting the minutesStep prop, there's no indication to the user which minutes are not selectable. This is nearly a bug, but it's honestly a feature.

Describe the solution you'd like
By default minutes that are not eligible for user interaction should be a "disabled" style, which can be overridden in the usual way.

Describe alternatives you've considered
I'll go to prod with it, but I'd rather not.

Additional context
This component rules.

import * as React from "react";
import TextField from "@material-ui/core/TextField";
import DateFnsAdapter from "@material-ui/lab/dateAdapter/date-fns";
import LocalizationProvider from "@material-ui/lab/LocalizationProvider";
import TimePicker from "@material-ui/lab/TimePicker";

export default function BasicTimePicker() {
  const [value, setValue] = React.useState<Date | null>(new Date());

  return (
    <LocalizationProvider dateAdapter={DateFnsAdapter}>
      <div style={{ width: 300 }}>
        <TimePicker
          label="12 hours"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          minutesStep={15}
          renderInput={(params) => (
            <TextField {...params} margin="normal" variant="standard" />
          )}
        />
      </div>
    </LocalizationProvider>
  );
}

https://codesandbox.io/s/basictimepicker-material-demo-forked-fnrox?file=/demo.tsx

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| @material-ui/lab | v5.0.0-alpha.16 |

[mikepc]

Oh and related, since the time picker defaults to the current time, it should probably go to either:
nearest minute that meets the minute step (unless disablePast)
or
next minute step from now that meets the step.
For example, if it's 10:16, with disabled past it should tick to 10:30, without disabled past it should choose 10:15.

Separate issue, but I wanted to throw that out there.

[PabloWestphalen]

Any interest on this? I'd also like to be able to hide the unused units.

[dmtrKovalenko]

@PabloWestphalen Would you like to contribute and make PR?

[PabloWestphalen]

@dmtrKovalenko Would love to. Do you think a separate property, or always hide based on the minutesStep? Eg: if we set minutesStep to 15 then only 0, 15, 30 and 45 is displayed.

[dmtrKovalenko]

Probably we need both.

• [ ] Hide text based on the disabled state
• [ ] Something like renderClockNumber
• [ ] Make sure that validation error property dispatched in onError if the value is disabled

But fill free to implement one of it

[PabloWestphalen]

renderClockNumber is a great idea. I actually intuitively looked for something like it when attempting to accomplish this. It's good because it wouldn't break existing code and add flexibility for even wilder scenarios.

[oliviertassinari]

Considering there is already a ClockNumber component, what do you guys think of a new ClockNumberComponent prop? We tend to favor components instead of render props in the main repository for non-frequent overrides requirements. It reduces the internal overhead for exposing the customization point.

[atomauro]

anyone with a solutio? :/ im stuck in this, i want to display just steps of 15 minutes but all the numbers appear :/