Design system: Redesign text inputs

Dependency

• #2230

Overview

We need to redesign the text inputs in our design system because they are inconsistent, which causes confusion when redesigning pages and writing bugs.

Details

The Text Input section of the TDM design system has several problems.

• Inactive border color is inconsistent.
• Border radius is inconsistent.
• Error state border style is inconsistent.
• Placement of error messages is inconsistent.
• No logic is provided for when placeholder text should be used.
• Focus outline when the field is active is not reconciled with #2230.

The problems listed above have caused other problems.

• Inconsistent border colors caused confusion when designing #2008.
• Inconsistent error message placement led to #2172.

Please redesign the Text Input section of the design system to address the above problems and prevent future ones.

Action Items

• Create a slide for this issue on the Staging Deck.
• Update the Text Input section of the Full Design System page in Figma.
  • Make inactive border color consistent.
  • Make border radius consistent.
  • Make error state border style consistent.
  • Make placement of error messages consistent.
  • Provide logic for when placeholder text should be used.
  • Reconcile #2230 with focus outline when the field is active.
• Review with the design team. Update if needed based on feedback.
• Review with the product, development, and research teams. Update if needed based on feedback.
• Get Stakeholder sign-off via the stakeholder meeting slide deck.
• Update the Style Guide Presentation.
• Write any bugs that apply to the TDM Dev site as a result from this design system update.
• Reassign any previous assignees to this issue.
• Close this issue.

Resources

• Link to the Full Design System Figma page.

Slides

• Staging Deck
  • Staging Deck, slide 2229
• Release Deck
  • [YYYY-MM-DD Release Deck, slide 2229]

Start with the Text Input section in the Full Design System Figma page and review dependency #2230, then compare the related issues #2008 and #2172. Work through the listed consistency and placeholder decisions, review the result with the design, product, development, and research teams, and record the approved updates in the Style Guide Presentation and stakeholder meeting slide deck.