search

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

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

Progress indicator - segmented text too large #3116

Open jeana-adhoc opened 2 months ago

jeana-adhoc commented 2 months ago

Bug Report

What happened

The progress bar - segmented component doesn't match the sizing listed in USWDS.

What I expected to happen

The desktop size of the text in the progress bar should be an h3 size and reduce to an h4 size at the 640 breakpoint

Reproducing

Steps to reproduce:

  1. Load a form, or storybook and inspect the stepper
  2. Compare to USWDS

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

Details

With the minimal header in place, the stepper is visually too prominent on the page. When looking into this with @humancompanion-usds the stepper text seems to be too large on default. Matching USWDS only brings it down 2 px. My personal ideal would be that the mobile size (1.13rem would be default for desktop as well).

humancompanion-usds commented 2 months ago

@caw310 - This is a regression bug in the v3 Progress Indicator. Thus I'd like to get this fixed after the Labor Day milestone. Thanks.

caw310 commented 2 months ago

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc

jeana-adhoc commented 2 months ago

For further comparison. The figma sizes show what I would expect on the web.

Figma

image

Staging

image
jamigibbs commented 2 months ago

We discussed this in Slack previously about the font size difference between the USWDS docs site and the USWDS Storybook site for va-segmented-progress-bar.

Here is Slack convo:

https://dsva.slack.com/archives/C01DBGX4P45/p1716408842337749?thread_ts=1716404310.941159&cid=C01DBGX4P45

What we decided at the time is that we would continue to inherit the font-size values that the USWDS component module is providing us which matches their Storybook example. We would not be overriding the font just so that it would match the docs site.

If Figma has already been updated to match the Storybook example, I don't believe there is any update we need to make here. Can you confirm @danbrady?

danbrady commented 2 months ago

@jamigibbs Yep, here's all different incarnations in their current state:

Mobile Desktop
Figma 18.08px 23.36px
Web Component 18.08px 23.36px
USWDS Storybook (v3) 18.08px 23.36px
USWDS Doc site (v2) 18.08px 21.28px

So all our assets are in sync and do match USWDS code. I believe their doc site isn't using the latest code, that's why there's a discrepancy there. (We submitted an issue about this.)

@jeana In Figma, there is a Device property in the Header Area that selects mobile/desktop text size. Confirm you're using the right size for your design.

From the slack thread:

OK, then go with that - go with Storybook. File an issue on the wrapping (or better yet, file an issue for us to fix it and then we can submit the fix to them)

@humancompanion-usds Can you confirm the direction? I understand this to mean:

  1. "Go with storybook" means match storybook, which we do.
  2. File a feature request to USWDS for a smaller desktop font size for the title so it wraps less often
  3. Update our figma/code to use a smaller desktop font size
  4. Submit a PR to the USWDS to address issue from #2
danbrady commented 1 month ago

@humancompanion-usds Gentle nudge to confirm your direction on this issue.

humancompanion-usds commented 1 month ago

@danbrady - I pinged Dano on the bug you filed. Hold until we talk to USWDS next and get clarity. This is not a burning fire.