DS/DSR Hover and Focus styling | Text input/Checkbox/Radio button/Selects

[natalia-fitzgerald]

Exploration

I am looking to explore the following approach to the hover and focus styling for input fields.

• Make hover and focus Pacific for all input fields.
• Show status colors (Green, Gold, Red) on enabled only.
• Once a user starts interacting with the field - hover, focus, clicking, typing, the field gets the Pacific coloring.

Proposal

• Hover and focus styling is Pacific regardless of status
• Success, warning, error status borders are 2px like hover
  • This is inconsistent in the DS (some inputs are getting 1 px border for success, error, warning status) but I believe this is a mistake

Status	Base	Hover	Focus
Enabled	Border: 1px, Gray 60 (#919395)	Border: 2px, Pacific (#0072ce)	Border: 2px, Pacific (#0072ce) and Outline: Dotted 1px, Pacific (#0072ce)
Disabled	Border: 1px, Gray 60 (#919395) and Background: Gray 10 (#e7e8e9)	Cursor change	None
Success	Border: 2px, Green (#20aa3f)	Border: 2px, Pacific (#0072ce)	Border: 2px, Pacific (#0072ce) and Outline: Dotted 1px, Pacific (#0072ce)
Warning	Border: 2px, Gold (#ff9e1b)	Border: 2px, Pacific (#0072ce)	Border: 2px, Pacific (#0072ce) and Outline: Dotted 1px, Pacific (#0072ce)
Error	Border: 2px, Red (#d14124)	Border: 2px, Pacific (#0072ce)	Border: 2px, Pacific (#0072ce) and Outline: Dotted 1px, Pacific (#0072ce)

Audit of current state

In the CFPB Design System (and therefore the DSR) The current approach to hover and focus colors is inconsistently implemented. For some inputs we mirror status colors for hover and focus and for others we use Pacific blue.

I would like to audit the landscape of what we currently do in order to then make a decision as to what we might want to do moving forward. This change would likely start at the DS and then reach the DSR and our app. My goal is to reduce the maintenance burden, increase consistency, implement state and status styling across components, and make our form inputs more usable.

Checkboxes

• Default state
  • Hover: Pacific (solid border)
  • Focus: Pacific (dotted outline)
  • Hover and Focus: Pacific (dotted outline and solid border)
• Status (Success, Warning, Error)
  • Hover: Pacific (solid border)
  • Focus: Status color (dotted outline)
  • Hover and Focus: Status color (dotted outline and solid border)

DS	DS

Text input/Text area

• Default state
  • Hover: Pacific (solid border)
  • Focus: Pacific (dotted outline)
  • Hover and Focus: Pacific (dotted outline and solid border)
• Status (Success, Warning, Error)
  • Hover: Dark status color (solid border)
  • Focus: Status color (dotted outline)
  • Hover and Focus: Status color (dotted outline and solid border)

DS	DS

Select

• Default state
  • Hover: Pacific (solid border)
  • Focus: Pacific (dotted outline)
  • Hover and Focus: Pacific (dotted outline and solid border)
• Status (Success, Warning, Error)
  • @meissadia @shindigira - Are the status state styles defined in the DS or DSR

DS

Radio buttons

• Default state
  • Hover: Pacific (solid border)
  • Focus: Pacific (dotted outline)
  • Hover and Focus: Pacific (dotted outline and solid border)
• Status (Success, Warning, Error)
  • @meissadia @shindigira - Are the status state styles defined in the DS or DSR

DS

@meissadia @shindigira - Are the status state styles for select, multi-select, and radio buttons defined in the DS or DSR

• @shindigira @meissadia @anselmbradford

[meissadia]

@natalia-fitzgerald Re: status styles - Radio/Select in DSR do not currently implement a status or state property, so I imagine @shindigira is achieving these styles via DS classes.

[natalia-fitzgerald]

@meissadia
I'm hoping to simplify our styling, starting at the source (DS). The purpose of this issue is to get a better idea of the current state so that I can make a case for greater consistency. I think that using Pacific for hover and focus sounds like a promising solution.

Sigmund opened an ticket for a styling issue with the error status for the Select component.cfpb/sbl-frontend#561

[itsmedavep]

I like the approach of keeping the hover state the same across status'. I believe that helps to keep things consistent while also reducing the amount of styles for the various status.

I guess the only open question in my mind would be what are all of the components the status styling be introduced to.

Is it the list above? Are there additional ones (EG text area)?

Regardless this seems like a good starting point.

[natalia-fitzgerald]

@itsmedavep
Thanks for your feedback. I added text area input to the list at the top.

So the components which should have status states are:

• Checkboxes
• Multiselects
• Radio buttons
• Single selects
• Text inputs
• Text area inputs
• (maybe) Date picker

For the purposes of this initial effort we would prioritize the components which appear in the data submission platform:

• Checkboxes
• Multiselects
• Single selects
• Text inputs

The following do not appear in the data submission platform:

• Text area inputs
• Radio buttons
• Date picker

Another question I have, which is out of scope but related, is whether we may want to consider applying this approach (Pacific hover and focus) to other interactive elements, like buttons and links.

But yes, as a first step I'd like to confirm that this approach is appealing to the team and if so we will begin to update the input components that appear on the data submission platform first.