Skip to content

v4.0.0-alpha.6

Pre-release
Pre-release
Compare
Choose a tag to compare
@dmtrKovalenko dmtrKovalenko released this 06 May 14:50
· 151 commits to next since this release

🧙 renderInput API

Our new API to render the text field input, that solves a lot of problems! Like spreading props down to text field, override them, override classes for the picker – and saves a lot of bundlesize for people who use custom text fields.

⛔ Breaking changes

  • renderInput prop is required for any picker. For the compatibility (no user-facing changes) it will be
<DatePicker
+  renderInput={props => <TextField {...props} />}
/>

For DateRangePicker it includes 2 arguments (startProps and endProps respectively)

<DateRangePicker
  renderInput={(startProps, endProps) => (
    <>
      <TextField {...startProps} />
      <DateRangeDelimiter> to </DateRangeDelimiter>
      <TextField {...endProps} />
    </>
  )}
/>
  • Change the signature of onError callback to return a reason why the error must be displayed. We are not displaying English error messages by default anymore.
    If the input is invalid picker will only show red-colored TextField. So from now form validation with sharing internal pickers logic will look like this (reason is well-typed string union). More info in this guide

Removed props

  1. minDateMessage
  2. maxDateMessage
  3. invalidDateMessage
  4. strictCompareDates
  5. emptyText – it has been adding more confusing than what it's worth
  6. maskChar – because it is not visible for your users anymore and needs only to generate and parse mask pattern.

Prop renames

  • keyboardIcon => openPickerIcon
  • KeyboardButtonProps => OpenPickerButtonProps

✨ Features

  • Significantly improved form integration experience with the new onError prop. Checkout new form integration guideline
  • Export special DateRangeDelimiter component that can be used for renderInput of DateRangePicker
  • Better recognition of touch devices, using media (pointer: fine) (#1653)
  • Introduce new shouldDisableYear prop in order to dynamically disable years (#1743)
  • Improve input mask UX and a11y (#1661)

We have changed the logic of the input mask to be more accessible and less noisy:

  1. It is not rendering the whole mask from now (12/1_/____) for partial input it will show only typed part and the next delimiter (12/12/). And still does not allow to enter invalid symbols and type outside of date format.
  2. Generate user-readable placeholder and helper text thanks to dmtrKovalenko/date-io#340. This should significantly increase UX for keyboard input

Screen Recording 2020-04-15 at 17 38 50

👩‍⚕️ Fixes & Enhancements

  • Fix importing error for reexported adapters (#1634)
  • Make disabled years properly highlighted (#1743)
  • Do not open year by clicking space right of the arrow icon button (#1702)
  • Fix unexpected month switching on tabbing from the 1st day of the month (#1702)
  • Make impossible to focus disabled day/year via keyboard (#1702)
  • Reexport DateRangePickerProps [#1666] (#1668)
  • Align DateRangePicker inputs by baseline (#1689) @Philipp91
  • Rerender picker input when inputFormat changed @vdyachenko
  • [core] Align internal icons with mono-repository (#1692) @oliviertassinari
  • [docs] Fix DateFnsAdapter import docs typo (#1699) @Domino987
  • [docs] Fix Shortcat -> Shortcut typo(#1663) @Philipp91