search

adobe / spectrum-css

The standard CSS implementation of the Spectrum design language.
http://opensource.adobe.com/spectrum-css/
Apache License 2.0
1.19k stars 194 forks source link

[ProgressBar][Meter] Side label with multiple words #1088

Open Westbrook opened 3 years ago

Westbrook commented 3 years ago

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

Additional context

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

lazd commented 3 years ago

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?

Westbrook commented 3 years ago

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)."

lazd commented 3 years ago

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

lazd commented 3 years ago

@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.