base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

[meter] Create `Meter` component

Open mj12albert opened this issue 4 months ago • 3 comments

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 like optimum 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 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 ^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~

mj12albert avatar Oct 17 '24 14:10 mj12albert