slider added #54
slider added #54
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis update introduces a new implementation of the Slider component under Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant RetroUISlider
participant RadixSliderPrimitive
User->>App: Interacts with Slider UI
App->>RetroUISlider: Renders Slider component
RetroUISlider->>RadixSliderPrimitive: Delegates rendering and events
RadixSliderPrimitive-->>RetroUISlider: Handles input, returns value
RetroUISlider-->>App: Passes value/state updates
App-->>User: Updates UI accordingly
Possibly related PRs
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/retroui/Slider.tsx (1)
20-22: Consider adding ARIA attributes for better accessibilityWhile the Radix UI primitives provide good accessibility defaults, explicitly adding aria-label or aria-labelledby would improve screen reader support for this slider.
- <SliderPrimitive.Track className="relative h-3 w-full grow overflow-hidden bg-background border-2"> + <SliderPrimitive.Track className="relative h-3 w-full grow overflow-hidden bg-background border-2" aria-label="Slider track">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (16)
components/ComponentInstall.tsx(0 hunks)components/retroui/Label.tsx(1 hunks)components/retroui/Slider.tsx(1 hunks)components/retroui/index.ts(0 hunks)components/ui/Slider/Slider.tsx(0 hunks)components/ui/Slider/index.ts(0 hunks)config/components.ts(4 hunks)config/navigation.ts(1 hunks)content/docs/components/label.mdx(1 hunks)content/docs/components/slider.mdx(1 hunks)package.json(1 hunks)preview/components/input-style-with-label.tsx(1 hunks)preview/components/label-style-default.tsx(1 hunks)preview/components/slider-style-default.tsx(1 hunks)preview/components/slider-style-thin.tsx(0 hunks)registry.json(1 hunks)
💤 Files with no reviewable changes (5)
- components/retroui/index.ts
- components/ComponentInstall.tsx
- components/ui/Slider/index.ts
- components/ui/Slider/Slider.tsx
- preview/components/slider-style-thin.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
components/retroui/Slider.tsx (1)
lib/utils.ts (1)
cn(4-6)
preview/components/label-style-default.tsx (2)
components/retroui/Label.tsx (1)
Label(11-16)components/retroui/Input.tsx (1)
Input(7-25)
🔇 Additional comments (17)
package.json (1)
23-23: Dependency version bump looks good
The@radix-ui/react-sliderdependency has been updated to^1.2.4. This patch update appears appropriate for the new Slider component implementation.preview/components/input-style-with-label.tsx (1)
1-2: Align imports with new component structure
ImportingInputandLabelfrom their dedicated subpaths ensures the refactoredretrouifolder layout is reflected correctly and supports better tree‑shaking.content/docs/components/slider.mdx (1)
46-46: Remove redundant example spacing
Dropping the extra<br />tags after the default showcase streamlines the documentation and focuses on the single remaining variant.components/retroui/Label.tsx (1)
11-16: Inline export ofLabelis clear and concise
Moving theexportinline with the component declaration reduces boilerplate while preserving existing functionality and type safety.config/navigation.ts (3)
36-36: Add "Label" to side navigation
Introducing theLabelentry with a "New" tag correctly reflects the newly added component in the UI library.
38-38: Remove "New" tag from Progress
Removing the "New" badge from Progress is appropriate now that it’s an established component.
41-41: Add "Slider" to side navigation
Including theSlidercomponent entry with a "New" tag aligns the navigation with the freshly introduced Slider component.preview/components/slider-style-default.tsx (1)
1-15: LGTM: Clean, simplified implementation of the Slider component.The code has been updated to use the new Slider component from the retroui directory with a cleaner structure. The fixed width container provides a consistent display for the example.
preview/components/label-style-default.tsx (1)
1-11: Well-structured example for the new Label component.This example demonstrates proper label-input association using the
htmlForattribute matching the input'sid, which is essential for accessibility. The grid layout with appropriate spacing creates a clean form element presentation.content/docs/components/label.mdx (1)
1-40: Documentation is comprehensive and follows project standards.The documentation includes all essential elements: metadata, component preview, installation methods (both CLI and manual approaches), and usage examples. This follows the same structure as other component documentation in the project.
registry.json (1)
283-299: Proper registry entry for the new Slider component.The Slider component has been correctly added to the registry with all required fields: name, type, title, description, dependencies, and file paths. This ensures the component is accessible through the component library's installation system.
components/retroui/Slider.tsx (2)
1-28: Well-structured Slider component implementationThe Slider component is well-implemented using Radix UI primitives with proper ref forwarding and prop spreading. The styling is consistent with the RetroUI design system.
23-23:❓ Verification inconclusive
Verify custom Tailwind size values
The thumb uses
h-4.5andw-4.5which may not be standard Tailwind CSS values. Verify that these are properly configured in your tailwind.config.js or consider using standard sizes likeh-4andw-4.
🏁 Script executed:
#!/bin/bash # Check if these custom size values are defined in the Tailwind config cat tailwind.config.js | grep -A 20 "theme:" | grep -A 20 "extend:" | grep -A 10 "spacing"Length of output: 137
🏁 Script executed:
#!/bin/bash set -e # Locate Tailwind config file (js, ts, or cjs) CONFIG=$(fd -t f tailwind.config.{js,ts,cjs} | head -n1) echo "Using config file: $CONFIG" # Show the spacing definitions under theme.extend grep -R -A 20 "theme" "$CONFIG" | grep -R -A 10 "extend" | grep -R -A 10 "spacing"Length of output: 65963
Ensure Tailwind spacing “4.5” is configured or use a supported value
The Slider thumb uses
h-4.5/w-4.5, but Tailwind’s default spacing scale (0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, …) does not include4.5(1.125 rem). You should either:
- Add a custom entry in your
tailwind.config.{js|ts|cjs}:module.exports = { theme: { extend: { spacing: { '4.5': '1.125rem', }, }, }, }- Use an arbitrary value instead:
<SliderPrimitive.Thumb className="h-[1.125rem] w-[1.125rem] …" />- Or pick the nearest default scale:
h-4/w-4(1 rem) orh-5/w-5(1.25 rem)components/retroui/Slider.tsx (line 23)
- <SliderPrimitive.Thumb className="… h-4.5 w-4.5 …" /> + <SliderPrimitive.Thumb className="… h-[1.125rem] w-[1.125rem] …" />Please verify that your Tailwind setup supports the
4.5spacing key or adjust to a supported value.config/components.ts (4)
58-61: Label component successfully added to core componentsThe Label component has been correctly added to the core components section with appropriate name and file path.
86-90: Slider component path updated correctlyThe file path for the slider component has been properly updated to point to the new implementation in the retroui directory.
248-252: Label example configuration looks goodThe new label example has been properly configured with the correct name, file path, and preview import.
343-347: Slider example updated correctlyThe preview import for the slider has been updated to use a more concise syntax, properly pointing to the new slider implementation.
Summary by CodeRabbit
New Features
Improvements
Bug Fixes
Chores