base-ui
base-ui copied to clipboard
[meter] Create `Meter` component
Closes: https://github.com/mui/base-ui/issues/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 likeoptimum
actually make the VO experience worse ^1, styling is also annoying ^2 -
Uses the same anatomy as
Progress
since they are closely related -
Handles RTL per https://github.com/mui/base-ui/issues/831. Built-in styles on the
Indicator
useinset-inline-start
instead ofleft
/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 adata-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 ^3~ -
~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~