feat(BBBSlider): add slider component - #85
Merged
Merged
Conversation
The library has no slider, so every range control in BigBlueButton
ships its own: the camera modal drives brightness with a raw
`input[type=range]` plus hand-positioned markers, while the profile
panel uses a bare MUI `Slider` with local `styled()` overrides. The
two disagree on range, on styling and on how the value is announced.
Add `BBBSlider`, a horizontal single-thumb wrapper around MUI's
`Slider`, so those call sites collapse onto one control. Its
appearance matches what the profile panel renders today — MUI's
defaults carrying the brand colour — so adopting it changes no pixels
there.
Three things are handled by the wrapper rather than left to callers,
because MUI gets them wrong by default in this context:
- `id` and `aria-describedby` are routed into the hidden range input
through `slotProps.input`. MUI puts unrecognized props on the root
`<span>`, which makes `<label htmlFor>` associate with nothing and
silently strands the description on a non-focusable element.
- Right-to-left takes three separate repairs. The ambient direction is
read from the DOM and re-provided to MUI through `ThemeProvider`,
since `useRtl()` defaults to false and the client sets no theme
direction. That switches MUI to right-anchored positioning but not
the transforms paired with it, which normally come from an emotion
cache running `stylis-plugin-rtl`, so the thumb and the marks are
mirrored here instead — without it every one of them sits a full
element width off and the thumb detaches from the track. The numeric
labels also carry `unicode-bidi: plaintext`, without which a leading
minus is reordered and `-100` paints as `100-`. `ThemeProvider`
comes from `@mui/material/styles`, not `@mui/system`, so the context
is the same module instance that renders the slider.
- The public props narrow MUI's `number | number[]` value and handlers
down to `number`, and drop `orientation`, so the single-thumb
horizontal scope is enforced by the types.
Two props cover what the call sites need beyond MUI's own API:
`showMarkTicks` keeps mark labels while hiding their tick dots, which
is what the camera modal's -100/0/100 scale needs, and `animate`
turns off every transition and hover effect. The keyboard focus ring
survives `animate={false}`, since removing it would leave the control
with no visible focus state.
The README covers the two usage patterns the component was designed
for — a value the user reads (volume) and one they only feel
(brightness) — along with the rules that are easy to get wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Adds
BBBSlider, a horizontal single-thumb slider wrapping MUI'sSlider, styled from the library's design tokens.Why
BigBlueButton has four ad-hoc range controls today: the camera modal's brightness (a raw
input[type=range]with hand-positioned markers), the profile panel's brightness (a bare MUISliderwith localstyled()overrides) and two volume sliders. They disagree on range, styling and accessibility. This component is meant to replace the two brightness ones — migrating them is not part of this PR, since it needs a release first.What it does beyond wrapping MUI
idandaria-describedbyinto the hiddeninput[type=range]. MUI leaves them on the root<span>, which makes<label htmlFor>associate with nothing and strands the description on anon-focusable element.
ThemeProvider, mirrors the transforms MUI leaves left-to-right (that half normally comes fromstylis-plugin-rtl, which a component library can't install for its host), and isolates numeric labels withunicode-bidi: plaintextso-100doesn't paint as100-.number | number[]value and handlers tonumberand dropsorientation, so 'horizontal, single thumb" is enforced by the type system rather than by documentation.API
label,helperText,value/defaultValue,onChange/onChangeCommitted,iconStart/iconEnd,valueLabelDisplay,showMarkTicks,animate,id,dataTest,ariaLabel/ariaLabelledBy/ariaDescribedBy, plus MUI's own (min,max,step,marks,disabled,valueLabelFormat,getAriaValueText).Names follow what already exists:
iconStart/iconEndfromBBButton,animatefromBBBSpinner,label/helperTextand their typography fromBBBToggle.How to review
npm run storybook→ BBBSlider, 11 stories. The ones worth opening areRightToLeft,MarksWithoutTicks,OffsetFormatandWithoutAnimation.npm run lint,npx tsc --noEmit -p tsconfig.jsonandnpm run buildare clean.Not included
Migrating the BigBlueButton call sites, an on-dark variant for the volume sliders (their toolbar is dark and their leading icon is a clickable mute button), and clickable icons.
Closes
Closes #84