feat(slider): new TEDI-Ready component #13#607
Conversation
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughAdds a new TEDI Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/tedi/components/form/slider/slider.module.scss`:
- Around line 49-54: The thumb-anchor left calc is invalid because
--tedi-slider-progress is set as a percent string (e.g., "40%") but CSS
multiplication requires the progress operand be unitless; change the code that
sets --tedi-slider-progress (in the slider component) to a unitless decimal
ratio (e.g., 0.4) instead of a percent string, and update the
.tedi-slider__thumb-anchor calc to multiply that unitless var by the percentage
dimension (use var(--tedi-slider-progress) * (100% -
var(--form-slider-thumb-size)) and keep the thumb offset addition), ensuring the
CSS uses the new unitless progress value throughout.
In `@src/tedi/components/form/slider/slider.stories.tsx`:
- Around line 60-82: The two Story exports MinAndMaxValues and CurrentValue
render the slider without an accessible name; update each story's args to
provide either a visible label prop or an aria-label/aria-labelledby prop (e.g.,
add label: 'Volume' or aria-label: 'Volume slider') so the underlying Slider
component receives an accessible name; ensure you apply the same change for
other stories in this file (lines ~191-240) that instantiate sliders without
labels.
In `@src/tedi/components/form/slider/slider.tsx`:
- Line 156: The helper id and className are being overwritten: instead of always
setting helperId to `${id}-helper`, use the existing helper.id when present
(e.g., const helperId = helper?.id ?? `${id}-helper`) and when rendering
FeedbackTextProps merge class names so `tedi-slider__feedback` is preserved
(build a combined class string like `tedi-slider__feedback ${helper?.className
?? ''}` and pass that as className, ensuring the spread of ...helper does not
overwrite it). Apply the same pattern in the other feedback rendering block
(around the 253-288 area) so helper.id is preserved and helper.className is
merged rather than replacing the default class.
🪄 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: CHILL
Plan: Pro
Run ID: cc313bdd-34a9-465a-a8fa-eab4dd8ae7a1
📒 Files selected for processing (6)
skills/tedi-react/references/components.mdsrc/tedi/components/form/slider/slider.module.scsssrc/tedi/components/form/slider/slider.spec.tsxsrc/tedi/components/form/slider/slider.stories.tsxsrc/tedi/components/form/slider/slider.tsxsrc/tedi/index.ts
|
@coderabbitai resolve |
✅ Actions performedComments resolved. Approval is disabled; enable |
…ve keyboard navigation #13
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/tedi/components/overlays/overlay/overlay.tsx (1)
163-309:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winSet
Overlay.displayNamebefore exporting.This exported component currently has no
displayName, which makes React DevTools output less useful and violates the component guidelines.As per coding guidelines, all exported components must have a displayName property set.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/tedi/components/overlays/overlay/overlay.tsx` around lines 163 - 309, The exported Overlay component lacks a displayName which harms DevTools and violates guidelines; set Overlay.displayName = 'Overlay' (and optionally set Overlay.Trigger.displayName = 'Overlay.Trigger' and Overlay.Content.displayName = 'Overlay.Content') immediately before the existing exports so the named components appear correctly in React DevTools and follow the component displayName convention.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/tedi/components/form/slider/slider.tsx`:
- Line 298: The JSX currently uses a truthy guard "{addonRight && <div
className={styles['tedi-slider__addon']}>{addonRight}</div>}" which will omit
legitimate ReactNode values like 0 or ''. Change the condition to an explicit
null/undefined check (e.g., "addonRight != null") so the element renders when
addonRight is a valid ReactNode even if falsy; update the expression that
references addonRight and styles['tedi-slider__addon'] accordingly.
---
Outside diff comments:
In `@src/tedi/components/overlays/overlay/overlay.tsx`:
- Around line 163-309: The exported Overlay component lacks a displayName which
harms DevTools and violates guidelines; set Overlay.displayName = 'Overlay' (and
optionally set Overlay.Trigger.displayName = 'Overlay.Trigger' and
Overlay.Content.displayName = 'Overlay.Content') immediately before the existing
exports so the named components appear correctly in React DevTools and follow
the component displayName convention.
🪄 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: CHILL
Plan: Pro
Run ID: 7f7420b6-4407-4873-b3a7-ed311479f851
📒 Files selected for processing (5)
src/tedi/components/form/slider/slider.module.scsssrc/tedi/components/form/slider/slider.spec.tsxsrc/tedi/components/form/slider/slider.stories.tsxsrc/tedi/components/form/slider/slider.tsxsrc/tedi/components/overlays/overlay/overlay.tsx
✅ Files skipped from review due to trivial changes (1)
- src/tedi/components/form/slider/slider.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/tedi/components/form/slider/slider.module.scss
2 participants
Summary by CodeRabbit
New Features
Documentation
Styles
Storybook
Tests
Chores