Skip to content

[meter] Add Meter component#1435

Merged
mj12albert merged 18 commits intomui:masterfrom
mj12albert:feat/meter
Apr 8, 2025
Merged

[meter] Add Meter component#1435
mj12albert merged 18 commits intomui:masterfrom
mj12albert:feat/meter

Conversation

@mj12albert
Copy link
Member

@mj12albert mj12albert commented Feb 10, 2025

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

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

Summary

  • Does not use meter element due to numerous cross-browser inconsistencies 12
  • Same anatomy and API as Progress since they are closely related, e.g. Value subcomponent, format prop
  • Has a locale prop to match [number field] Add locale prop #1488

Closes #662

Footnotes

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

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

@mj12albert mj12albert added type: new feature Expand the scope of the product to solve a new problem. component: meter Changes related to the meter component. labels Feb 10, 2025
@netlify
Copy link

netlify bot commented Feb 10, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 60c409c
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/67f4d5a1015f990007f8a75b
😎 Deploy Preview https://deploy-preview-1435--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@mj12albert mj12albert marked this pull request as ready for review February 10, 2025 10:58
@mj12albert

This comment was marked as outdated.

@oliviertassinari oliviertassinari changed the title [Meter] Add Meter component [meter] Add Meter component Mar 1, 2025
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 5, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 6, 2025
});

namespace MeterRoot {
export type State = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if it's necessary to have these in state. They come directly from props.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, it's really just for consistency but they don't generate a data attr, other components probably don't need this in the state either

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in 60c409c

Comment on lines +59 to +61
'aria-valuenow': percentageValue / 100,
'aria-valuetext': getAriaValueText
? getAriaValueText(value)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These could be rounded so they don't include too many decimals (or even any at all).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed ~ it should actually be getAriaValueText(formattedValue, value) here to match the Value's children function

@colmtuite
Copy link
Contributor

@mj12albert

  • Add box-sizing: border-box to the boxes
  • Remove the border-radius
  • Set the height to 8px (computed)
  • Change the track background to the var(--color-gray-100) variable used in other components.

@mj12albert
Copy link
Member Author

  • Add box-sizing: border-box to the boxes
  • Remove the border-radius
  • Set the height to 8px (computed)
  • Change the track background to the var(--color-gray-100) variable used in other components

Updated and added the tailwind version:

image

@mj12albert mj12albert merged commit 54fd035 into mui:master Apr 8, 2025
22 checks passed
@mj12albert mj12albert deleted the feat/meter branch April 8, 2025 08:18
michaldudak pushed a commit to michaldudak/base-ui that referenced this pull request Apr 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: meter Changes related to the meter component. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[meter] Implement Meter

3 participants