♻️ refactor(datepicker)

[github-actions]

closes #695

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design-system-old	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2023 1:03pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 921400a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 17 packages

Name	Type
@baloise/design-system-components	Minor
apps-angular	Patch
e2e-tests	Patch
@baloise/design-system-components-angular	Minor
@baloise/design-system-components-react	Minor
@baloise/design-system-components-table	Minor
@baloise/design-system-components-vue	Minor
@baloise/design-system-testing	Minor
@baloise/design-system-css	Minor
@baloise/design-system-favicons	Minor
@baloise/design-system-fonts	Minor
@baloise/design-system-icons	Minor
@baloise/design-system-maps	Minor
@baloise/design-system-tokens	Minor
@baloise/design-system-output-target-angular	Minor
@baloise/design-system-output-target-react	Minor
@baloise/design-system-output-target-vue	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[hirsch88]

/ux-checklist

[github-actions]

🧪 UX-Checklist

@clastzoo @samira-liebendoerfer please help us testing this component.

• iPhone
  • Safari
• iPad
  • Safari (only responsive relevancy)
• Android
  • Chrome
• MacOs
  • Safari
  • Firefox (if there is time)
  • Chrome (if there is time)
• Windows
  • Edge
  • Chrome
  • Firefox

[samira-liebendoerfer]

Testing Feedback

General

• When manually typing the date and completing it in the required format the calendar is still opened (with the chosen DD MM YYY)
  ––> suggestion: calendar closes after completing or on keydown?

• Border radius top left and bottom left inner corner not rounded

• Typing an impossible date is possible, (calendar shows current date)
  

iPhone Safari

• Selected: bg-color behind date very light grey, no bg-color behind calendar icon
  

• Year not scrollable, not swipable
  

[clastzoo]

Android 11 – Chrome 116.0.5845.115

Corner Radius are missing on the left-hand side:

[QUESTION]
While holding the phone in landscape mode, the user doesn't notice that the picker opened because the keyboard is automatically triggered. Edgecase: Idea: Press opens date picker, additional click inside the date triggers the keyboard. TBD

Letters are allowed as an input

Scroll is not really working smoothly

Mask is not emptied while start pressing keys
https://github.com/baloise/design-system/assets/62377419/cae3c9e1-8c2c-4dd9-8aad-80992c860cb7

[hirsch88]

??? When manually typing the date and completing it in the required format the calendar is still opened (with the chosen DD MM YYY) –> suggestion: calendar closes after completing or on keydown?

• Border radius top left and bottom left inner corner not rounded
• Typing an impossible date is possible, (calendar shows current date)
• Selected: bg-color behind date very light grey, no bg-color behind calendar icon
• Year not scrollable, not swipable