Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1672: Improve birthday field #1767

Merged
merged 5 commits into from
Nov 19, 2024
Merged

1672: Improve birthday field #1767

merged 5 commits into from
Nov 19, 2024

Conversation

f1sh1918
Copy link
Contributor

Short description

As a koblenz pass applicant i want to provide my birthday easily on a mobile device

Proposed changes

  • added a custom mui datepicker in desktop variant that enables date input with (virtual) keyboard
  • improved datepicker usage by choosing date -> month -> day on calendar icon click and dropdown
  • add error hint
  • adjusted the clearButton slightly to fit better to material icons

Note

  • it makes sense to reuse this component for other date inputs to unify behavior and especially for the application process for bavaria we should reuse this approach even the styling is a bit different Unify Datepicker components #1766
  • the style for the calendar differs to the design, since its a lot of effort to customize that and i think not worth the effort
  • the under 16 years old check is not really clear. I don't think this makes sense because no one can create a card for their children if we disallow that.

Side effects

  • none

Testing

  1. Please start the application on a real mobile device to check if everything works fine
  2. Create a card and activate it and check if birthday value is correct

Resolved issues

Fixes: #1672

Copy link
Member

@steffenkleinle steffenkleinle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on firefox, works great 🎉

@f1sh1918 f1sh1918 force-pushed the 1670-show-form-hints branch 3 times, most recently from bbdf70f to ca0080a Compare November 13, 2024 19:19
Copy link
Member

@ztefanie ztefanie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(minor)
Currently the styling of the DateField and the other Text fields in same, when not selected, but different when selected:

Unbenannt

administration/package.json Show resolved Hide resolved
@@ -12,6 +12,7 @@ const StyledButton = styled.button<{ $viewportSmall: boolean }>`
flex-direction: column;
margin-right: 4px;
cursor: pointer;
color: #5f6b7c;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be possible to move this color to a constant in the colors file for reuse? I understand that a separate cleanup task is planned for moving existing colors, but keeping new feature colors organized in the central file now could save us time in the future. That way, we won’t need to revisit this feature when we tackle that cleanup, and it will keep everything tidy as we go. Thank you!

@f1sh1918
Copy link
Contributor Author

(minor) Currently the styling of the DateField and the other Text fields in same, when not selected, but different when selected:

Unbenannt

I think this issue will be solved with #1779 and is as you said really minor.
To manually override the style now is really ugly and difficult to find. You can give it a try, i already spend couple of hours on that

@f1sh1918 f1sh1918 requested a review from ztefanie November 15, 2024 12:34
@f1sh1918 f1sh1918 force-pushed the 1670-show-form-hints branch from 40e5be8 to b4c271a Compare November 15, 2024 13:32
Base automatically changed from 1670-show-form-hints to main November 19, 2024 16:45
…-field

# Conflicts:
#	administration/src/bp-modules/self-service/CardSelfServiceForm.tsx
#	administration/src/bp-modules/self-service/CardSelfServiceView.tsx
#	administration/src/bp-modules/self-service/components/FormErrorMessage.tsx
#	administration/src/cards/Card.test.ts
#	administration/src/cards/Card.ts
@f1sh1918 f1sh1918 enabled auto-merge November 19, 2024 17:02
@f1sh1918 f1sh1918 merged commit 9e1effc into main Nov 19, 2024
1 check passed
@f1sh1918 f1sh1918 deleted the 1672-improve-birthday-field branch November 19, 2024 17:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve the Geburtsdatum field in the card creation form
4 participants