feat(Forms): expiry field

[joakbjerk]

• Add tests
• Add type documentation
• Add portal documentation
• Fine tune toggle functionality
• Feedback to user / changes to input behavior
• implement useDataValue hook and SharedContext

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 14, 2023 2:59pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7e45d6a:

Sandbox	Source
eufemia-starter	Configuration

[henit]

Wouldn't it be possible to achieve the UI in a simpler way using InputMasked?

[henit]

The Field.String component support mask-prop by the way, leading to the inner implementation using InputMasked instead of Input. Maybe that can be used, and then just wrapped with a parser that "translates" from the "UI value" (like "01/01") to the external value of the Expiry component (the object structure with the two values separate)? That can probably be done in the fromInput / toInput derivates, getting all the other features automatically (like the distribution of props to FieldBlock etc inside Field.String

[joakbjerk]

I did start out with the Field.String and a custom mask, but this ended up complicating the process of making the tab-behaviour function like it does in the DatePicker-component, and keeping the placeholder text while the user is typing. And as far is I could tell, it did not support labels for the different values either, like the DatePicker component does for day month year etc.

[henit]

But if Field.String lacks some features you need, could this possibly be simplified at least a bit using InputMasked instead of creating a "custom" mask feature?

[joakbjerk]

Hmm not sure if I quite understand? I tried using a InputMasked too, but it would no let me keep the placeholder while typing, and then there is the issue with the tab-functionality and missing labels for month and year. I found the simplified version I tried out, a bit lacking in the accessibility department.

That is why I went with the same approach as done in the DatePickerInput component, and the TextMask component is also imported from there

[henit]

There might be specific needs here that makes it hard to use those components, but it just seems to me that this is something the InputMasked component should have features for, so we don't need to write and maintain custom code for this kind of UI details in a component like this one. It should be standardized, so maybe we need to change/extend the features of InputMasked?

[joakbjerk]

Yeah totally agree! I don't see why the functionality that I needed from TextMask, couldn't be integrated into InputMasked. As of now, it looks like that TextMask is only used internally for the DatePickerInput. @tujoworker any thoughts?

[stenburger1]

Sorry to un-resolve this: we were the ones who suggested adding the Expiry Date component. https://jira.tech.dnb.no/browse/EDS-571

With regards to @henit's arguments: ironically, the closest we (consumers of eufemia) could "easily" come to the desired behaviour was with an <InputMasked />..

      <InputMasked
        className={style.inputMasked}
        mask={[/\d/, /\d/, '/', /\d/, /\d/]}
        mask_options={{
          allowNegative: false,
        }}
        on_change={({ cleanedValue }) => setInput(cleanedValue)}
        show_mask
        /**
         * The character U+2013 "–" could be confused with the ASCII character
         * U+002d "-", which is more common in source code.
         * This is here for screen readers and to allow usage of input.length from
         * the cleanedValue of the on_change.
         */
        placeholder_char='–'
        size='large'
        align='center'
        top='medium'
      />

[joakbjerk]

Here's a few observations when testing the component https://eufemia-git-feat-expiry-date-field-eufemia.vercel.app/uilib/extensions/forms/feature-fields/

In Google Chrome, I get the following error/warning in the docs(not sure if this is critical or not):

Duplicate form field id in the same form
Multiple form field elements in the same form have the same id attribute value. This might prevent the browser from correctly autofilling the form.
To fix this issue, use unique id attribute values for each form field.
12 resources

This issue should be fixed now 🙏

[tujoworker]

Nice work! Just some request we need to look at. And some we need to fix before merge.

• Also, the width of the field should be width: var(--forms-field-width--small); while the.
• And justify-content: center; in the .dnb-input__shell I think will be correct.
• One visual test would be good as well 🙏

[tujoworker]

Are there any properties we should omit?

[joakbjerk]

Hmm, will double check!

[tujoworker]

🎉 This PR is included in version 10.14.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀