enhancement[helper text]: move helper text below input fields and dropdowns

[jeanservaas]

enhancement[helper text]: move helper text below input fields and dropdowns

Problem:

• Product designers are having UI alignment issues with the helper text below the label

• The stacking of the helper text under the label and the subtle color shift between the two pieces of type is fussy and not differentiated enough. $label-01 token value had to be pushed from Gray 70 to Gray 80 to make the label stand apart from the helper text; the stacking under the label also creates weird ragging

• after a brief competitive analysis, many other best-in-practise design systems use the arrangement we are proposing including: Material, Atlassian, Patternfly and Quickbooks to name a few; not only is it more intuitive for uses but it's a better design.

• We wanted to do this earlier but were worried about screen readers semantically reading label > help text > input in order; however you can set the screen reader order apparently to avoid that issue according to elizabeth judd this should not be a blocker.

• Move helper text below input fields and drop down

• Change value of $text-02 to Gray 70... both labels and helper text can now use $text-02

• Remove right padding on helper text in mobile breakpoint

Proposed spec:

Dropdowns with helper text will function the same way, and cover the helper text when it is open... we don't believe this is a problem:

Motion specs:

Error message will animate to replace helper text; when you start to retype your input to correct the error the helper text will reappear. Material has a much better example of this than I can animate:

https://material.io/components/text-fields/#anatomy

We will use our productive standard easing curves.

[tw15egan]

@jeanservaas what should text-02 be changed to across all 4 themes?