Skip to content

[EuiProgress] Add semantic structure to label and value #3678

@myasonik

Description

@myasonik

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions