[meter] Create Meter component

[mj12albert]

Closes: #662

Docs: https://deploy-preview-743--base-ui.netlify.app/components/react-meter/

Demo: https://deploy-preview-743--base-ui.netlify.app/experiments/meter

Summary

• Does not use the meter element due to cross-browser inconsistencies, attributes like optimum actually make the VO experience worse ¹, styling is also annoying ²

• Uses the same anatomy as Progress since they are closely related

• Handles RTL per [core] Use a DirectionProvider to configure text direction (RTL/LTR) #831. Built-in styles on the Indicator use inset-inline-start instead of left/right that automatically account f or this

• Implements the "high/medium/low segmenting" feature from the HTML spec - the high/low props can be used to set the boundaries between the 3 segments, and sets a data-segment attribute indicating which segment the current value falls in. Due to inconsistent and incorrect browser implementations of this feature, we assume the prop value is inclusive ³

• The value of the optimum prop, in combination with segmenting, indicates which segment of the range is "preferred". If the current value is in the preferred segment, a [data-optimum] attribute is set

Footnotes

1. https://www.htmhell.dev/adventcalendar/2022/5/ ↩

2. https://scottaohara.github.io/a11y_styled_form_controls/src/meter/ ↩

3. https://www.ctrl.blog/entry/html-meter-segment-boundaries.html ↩

[mui-bot]

Netlify deploy preview

https://deploy-preview-743--base-ui.netlify.app/

Generated by 🚫 dangerJS against 2eb9b51

[mj12albert]

@colmtuite I've added a demo here with some controls to tweak the value, min, max, low, high and optimum props that define the range represented by the component, and pretty much demos all the features.

The combination of min, max, low, high divides the Meter's range into 3 segments, low (red), medium (yellow), high (green):

A [data-segment='low|medium|high'] attribute is set depending on where the value falls in the range.

The optimum prop defines whether the low, medium, or high segment of the range is "preferable", e.g. for "battery health" higher is better, but for "CPU temperature" lower is better. A [data-optimum] attribute is set when the value is in the "preferable" segment.

NOTE: The corresponding optimum HTML attribute does nothing if the "optimum value" is in the medium segment, while the implementation here does allow the "medium" segment to be "preferable"

[mj12albert]

Updated RTL handling per #831

Added a demo to: https://deploy-preview-743--base-ui.netlify.app/experiments/meter

Instead of using left/right to position the Indicator in the built-in styles, inset-inline-start is used which accounts for text direction and matches our browser support

[michaldudak]

This API feels a bit weird to me, but I understand it reflects the native <meter> element.
I think I wouldn't set the default value for optimum if not provided and not set the data-optimum attribute in this case.

[mj12albert]

Sounds good, it does seem a bit arbitrary anyway

[michaldudak]

Have we considered going beyond the native meter capabilities and allow custom ranges? I can think of a gauge that has a preferable range in the middle. A bit lower and a bit higher would be less preferable (yellow) and the extremes on both sides could be red. The built-in range doesn't support such a scenario (but on the other hand is simpler to use in more common cases)

[mj12albert]

I can think of a gauge that has a preferable range in the middle. A bit lower and a bit higher would be less preferable (yellow) and the extremes on both sides could be red. The built-in range doesn't support such a scenario

@michaldudak This still sounds like a normal numeric range just with different styling?

The "preferable range" is still the middle segment of among 3 segments, sandwiched by 2 non-preferable ranges on each end

And it could be styled with a gradient that goes red (0%) > yellow > green (~middle) > yellow > red (100%)

.indicator {
  background: linear-gradient(to-right, red 0%, yellow 25%, green 50%, yellow 75%, red 100%);
}

[michaldudak]

Well, the whole concept of ranges is about styling, isn't it? I might not want a gradient, but have the whole indicator change color depending on which range the value is in, for example:

.indicator {
  &[data-range-invalid] {
    color: red;
  }

  &[data-range-so-so] {
    color: yellow;
  }

  &[data-range-ok] {
    color: green
  }
}

where invalid, so-so, and ok are names defined by the developer.