Upgrade trussworks/react-uswds v9 and uswds v3.8

[emyl3]

FRONTEND PULL REQUEST

• Resolves Upgrade Trussworks to version 9  #7537

Changes Proposed

• Upgrades @trussworks/react-uswds to 9.0.0 and @uswds/uswds to 3.8.0
• Added a dev dependency focus-trap-react that is now required by @trussworks/react-uswds.

Additional Information

As discussed here, the disabled state styling has changed.

Before

After

Testing

• Smoke test parts of the app that are using components from @trussworks/react-uswds
• Deployed on dev2

Screenshots / Demos

[fzhao99]

💪

[mpbrown]

LGTM! Nice work on resolving this upgrade!

[emyl3]

@fzhao99 @mpbrown Just noticed a change in the button styles causing some buttons with icons to look different 😓 Sorry about that! Will fix that up and re-request review!

[emyl3]

@fzhao99 @mpbrown @bobbywells52 Ready for re-review (Sorry for making you review it twice) and is being deployed on dev6!

[emyl3]

As requested by @fzhao99, (the "after" images are after the fix went in place to set the column-gap prop to 0).

Before - tool tipicon

After - tooltip icon

Before - language toggle

After - language toggle

Before - add another button

After - add another button

[mpbrown]

I noticed the disabled state for the checkboxes on the facility access component don't necessarily seem like they make it clear that these mean they are selected (comparing these two screenshots below) Are we good on the new design for this or should be override this Trussworks/USWDS change?

[mpbrown]

As requested by @fzhao99, (the "after" images are after the fix went in place to set the column-gap prop to 0).

@emyl3 not sure if I'm just noticing it but could you highlight what you mean by the differences in those screenshots?

[emyl3]

I noticed the disabled state for the checkboxes on the facility access component don't necessarily seem like they make it clear that these mean they are selected (comparing these two screenshots below) Are we good on the new design for this or should be override this Trussworks/USWDS change?

OOO nice catch -- will investigate this!

[emyl3]

As requested by @fzhao99, (the "after" images are after the fix went in place to set the column-gap prop to 0).

@emyl3 not sure if I'm just noticing it but could you highlight what you mean by the differences in those screenshots?

There shouldn't be much of a difference the "after" images. They should look nearly the same since I had to add a class to buttons with icons since the buttons for the upgraded version introduced a new css property of column-gap set to .5rem. With the css class, I set that column-gap to 0 to remove the extra spacing between the icon and button text. Hope this makes sense 😅

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[emyl3]

@mpbrown Removing this should have fixed it! Thank you for catching that!
screenshot of dev6

[fzhao99]

lgtm! Thanks for your work on this :)