spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard

Published 20 hours ago • verified publisher icon adobe

[ProgressBar][Meter] Side label with multiple words

Open Westbrook opened this issue 5 years ago • 4 comments

Description

Multi-word labelling for ProgressBar and Meter cause the vertical alignment to be weird. Should expanded layout support be added, or should we prevent line breaks, or?

Steps to reproduce

  1. Go to https://opensource.adobe.com/spectrum-css/progressbar.html
  2. Find document.querySelector("body > div.spectrum-Site > div.spectrum-Site-content > div.spectrum-Site-mainContent > div.spectrum-Site-mainContainer > article > article:nth-child(13) > section > div.spectrum-CSSExample-example > div > div.spectrum-FieldLabel.spectrum-FieldLabel--sizeM.spectrum-ProgressBar-label")
  3. Give it a second work in its text.
  4. See alignment in screenshot below.

Expected behavior

It's nice, no matter the content.

Screenshots

image

Environment

  • Spectrum CSS version: "@spectrum-css/progressbar": "^1.0.0-beta.3"
  • Browser(s) and OS(s): all

Additional context

Side label isn't really marketed for Meter should that not be available in that context?

Westbrook avatar Dec 08 '20 17:12 Westbrook

Interesting. Do we just expect the label to never wrap, or do we want to balance the flex-grow between the label and the bar to make it reasonable at all times?

lazd avatar Dec 08 '20 19:12 lazd

In the case that we allow wrapping, we'll also need to decide what to do with the percentage on the other end of the bar. Should it be "top aligned", which makes it look weird next to the bar, or do we made the "middle aligned" which means that it won't align exactly with the label in any way. I'm not sure I have a specific desire as much as I want to be able to say. "this is this way because xyz (with link)."

Westbrook avatar Dec 08 '20 19:12 Westbrook

Interesting. We'll need to ask designers what the intent is here and respond accordingly.

lazd avatar Dec 09 '20 16:12 lazd

@badimon says:

I assume that a side label would wrap the same way with all elements center aligned vertically – good question.

@NateBaldwinDesign says:

Hmm… for this one I would think that it’s got some constraints to avoid wrapping whenever possible :thinking_face: . Like in this example, the meter itself should shrink in order to accommodate or the text. But at the end of the day, wrapping should be there for edge cases. And for that I’d recommend we align the text vertically center so that the label on the right doesn’t look so misplaced when the left label is wrapped.

Looks like we have some work to do here.

lazd avatar Dec 10 '20 18:12 lazd