feat: input mask

[werdnanoslen]

Summary

Adds input masks to text inputs

Related Issues or PRs

Resolves #2517

How To Test

Open the last story for Text input: Input Mask

Screenshots (optional)

This is me just pianoing 1-9, showing that it autoformats:

[shkeating]

looks good to me

whoops, I overlooked an ANDI warning we might want investigate

I'm seeing it suggest using aria-labelledby instead of aria-describedby

[werdnanoslen]

looks good to me

whoops, I overlooked an ANDI warning we might want investigate

I'm seeing it suggest using aria-labelledby instead of aria-describedby

It already has a label though (associated with for=), and describedby is supposed to be for extra info on top of a label. Also USWDS uses describedby

I'll just add aria-labelledby also to point to the label:

[brandonlenz]

Lemme know if you have any questions about this feedback!

[werdnanoslen]

@gidjin once this is merged, could we please do a minor release to make this available for my current client?

[brandonlenz]

Approving as not to block.

However, I would like to see a reorg (can be a follow on PR if releasing this is priority), where the folder structure looks like:

src/
  components/
    forms/
      TextInput/
        {...all our existing stuff}
      TextInputMask/
        TextInputMask.tsx
        TextInputMask.test.tsx
        TextInputMask.stories.tsx

Basically just to make sure that the tests and storybook examples are also separated out

Edit: reversing course, noted a few small things that I think are actually functionally important

[brandonlenz]

I'll reiterate that if you want the <i> tag to not show up until something has been typed (like the USDWS examples) you can do this

Suggested change

	<i>{iValue}</i>
	{iValue && <i>{iValue}</i>}

[werdnanoslen]

yup, but i didn't see any reason to 🤷