Discovery: Grids, Layouts, and CSS Grid

[natalia-fitzgerald]

Background

In this weeks DSR meeting we learned that cf.gov no longer uses the DS grids component and it may be obsolete. The recommendation from the cf.gov team is that these classes should not be used anymore.

https://cfpb.github.io/design-system-react/pr-previews/pr-560/?path=/docs/components-draft-grids--overview

Discovery

• Can we remove the grids component from the DSR?
  • Conduct an audit to see if any CFPB web apps that are built using React use this component.
• What do we do with the layout component?
• Will we replace the layout and grid components with CSS grid?

@anselmbradford @billhimmelsbach @flacoman91 @virginiacc

[natalia-fitzgerald]

I checked the component audit that we did earlier this year #465

It shows that:

• SBL uses the DSR grid and layout components @billhimmelsbach - Can you check if this is accurate?
• Metro 2 uses the layout component - @virginiacc - Can you check if this is accurate?
• CE and CCDB were not using either of these components then. @flacoman91 - Are either of these apps using these components now?

[natalia-fitzgerald]

@virginiacc @billhimmelsbach @flacoman91
Can you provide background on how the layout and grid components are currently used in the apps you maintain?

[billhimmelsbach]

We use both Layout and Grid on multiple pages in SBL @natalia-fitzgerald. We could migrate off of it (it was some of the earliest pages on the site), but we do use it.

Grid
Layout

[virginiacc]

@natalia-fitzgerald It looks like we only use Layout on the guide page in Metro 2, so it would be pretty easy to migrate off.

Layout usage in Metro 2

[natalia-fitzgerald]

Grid

For grid, the SBL examples use the Grid.Wrapper center and Grid.Row within the FilingSteps.

Example of Grid usage in SBL

Layout

For layout, all of the SBL examples use the layout component to build standard pages with the right hand sidebar. <Layout.Main id='main' layout='2-1' bleedbar classes='main-layout'>

Unauthenticated	Authenticated	Paperwork Reduction Act statement	Privacy Notice

[flacoman91]

We aren't using it in CCDB.

In Complaint Explorer, we use it on complaint details and data guide pages. For the login page, it was just raw html, but we have an open PR out to convert it to React, at which time we can migrate it to whatever.