[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
• 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
• Handles RTL per [core] Standardize text direction (RTL/LTR) handling #831. Built-in styles on the Indicator use inset-inline-start instead of left/right that automatically account f or this

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 fcc0441

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

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