Fix/input groups

[dannyk3941]

What's this PR do?

• Remove and consolidate text inputs css and stories, inputs include:

1. Simple Text Field
2. Textarea
3. Password Field
4. Simple Numeric
5. Numeric Counter
6. Numeric Switch (excludes numberSwitch.js, I would like to tackle this another time)
7. Button Text Field + Square Button
8. Search field (not including predictive search functionality)

Does not include:

1. Phone Number field (<select> and Dropdown pattern needs fix)
2. Content Search with predictive search

Where should the reviewer start?

• sass/text-input
• components/text-input
• components/textarea

[dgibson666]

Overall looks good. I'm very happy you renamed a bunch of classes to use input instead of form. I felt like form was not specific enough for these cases.

Here are some comments outside of the code-level comments:

We should pass a default arg for input name. The default story without setting it shows named="undefined" in the HTML, which is not ideal. The name should never be undefined.

We should really not be showing placeholder text in every single story. Generally speaking, placeholder text is discouraged. USWDS even explicitly advises against using it. In most of our stories, it is duplicative of the label, adding no value and causing verbosity for screen readers (not to mention the other usability issues).

Inputs with buttons:
They should use aria-controls, referencing the input by ID. This doesn't cause any additional overhead because the inputs have to have an ID for the label to reference them.

For Numeric switch field, I think you need data-segmented-button-type="single" to force the single-select functionality on the group. One should be selected by default. The overlay of "lbs/kg" should update when toggled.

For password:
The button is basically acting as a toggle buttons, so let's give it some statefulness using aria-pressed. We just need to establish which is the default state, which corresponds to aria-pressed="false".

Several issues that are larger discussion including required fields, focus states, and error states (and accessibility) can be discussed and addressed later. Some of these also seem like they need additional functionality (like Textfield with button), which can be added in future iterations.

[dannyk3941]

We should really not be showing placeholder text in every single story. Generally speaking, placeholder text is discouraged. USWDS even explicitly advises against using it. In most of our stories, it is duplicative of the label, adding no value and causing verbosity for screen readers (not to mention the other usability issues).

Several issues that are larger discussion including required fields, focus states, and error states (and accessibility) can be discussed and addressed later. Some of these also seem like they need additional functionality (like Textfield with button), which can be added in future iterations.

I'll take note of these to discuss as a team, maybe we can use the placeholder to use to show examples of what the input should be and the error states/colors need to be discussed.

[dgibson666]

This looks good. I think the numeric switch field needs functionality hooked up, but that can be done in a later iteration.