equinor / design-system

The Equinor design system
MIT License
121 stars 64 forks source link

Input mask option for the Input component #3598

Open LiveAaE opened 3 months ago

LiveAaE commented 3 months ago

To EDS <3

Related problem in some context typing in is a easier step then having to use date picker. Specially when there is many dates to put in.

Solution Having an option to use auto mask will then give a more easy input and at the same time be more error profe rather then displaying errors after. It will however depend on the context what seems best to use. But it would be amazing to also have this option.

Describe the solution you'd like Have looked at the react library for inspiration https://coreui.io/react/docs/forms/input-mask/. image

This would mean that when users types in a field where it should be dates we can sett it so that.

image

Thank you for your time and lot's of creeds for the great work you do!

oddvernes commented 2 months ago

Hello! This react-imask library looks interesting!

It looks like with a bit of ts-ignore it can be applied to an eds Input

Image

I wasnt able to get "placeholderChar" to show though in my quick test but seems to otherwise work

Image

Definetly something to look more into when we have time. However, we probably won't do anything beyond making a storybook example for how to use this and perhaps make some smaller changes to the code to facilitate the wrapper better (typescript issue & palceholder characters showing), otherwise it is up to the users to install this dependency and make their own wrapper 👍

oddvernes commented 2 months ago

imask documentation react-imask github