New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
66753 Adjustments for Formation base font-size change #1096
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
v3 components are looking good so far! Amazing progress with all of this!
I just had a question about the color token that was removed and also we will want to re-run the Chromatic visual diff when the v1 rem
adjustments are added.
Can you also double check for rem
values in the Storybook files like here and adjust any of those values too?
@@ -4177,20 +4177,5 @@ | |||
"path": [ | |||
"uswds-system-color-mint-cool-50" | |||
] | |||
}, | |||
"uswds-system-color-red-cool-10v": { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious why this color needed to be removed? Is it cleanup from a previous tokens ticket we had been working on?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes its cleanup, the build was failing because this variable didn't exist in USWDS. It needed to be "uswds-system-color-red-cool-vivid-10"
Thanks @powellkerry, I'll review the text size differences. However, I'm seeing some other differences in the left margin/padding in process list. It might be in other components, but I'm thinking it would be the same issue. |
Just a heads up that I noticed that Progress Bar - Segmented (USWDS) diff with last build seems to be missing. (Unless I'm just not seeing it?) CC @jamigibbs |
…for current storybook intro page
@danbrady For the process-list padding, it looks like those padding styles are coming from USWDS. This is another one of those instances where the formation_overrides file included some custom VA styles. Should we create an override in process-list.scss to make it consistent with what we had or should we adopt what USWDS has? I did notice that there is a margin left style from formation on the Let me know what the course of action is for this. |
@powellkerry Oh really? Darn, I was hoping custom stuff didn't sneak in there. If we need to move those styles into the component now, then we should do that. But ideally all styles would just be coming from the USWDS modules. |
I noticed that our Process List numbers render out to 23.36px but USWDS is 21.28px. Shouldn't these be pretty close if not equal? |
FYI: Left a few comments and questions in Chromatic. |
…s in uswds-error-border.scss
…tment-of-veterans-affairs/component-library into 66753-formation-typography
…tment-of-veterans-affairs/component-library into 66753-formation-typography
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Approving for pre-release
Chromatic
https://66753-formation-typography--65a6e2ed2314f7b8f98609d8.chromatic.com
Description
Adjustments to components and heading font-sizes due to the base font-size changing in Formation. These changes include the removal of the formation_overrides.scss file.
Component updates were made in the following:
* Visual differences were noticed, but they seem to align with USWDS. A designer should review to decide which version is correct. These differences include a slightly larger size in font for the number bubbles.
Closes department-of-veterans-affairs/vets-design-system-documentation#2566
QA Checklist
Screenshots
Component font differences that now align better with USWDS:
Acceptance criteria
Definition of done