Text fields (select & input): Fill appearance variant update

[LibbyUX]

Design system update

I have updated my usage of selects/inputs to Material 3's text field. I used their Figma out-of-the-box solution in this component. This text field update is for the fill appearance variant only. I will submit the outline appearance variant at a later time!

This is a high priority request as we will need this updated across the design system in the CDE and the RUI for 8th release.

Figma

• Design system repo
• HRA Components
  • Select
  • Input

Storybook

• Select
• Input

Relevant open issues to do first:

• 800

Updates to note for the fill appearance variant:

• There is only one size. Please remove any size variants in our current design system. We are using one size like Material is doing.
• Error state and disabled states have been added.
• Supporting text has been added, as Material has this in their component. We don't use it often, but this infrastructure may be nice if we need it.
• HRA design system customizations are:
  • 48px height instead of 56px height like they have specified
  • 14px largest font size (our medium label) instead of 16px
  • Colors
  • Fonts