Standardize the tab component

[natalia-fitzgerald]

Description

Although the tab component is used across multiple CFPB products, we don't currently have a consistent and reusable component. The goal of this ticket is to audit the current implementations and come up with a standard and consistent approach that can be used across products.

Scope of work

• Audit the current use cases across Metro 2, CCDB, and Complaint Explorer
• Compare the code and design mock-ups
• Reconcile differences
• Standardize the component styling - In progress
• Build out the component in code using the refined styles
• Add the component to the DSR as a draft and refine further
• Test out in the products that use the component
• Once we have the component well-defined propose adding it to the CFPB Design System
  • Will require writing the page content (usage guidelines, etc.)

[natalia-fitzgerald]

Process

@virginiacc and I met and conducted an audit of the existing tab component on Metro 2, Complaint Explorer, and CCDB. We inspected the styling in the code the Figma mock-ups. There were inconsistencies but no meaningful differences. The next step is to reconcile the differences.

Complaint Explorer	Metro 2	Consumer Complaint Database

Complaint Explorer	Metro 2

Styling audit

Complaint Explorer (code)

Active/Selected

• Text: Heading 4, Black
• Hover and Focus: Link underline but text doesn't change
• Need to define styling

Tab

• Border: Gray 40 --- Need to reconcile
• Background: Gray 5
• Padding: 30, 8, 30, 8

Enabled


• Text: Heading 4, Pacific, Dotted underline
• Hover and Focus: Link styling --- Need to reconcile

Tab

• Fill: White
• Border (bottom): Gray-40 --- Need to reconcile

Metro 2

Active/Selected

Text

• Text: Heading 4, Black
• Border (underline): Black

Tab

• Border: Gray 30 (Code)
• Background: Gray 5
• Padding: 30, 8, 30, 8 (code)
• Padding: 16, 8, 16, 8 (Figma)
  

  Enabled (Not active/not selected)

Text

• Text: Heading 4, Black

Tab

• Border: None

[natalia-fitzgerald]

Reconciling the differences

@keelerr @ielerol and I met to discuss the component differences, similarities, and reconcile any inconsistencies. We agreed that the tab component is a form of in-page navigation and should therefore receive styling that gives it more prominence than a basic link. We discussed pulling some cues from navigation styling but ultimately landed on using an H4 heading and pulling in color cues from links for the state styling.

Standard styling (in progress)

Reconciled styling and areas to define:

Active/Selected

• Text: Heading 4, Black (has been reconciled)
• Focus: Dotted Pacific Border
• Hover: Needs to be defined (currently gets a dotted Pacific underline but this seems odd)

Enabled (Not active/not selected)

• Text: Heading 4, Pacific (has been reconciled)
• Focus: Link styling for color and underline (has been reconciled)
• Hover: Link styling for color and underline (has been reconciled)

Tab (Active/Selected)

• Background: Gray 5 (has been reconciled)
• Border: 1px, Gray 40 - This matches the color we use for divider lines and wells so makes sense
• Padding: 30, 8, 30, 8 --- double check this

Open questions:

• Hover and focus states for active tab
• Try out set padding values but assess once in code (Padding: 30, 8, 30, 8)
• Figure out where in the code the divider line that runs along the length of the tab component should live
• Note: Consumer Complaint Database (CCDB) uses a white background for the active state and gray for inactive. I will check whether changing them to the standard component would be problematic. I'd ideally rather not have two versions of the component.

Tagging for awareness:
@virginiacc @flacoman91