Update Figma components based on USWDS 3.9.0 update

[danbrady]

Description

Updating VADS to USWDS 3.9.0 introduced some minor visual changes to a several components (all variations):

• alert
• banner
• pagination
• prefill alert

View Chromatic UI Tests build 1760 for visual diffs.

Tasks

• Designer should use devtools to inspect the web component for actual values.
• Update the figma components identified
• Publish the figma component updates

Acceptance Criteria

• In a new Figma file, place instances of all components identified onto the canvas.
• Validate this file has the latest version of the component library.
• Inspect those component instances to validate they match the web components

[LWWright7]

@danbrady @babsdenney - This one is ready for review.

Updated the spacing on the alert / banner / prefill alert but note that it uses an odd spacing (not based on 8) of 20. Since the autolayout already has 8px of padding I added another 12 to the left side of the container to make the padding match the 20 of USWDS

[danbrady]

Hey @LWWright7, I finally got around to checking this out. This is what I noticed:

Alert

• In slim the close button overlaps the text. That may not be from this update, but let's fix it up if we're going to publish:
  

• Can we straighten up the variations? There's some odd white space and staggering going on:
  

• I see older Alert release notes on the component page but not in the change log. Were they ever published?

• Missing release notes for this ticket. "Update designs to match USWDS 3.9.0" is good enough.

Pagination

• Next and previous links are missing underlines
• Missing release notes for this as well. (Please do that for any components updated that will need to be published.)
• I see a lot of variations for mobile, but I'm not sure those should be published? @babsdenney do you know?

Thanks all!

[LWWright7]

@danbrady @babsdenney The suggested updates in Figma and from the comments above have been made and this is ready to be reviewed again.

[danbrady]

@LWWright7 Are we able to fix the overlapping close button in Alerts?

In pagination it looks like the default and active pages are positioned differently:

Thanks!

[LWWright7]

@danbrady You're totally right about the pagination alignment. This should be fixed now.

And I thought I had fixed the slim version overlap with close button initially, but I saw that if one adjusts the size of the box there were still some breakpoints where there was an overlap. So I fudged with it this morning but am still having some issues. I may ping you to ask for some help if I can't figure it out. It's defiantly giving me fits :(

[danbrady]

@LWWright7 Pagination looks good now. Do we know the status of the mobile variations though? They are not currently published, but I'm not sure if they should be? I know we were working with USWDS a bit on them. @babsdenney, do you know the status of these? (I don't want them to get accidentally published if they're not ready.)

Regarding the toggleable close button, how do we handle it in the normal (non-slim) Alert? We can probably do it the same way, right?

[LWWright7]

@danbrady Good point about the mobile pagination. @babsdenney Please let me know if these mobile versions should be published.

@danbrady - I think I got the slim closable version figured out!! :) It took some finagling but it should be working as intended now!

[LWWright7]

This ticket is carrying over because of some issues with the pagination component that were not sorted out and approved before the end of the sprint.

Alert has been updated and published.