Pulling out an idea from PR #3218 into a follow up issue.
Trying to think of a way to join the label and value text so there's something more semantic tying them together rather than just proximity...
I'm thinking maybe a <dl> might work? A DOM structure like this maybe:
<dl>
<dt>Men's clothing</dt>
<dd>80%</dd>
<dd aria-hidden="true"><progress /></dd>
</dl>
If we introduced an extra prop for how to render the wrapping element, we could even extend this to better work with a whole list of these like in the demo. Something like:
<dl>
<EuiProgress as="div" value={20} label={"Men's clothing"} max={100} />
<EuiProgress as="div" value={20} label={"Women's clothing"} max={100} />
<EuiProgress as="div" value={20} label={"Women's shoes"} max={100} />
<EuiProgress as="div" value={20} label={"Men's shoes"} max={100} />
</dl>
Where as changes the wrapping <dl> of each <EuiProgress /> to a <div> so that we can create one list of progress bars, instead of n lists. (Maybe as is too vague and broad given that <div> is probably the only valid value, but just throwing out an idea.)
Pulling out an idea from PR #3218 into a follow up issue.
Trying to think of a way to join the label and value text so there's something more semantic tying them together rather than just proximity...
I'm thinking maybe a
<dl>might work? A DOM structure like this maybe:If we introduced an extra prop for how to render the wrapping element, we could even extend this to better work with a whole list of these like in the demo. Something like:
Where as changes the wrapping
<dl>of each<EuiProgress />to a<div>so that we can create one list of progress bars, instead of n lists. (Maybe as is too vague and broad given that<div>is probably the only valid value, but just throwing out an idea.)