feat(components): InputDate implements CalendarDatePicker

[rjdestigter]

Motivations

See https://github.com/GetJobber/atlantis/pull/1599 for motivations for a new calendar date picker. This PR implements that picker for our InputDate component.

Changes

Added or changed

Formatting how dates are displayed

navigator.langauge and Intl.DateTimeFormat are used to display dates and translate month- and weekday names. Users can also type month names in their own language when using the keyboard to type in a date.

I changed displaying from being in format "dd-mm-yyyy" to using Intl.DateTimeFormat + short form. This can be reverted if wanted. Currently when the input looses focus it will format the value based on the users local settings.

E.g. typing "03-11-1955" or "3 mei 1955" or "May 3, 1955" when the the navigator language is set to nl (Dutch) will format the value inside the form field to "3 mei 1955"

This format is also used to label each grid cell for voice over readers.

Clearable

If props.clearable is set to true the form field will be suffixed with a X button to clear the input. The calendar icon will be set as a prefix.

Dialog

Th dialog remains open until the user presses clicks outside of it or the form field and dialog loose focus.

... more to come

Popover changes

Added the capability to not show the dismiss button and disable the "refocus on close" behaviour.

FormField, FormFieldWrapper

Added the capability to pass a ref pointing at the outermost div

InputText

• Fixed using inputRef prop as this was being ignored
• Added formFieldRef prop passed to FormField as ref

Testing

---

In Atlantis we use Github's built in pull request reviews.