Sass Deprecation Upgrade Testing

[rfultz]

Summary

What we're after:
Now that the Sass deprecation warnings PR #6422 is ready, we'll need to focus some time on testing the various sizes and states of, well, everything.

Required reviewers

• anyone who'd like to scour for visual changes

Screenshots

Should be zero visual changes

Vivaldi lets me tile tabs horizontally

and vertically

Related PRs

None

How to test

Tip: Vivaldi lets me tile tabs to view them next to each other. I don't know if Chrome, Firefox, or Safari know how.

We're looking for visual differences in…

• each type of template across every width (no real reason to check more than 1-2 pages that use the same template unless those pages include different components)
• components specific to those templates (filters for datatables & legal, widgets under /data/, etc), across every width
• each state of those components (error states, selected states, hovers, etc) across widths

Broad categories
The entire front-end could be changes, but most changes hit mixins and seemed to mostly fall on:

• column widths and offsets (like 2 columns, -1)
• icons, especially on buttons
• line breaks/wraps and spacing between elements

Details

• Check components (see this comment for list). There should be zero visual differences.
• Pages/templates I've reviewed across widths, which I'd like to have others try to break
  • Homepage
  • About - FEC
  • About - Leadership
  • About - Org chart (Names and titles could be outdated but style should be right)
  • Contact analyst
  • Contact
  • Data landing
  • Data - browse
  • Data - election search
  • Data - elections - House
  • Data - elections - President
  • Data - presidential map
  • Data - raising by the numbers
  • Data - receipts / datatables
  • H4CC
  • Legal - admin fines calculator
  • OIG
  • Search
• Other unique types—or areas—of pages
  • Others I've forgotten
  • Others?
  • More?

[patphongs]

Components list

**Components listed here are from the pattern library. They are linked to the pattern library for examples only, make sure to check the visual styling on the actual development environment to ensure they look correct.

• Accordions(Pat)

• Breadcrumbs (Pat)

• Buttons

  • Basic (Pat)
  • Icons (Pat)
  • Sizes (Pat)

• Callout (Pat)

• Cards

  • Horizontal cards (Pat)
  • Vertical cards (Pat)
  • Major cards (Pat)

• Committee status (Pat)

• Contact items (Pat)

• Documents (Pat)

• Examples

  • Example form (Pat)
  • Example image (Pat)
  • Example paragraph (Pat)

• Feed

  • Single category feed (Pat)
  • Multiple category feed (Pat)

• Figures (Pat)

• Filter tags (Pat)

• Filter Validation

  • Success (Pat)
  • Error (Pat)

• Checkboxes

  • Multiple (Pat)
  • Standalone (Pat)

• Radio buttons (Pat)

• Dropdowns

  • Single select (Pat)
  • Multi select (Pat)
  • Multi select with suggestions (Pat)

• Toggle Button

  • Horizontal (Pat)
  • Vertical (Pat)

• Cycle select (Pat)

• Range

  • Range (Pat)
  • Range: limited (Pat)

• Search

  • Type-ahead only (John)
  • Type-ahead and free text (John)
  • Free text only (John)
  • Free text with boolean logic (John)

• Footer (John)

• Header (John)

• Heroes (John)

• Icon headings (John)

• Loading overlay (John)

• Messages

  • Sizes (John)
  • Informational (John)
  • Success (John)
  • Warning (John)
  • Error (John)
  • No results (John)

• Option components (John)

• Pagination

  • Data pagination (John)
  • Feed pagination (John)

• Resource Bar

  • Sidebar (John)
  • Endbar (John)

• Secondary Navigation

  • Side navigation (John)
  • Inpage navigation (John)

• Slabs (John)

• Tables

  • Simple table (John)
  • Dense table (John)
  • Custom table (John)
  • Chart table (John)
  • Balance sheet table (John)
  • Data table (John)

• Tooltips (John)

[rfultz]

The PR's merged! 🎉