search

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
61 stars 64 forks source link

[Design]Update Alert spacing in Figma #3231

Closed babsdenney closed 3 weeks ago

babsdenney commented 2 months ago

Description

We are finding some discrepancies in spacing between the alert in Figma and in code. The 320px content section in Figma is 184px and the content width in code is 234px. We need to update Figma so that the content spacing is the same as in code.

Look through all the different variations to make sure that Figma is aligned to what is in the USWDS and the VADS. There are many variations of the alert. You have the dismissible alert, the expandable alert, the slim alert, and more. The alerts have different spacing depending on the variation. Fix the alert in Figma so that the spacing aligns with the spacing in code.

Details

Tasks

Acceptance Criteria

image image

https://github.com/user-attachments/assets/27e7a199-ab4e-40bf-86d1-9b9a0edaad0e

caw310 commented 2 months ago

Hey team! Please add your planning poker estimate with Zenhub @babsdenney @danbrady @LWWright7

LWWright7 commented 3 weeks ago

Here are the items that were updated after an audit of the USWDS site:

  1. The right padding for an alert with no close icon was incorrect in Figma, changed to 16 px per code on Storybook (fixed for both mobile and desktop): (this IS the correct padding for an alert WITH a close icon, FWIW) Image Image Image Image Image

  2. The left padding between the icon and the left rule line was incorrect in Figma, changed it to 16 px per code on Storybook: Image Image Image

  3. The padding around the close icon (x) was incorrect in Figma. It should be 16 px all the way around. Image Image Image

  4. For mobile screen size, in the alert with no close icon (x), the content area was slightly smaller than it should have been in Figma. Was updated to 249.34 px Image Image

  5. For the slim alert, in the alert with no close icon (x), the content area was slightly smaller than it should have been in Figma. Was updated to 257.34 px Image Image

  6. For the slim alert, in the alert with a close icon (x), the content area was slightly smaller than it should have been in Figma. Was updated to 216.34 px Image Image

  7. The close icons were all too close to the right hand bounding box. Instead of 16 px around the entire icon, there was 16 on the top, but only 8 on the right hand side. This was updated on all instances with the close icon. Image Image

The one item that was not able to be fixed is that on the XL Desktop screen size there is another added margin that pushes the content of the alert further to the right. Initially I believed that the content was centered in the extra wide alert space, but as you can see there is a 244 px margin on either side of the content area. The only way I would know to solve this would be to create a 3rd size within the component to account for this extra padding: Image Image Image

LWWright7 commented 3 weeks ago

@babsdenney & @danbrady this is ready for review!

caw310 commented 3 weeks ago

This will carry over because review is not done.

LWWright7 commented 3 weeks ago

@danbrady & @babsdenney Please let me know when this one is good so I can publish the updates in the Component Library. Thanks! :)