Slider value unset#4173
Conversation
|
Warning Review limit reached
Next review available in: 9 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
📝 WalkthroughWalkthroughAdds an unset state to ChangesSlider unset/clear feature
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant limel-slider
participant Translations.get
participant ChangeEvent
User->>limel-slider: click clear button
limel-slider->>limel-slider: handleClear()
limel-slider->>limel-slider: enterUnsetState()
limel-slider->>ChangeEvent: emit change(NaN)
limel-slider->>Translations.get: resolve localized labels
limel-slider->>limel-slider: focus range input
User->>limel-slider: change range value
limel-slider->>limel-slider: exit unset state
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-4173/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/slider/slider.tsx`:
- Around line 103-110: The slider’s new language prop is not demonstrated in the
examples, so add a `language` example to the slider documentation/demo so users
can see how `Slider` uses `language` to localize accessible labels. Update the
slider example content alongside the `language` prop in `slider.tsx` (and any
related docs/demo entry) to show a non-default language and the resulting
translated labels.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 276aaa4c-b5de-497f-9f43-9e9ec86cb3b2
⛔ Files ignored due to path filters (1)
etc/lime-elements.api.mdis excluded by!etc/lime-elements.api.md
📒 Files selected for processing (14)
src/components/slider/examples/slider-basic.tsxsrc/components/slider/examples/slider-unset.tsxsrc/components/slider/partial-styles/_thumb.scsssrc/components/slider/slider.scsssrc/components/slider/slider.spec.tsxsrc/components/slider/slider.tsxsrc/translations/da.tssrc/translations/de.tssrc/translations/en.tssrc/translations/fi.tssrc/translations/fr.tssrc/translations/nl.tssrc/translations/no.tssrc/translations/sv.ts
Consolidated Review —
|
Kiarokh
force-pushed
the
slider-value-unset
branch
2 times, most recently
from
ac93ecd to
74e0ae9
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/slider/slider.spec.tsx`:
- Around line 1-181: The slider spec in limel-slider lacks coverage for the new
language prop, so add tests in the existing “unset state” and “clear button”
areas of slider.spec.tsx that pass language: 'sv' through setup and assert
translated strings for rangeInput(root).getAttribute('aria-valuetext') and
clearButton(root).getAttribute('aria-label'). Use the current translation
sources to verify the expected Swedish text, and keep the assertions alongside
the existing English-language checks so the behavior of the language prop is
covered.
In `@src/components/slider/slider.tsx`:
- Around line 109-113: The JSDoc on the Slider component’s value prop describes
null and undefined as valid unset inputs, but the public type on value is only
number. Update the documentation in slider.tsx to match the actual TypeScript
contract by either removing null and undefined from the comment or widening the
value prop type if those inputs are intended; keep the guidance around NaN as
the supported programmatic unset path and ensure the comment on the value
property remains consistent with the Slider API.
- Around line 146-166: `percentageClass` is being set to `undefined` by the
unset-state flow, but it is still declared as a plain `string` in `slider.tsx`.
Update the `@State()` declaration for `percentageClass` to allow `undefined`,
and make sure the assignments in `enterUnsetState` and `setPercentageClass`
remain consistent with that type so strict null checks pass.
In `@src/global/translations.ts`:
- Around line 27-28: Update the fallback comment in translations logic so it no
longer uses nb as an unmapped example, since the Languages mapping now aliases
it. Adjust the wording near the fallback handling to reference a truly unmapped
browser locale such as en-US, or remove the example entirely, and keep the
explanation aligned with the existing translation fallback behavior in the
related mappings and lookup code.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: fb84f237-a839-495e-bb11-e6c8c9cbd042
⛔ Files ignored due to path filters (1)
etc/lime-elements.api.mdis excluded by!etc/lime-elements.api.md
📒 Files selected for processing (15)
src/components/slider/examples/slider-basic.tsxsrc/components/slider/examples/slider-unset.tsxsrc/components/slider/partial-styles/_thumb.scsssrc/components/slider/slider.scsssrc/components/slider/slider.spec.tsxsrc/components/slider/slider.tsxsrc/global/translations.tssrc/translations/da.tssrc/translations/de.tssrc/translations/en.tssrc/translations/fi.tssrc/translations/fr.tssrc/translations/nl.tssrc/translations/no.tssrc/translations/sv.ts
| // (e.g. a value that is in the `Languages` type but unmapped, such as | ||
| // `nb`), so a component never throws on an unsupported language. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
Comment inaccurately cites nb as an unmapped example.
The comment says the fallback handles "a value that is in the Languages type but unmapped, such as nb", but nb is now aliased on line 17, so the fallback won't trigger for it. Consider updating the example to reference a browser-specific locale (e.g., en-US) or removing the nb reference.
📝 Suggested comment update
- // Fall back to English when the requested language has no translations
- // (e.g. a value that is in the `Languages` type but unmapped, such as
- // `nb`), so a component never throws on an unsupported language.
+ // Fall back to English when the requested language has no translations
+ // (e.g. a browser-specific locale like `en-US` that is not mapped),
+ // so a component never throws on an unsupported language.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // (e.g. a value that is in the `Languages` type but unmapped, such as | |
| // `nb`), so a component never throws on an unsupported language. | |
| // Fall back to English when the requested language has no translations | |
| // (e.g. a browser-specific locale like `en-US` that is not mapped), | |
| // so a component never throws on an unsupported language. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/global/translations.ts` around lines 27 - 28, Update the fallback comment
in translations logic so it no longer uses nb as an unmapped example, since the
Languages mapping now aliases it. Adjust the wording near the fallback handling
to reference a truly unmapped browser locale such as en-US, or remove the
example entirely, and keep the explanation aligned with the existing translation
fallback behavior in the related mappings and lookup code.
…lue-not-set` These are useful for various input-type components, specially to be used as `aria-label` or `aria-valuetext`
Kiarokh
force-pushed
the
slider-value-unset
branch
from
74e0ae9 to
19c1c77
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/slider/examples/slider-basic.tsx (1)
26-57: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winWrap the example output in Stencil’s
<Host>element.This render method returns multiple top-level elements through an array. Replace the array with
<Host>…</Host>and importHostfrom@stencil/core.As per coding guidelines, “When returning multiple JSX elements from the
rendermethod, never wrap them in an array literal. Instead, always wrap them in the special<Host>element.”🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/slider/examples/slider-basic.tsx` around lines 26 - 57, Update the render method to import Host from `@stencil/core` and wrap the slider, example controls, and example value elements in a Host element instead of returning them in an array literal.Sources: Coding guidelines, Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/slider/slider.scss`:
- Around line 7-8: Update the clear-value button sizing in the slider styles to
provide at least a 1.5rem × 1.5rem interactive target while keeping the icon
visually small, and adjust the related reserved content padding to match. Use
the existing $size-of-clear-value-button and its associated clear-button layout
rules as the change points.
---
Outside diff comments:
In `@src/components/slider/examples/slider-basic.tsx`:
- Around line 26-57: Update the render method to import Host from `@stencil/core`
and wrap the slider, example controls, and example value elements in a Host
element instead of returning them in an array literal.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 1128b13c-b6c3-4061-8042-1345c0000f94
⛔ Files ignored due to path filters (1)
etc/lime-elements.api.mdis excluded by!etc/lime-elements.api.md
📒 Files selected for processing (15)
src/components/slider/examples/slider-basic.tsxsrc/components/slider/examples/slider-unset.tsxsrc/components/slider/partial-styles/_thumb.scsssrc/components/slider/slider.scsssrc/components/slider/slider.spec.tsxsrc/components/slider/slider.tsxsrc/global/translations.tssrc/translations/da.tssrc/translations/de.tssrc/translations/en.tssrc/translations/fi.tssrc/translations/fr.tssrc/translations/nl.tssrc/translations/no.tssrc/translations/sv.ts
| $size-of-clear-value-button: 1rem; | ||
| $gap-of-clear-value-button: 0.25rem; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Increase the clear button’s interactive target.
The button is only 1rem × 1rem, making this important clearing affordance difficult to activate on touch devices. Keep the icon visually small, but provide at least a 1.5rem × 1.5rem hit target and update the reserved content padding accordingly.
Also applies to: 220-227
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/slider/slider.scss` around lines 7 - 8, Update the clear-value
button sizing in the slider styles to provide at least a 1.5rem × 1.5rem
interactive target while keeping the icon visually small, and adjust the related
reserved content padding to match. Use the existing $size-of-clear-value-button
and its associated clear-button layout rules as the change points.
19c1c77 to
04ba4e7
Compare
The slider was the only input in the library that could not be empty: it always resolved to a value and rendered "unset" identically to the minimum. It now supports an explicit unset state — the thumb rests centered with no fill, the indicator shows `?`, the label stays unfloated, and assistive technology announces "Value not set" through `aria-valuetext`. A trailing clear button (with a context-aware `aria-label` and a tooltip) lets users return to the unset state. Clearing emits `NaN` on the `change` event, keeping its payload a `number` so consumers are not forced into a breaking type change. Refs #4161 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
When the value was cleared, focus stayed on the clear button, which immediately disables itself — so focus fell to the document body. Move focus to the range input instead, so keyboard users can adjust the value right away and assistive technology announces the now-unset state. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Behavioral specs for the new unset/clear functionality: a non-finite value renders the empty state (`?` indicator, "Value not set"), a finite value including 0 counts as set, the empty state ends on first interaction, the clear button's contextual label and its disabled and visibility rules (hidden for required and readonly sliders), and clearing emits `NaN`, enters the unset state, and moves focus to the slider. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
`translate.get` indexed `allTranslations[language][key]` directly, so a `language` in the `Languages` type without translations threw a `TypeError` and crashed the render. It now falls back to English (then the raw key) for any unmapped language, and maps `nb` (Norwegian Bokmål) to the existing Norwegian (`no`) translations. Surfaced by the slider's new `language` prop via the composite example's runtime test. Refs #4162 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Kiarokh
force-pushed
the
slider-value-unset
branch
from
04ba4e7 to
62e5749
Compare
2 participants
fix #4161
Note
see the parent issue #4161 for more details and screen recordings before and after this change.
Summary by CodeRabbit
Summary by CodeRabbit
aria-valuetext).readonlyand notrequired) that clears by setting the value to “not set”.languageoption for localized unset/clear labels, plus new/updated slider examples.Review:
Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)
Windows:
Linux:
macOS:
Mobile: