-
-
Notifications
You must be signed in to change notification settings - Fork 49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[meter] Create Meter
component
#743
base: master
Are you sure you want to change the base?
Conversation
Netlify deploy preview |
d8734f9
to
e927c2d
Compare
e7386f8
to
395484a
Compare
c63f06d
to
5bbda04
Compare
@colmtuite I've added a demo here with some controls to tweak the The combination of A The NOTE: The corresponding |
307db4c
to
cd70734
Compare
6c377dc
to
34bb2bd
Compare
78622dc
to
016893e
Compare
016893e
to
31833d5
Compare
31833d5
to
8ac5427
Compare
19609c6
to
29b2e9d
Compare
b181917
to
28e7e8b
Compare
Updated RTL handling per #831 Added a demo to: https://deploy-preview-743--base-ui.netlify.app/experiments/meter Instead of using |
28e7e8b
to
fcc0441
Compare
min?: number; | ||
/** | ||
* Indicates the optimal point in the numeric range represented by the component. | ||
* If unspecified, it will fall back to the midpoint between `min` and `max`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good, it does seem a bit arbitrary anyway
} | ||
|
||
namespace useMeterRoot { | ||
export type Segment = 'low' | 'medium' | 'high'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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%);
}
fcc0441
to
a4e3491
Compare
6d0995a
to
17f2596
Compare
17f2596
to
3e8ad95
Compare
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
meter
element due to cross-browser inconsistencies, attributes likeoptimum
actually make the VO experience worse 1, styling is also annoying 2Progress
since they are closely relatedhigh
/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 3optimum
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 setDirectionProvider
to configure text direction (RTL/LTR) #831. Built-in styles on theIndicator
useinset-inline-start
instead ofleft
/right
that automatically account f or thisFootnotes
https://www.htmhell.dev/adventcalendar/2022/5/ ↩
https://scottaohara.github.io/a11y_styled_form_controls/src/meter/ ↩
https://www.ctrl.blog/entry/html-meter-segment-boundaries.html ↩