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

Create new date input and replace all the existing ones with it #2183

Merged
merged 5 commits into from
Feb 22, 2021

Conversation

axbarsan
Copy link
Contributor

Towards giantswarm/giantswarm#11004 and towards the grommet migration

This PR includes the new date input, snapshot tests and Storybook examples. It also replaces the date input in the keypair creation modal with the new one, getting rid of another dependency.

If specified a format (e.g. yyyy-mm-dd), you can also enter the date via text, with a masked input (meaning you don't have to type the - between the years, months and days - similar to a phone field on some websits). Otherwise, the form acts as a button, which you can customize as you wish.

The current button display is the grommet default, so it will change once we will customize buttons. That's why the date button in the keypair creation modal currently uses a custom style.

Preview

With label

image

With label - open

image

With multiple other configurations

image

With multiple other configurations - open

image

With a button instead of input

image

With a button instead of input - with value

image

With a button instead of input - open

image

Keypair creation modal

image

Keypair creation modal - date input open

image

@axbarsan axbarsan added the kind/dev-change Changing a development operation label Feb 19, 2021
@axbarsan axbarsan self-assigned this Feb 19, 2021
>
<Input
// @ts-expect-error
ref={ref}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The props interface of the date input doesn't allow setting a ref, but it's actually supported 🧇

@axbarsan axbarsan requested a review from a team February 22, 2021 15:10
Copy link
Contributor

@oponder oponder left a comment

Choose a reason for hiding this comment

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

Beautiful! LGTM, didn't test run it though.

@axbarsan axbarsan merged commit b350b4f into master Feb 22, 2021
@axbarsan axbarsan deleted the create-date-input branch February 22, 2021 18:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind/dev-change Changing a development operation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants