GSA / touchpoints

Feedback platform for continuous improvement of systems, services, processes, and policy.
https://touchpoints.digital.gov
Other
48 stars 25 forks source link

Introduce USWDS theming and upgrade to USWDS 3.8. #1425

Closed sanason closed 4 months ago

sanason commented 4 months ago

This PR does 2 things:

  1. Updates the version of USWDS we are using from 3.6.1 to 3.8. This will give us access to a new sticky table header feature which we can use for https://trello.com/c/7f3i1ylK/79-when-a-table-is-longer-than-viewport-table-header-row-stays-visible-on-scroll.
  2. Adopts a somewhat more formal procedure for upgrading and customizing USWDS in our project (documented in the README).

Number 2 is just a proposal, from a brand new member of the team who has no context on why things are done the way they are done so, reviewers, feel free to criticize. That said, I think the new procedure offers these benefits:

Testing

Did the upgrade to 3.8 break anything in the Touchpoints app? Did the upgrade to 3.8 break anything in the display of questionnaire forms?

No changes that I can see. The only breaking change listed (in 3.8) concerns the class usa-layout-docs__sidenav which, as far as I can tell, we aren't really using.

Do our tables look the same after using the theme-table-border-color setting to customize their appearance?

Yes, borders look the same.

sanason commented 4 months ago

Follows the "approved" approach for customizing USWDS (by adjusting the settings provided by the framework) which makes our customizations less likely to break when USWDS is updated.

Here's an example of customizations being broken: Originally, I upgraded to 3.8 simply by copying over the new versions of uswds.js and uswds.css. Then I added the new class usa-table--sticky-header to the list-of-forms table and got this result:

Screenshot 2024-05-23 at 3 24 40 PM

The new class added a border to the table and, since we weren't setting theme-table-border-color, we ended up with a black border.