Conversation
WalkthroughThe pull request updates the documentation for various components by reformatting existing pages and adding new code usage examples. Changes include improved JSX formatting, detailed usage examples for components such as Separator, Strong, ToggleGroup, Toggle, Tooltip, and Visually Hidden, as well as updated property tables. Minor modifications to navigation links and CSS classes further ensure consistency with the new versioned documentation structure while preserving the existing functionality. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant ToggleExample as ToggleExampleBasic
participant Toggle as Toggle Component
User->>ToggleExample: Click Toggle
ToggleExample->>Toggle: Call onChange(newState)
Toggle-->>ToggleExample: Return updated state
ToggleExample-->>User: Render updated Toggle
sequenceDiagram
participant User as User
participant TGExample as ToggleGroupExampleBasic
participant TG as ToggleGroup Component
User->>TGExample: Select toggle option
TGExample->>TG: Trigger onChange(updatedPressed)
TG-->>TGExample: Update selection state
TGExample-->>User: Render updated toggle group
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
docs/app/docsv2/docsNavigationSections.tsxOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docsv2/components/progress/docs/codeUsage.jsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. docs/app/docsv2/components/switch/docs/codeUsage.jsOops! Something went wrong! :( ESLint: 8.56.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/docs/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 4
🧹 Nitpick comments (20)
docs/app/docsv2/components/tooltip/page.mdx (2)
1-5: Import Statements and Unused Imports CheckThe new imports correctly pull in the required components for the updated documentation page. One minor note: the named import
TooltipTableis currently not used within the MDX file. If it's not intended for future use in this page, consider removing it to keep the code lean.
13-20: Interactive Component Hero and Example IntegrationThe integration of
<Documentation.ComponentHero>with the passedcodeUsageand the nested usage of<Card>,<Tooltip>, and<Text>is well implemented. This block not only demonstrates the tooltip functionality but also uses the styling classes and inline styling appropriately to achieve the desired layout. Consider reviewing the inline style{ display: "flex", gap: 20 }for consistency with your overall design system—extracting into a CSS class might improve maintainability if similar patterns are used elsewhere.docs/app/docsv2/components/visually-hidden/docs/codeUsage.js (1)
20-23: Remove empty line in data array.The empty line in the data array is unnecessary.
Apply this diff to remove the empty line:
data : [ - {prop: 'asChild', type: 'boolean', default: 'false', description: 'renders the children in desired element', id: 'asChild'}, - ] + {prop: 'asChild', type: 'boolean', default: 'false', description: 'renders the children in desired element', id: 'asChild'} + ]docs/app/docsv2/components/visually-hidden/page.mdx (1)
7-9: Improve description text formatting.The description text has unnecessary indentation which might affect rendering.
Apply this diff to improve the text formatting:
description={` - Use these helpers to visually hide elements but keep them accessible to assistive technologies. + Use these helpers to visually hide elements but keep them accessible to assistive technologies. `}docs/app/docsv2/components/separator/docs/codeUsage.js (1)
41-53: Improve property documentation.The table documentation could be enhanced:
- The
colorproperty description should specify which colors are supported.- The
orientationproperty's type could be more specific using a TypeScript union type.Consider updating the properties documentation:
- {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the separator', id: 'color'}, - {prop: 'orientation', type: 'horizontal | vertical', default: 'horizontal', description: 'orientation of the separator', id: 'orientation'}, + {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the separator. Supports CSS color values and theme color tokens.', id: 'color'}, + {prop: 'orientation', type: "'horizontal' | 'vertical'", default: "'horizontal'", description: 'Orientation of the separator. Controls the direction and styling.', id: 'orientation'},docs/app/docsv2/components/separator/page.mdx (3)
8-10: Enhance the component description.The current description is too brief and doesn't fully explain the component's purpose or use cases.
Consider expanding the description:
- Separator is used to separate content. + Separator is a visual divider that can be used to separate content both horizontally and vertically. + It helps improve visual hierarchy and content organization in your layouts.🧰 Tools
🪛 LanguageTool
[uncategorized] ~10-~10: Loose punctuation mark.
Context: ...r is used to separate content. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
12-24: Add spacing between vertical separators.The vertical separators in the demo lack proper spacing, which could make the text appear cramped.
Add spacing classes to improve the layout:
- <div className='flex'> + <div className='flex items-center gap-4'>
26-28: Add accessibility section to the documentation.The documentation would benefit from information about the component's accessibility features.
Consider adding an accessibility section before the properties table:
<Documentation.Section title="Accessibility"> <Text> The Separator component is rendered as an `hr` element when horizontal and a `div` with `role="separator"` when vertical, ensuring proper semantic meaning and screen reader support. </Text> </Documentation.Section>docs/app/docsv2/components/toggle-group/docs/codeUsage.js (2)
14-16: Replace console.log with a more meaningful example.For documentation purposes, consider replacing the console.log with a more practical example that demonstrates how to handle the toggle state changes.
- const handleChange = (newPressed) => { - console.log(newPressed) - } + const handleChange = (newPressed) => { + // Update UI or trigger side effects based on selection + setSelectedItems(newPressed); + onSelectionChange?.(newPressed); + }
29-59: Use CSS custom properties for consistent theming.Consider extracting hardcoded values into CSS custom properties for better maintainability and theming support.
.rad-ui-toggle-group { display: inline-flex; - gap:12px; + gap: var(--rad-ui-spacing-3); button { all: unset; - background-color: white; - color: #65636d; - height: 35px; - width: 35px; + background-color: var(--rad-ui-color-background); + color: var(--rad-ui-color-text-muted); + height: var(--rad-ui-size-8); + width: var(--rad-ui-size-8); display: flex; - font-size: 15px; + font-size: var(--rad-ui-font-size-base); line-height: 1; align-items: center; justify-content: center; - margin-left: 1px; - border-radius: 4px; + margin-left: var(--rad-ui-spacing-px); + border-radius: var(--rad-ui-radius-sm);docs/app/docsv2/components/toggle-group/docs/toggle-group-example-basic.tsx (2)
22-22: Remove Storybook comment.This comment appears to be a leftover from Storybook documentation and should be removed as it's not relevant in the current context.
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
30-44: Add TypeScript types and improve component structure.The component should leverage TypeScript for better type safety and documentation.
+type ToggleItem = { + label: React.ReactNode; + value: string; +}; + +type ToggleGroupExampleBasicProps = { + className?: string; +}; + -const ToggleGroupExampleBasic = () => { +const ToggleGroupExampleBasic: React.FC<ToggleGroupExampleBasicProps> = ({ className }) => { - const handleChange = (newPressed) => { + const handleChange = (newPressed: string[]) => { console.log(newPressed); }; - return <div> + return <div className={className}> <ToggleGroup defaultPressed={false} onChange={handleChange} type="multiple" items={items} - > - </ToggleGroup> + /> </div>; };docs/app/docsv2/components/toggle-group/page.mdx (2)
9-11: Enhance component description with more details.The current description is basic. Consider adding more details about:
- Use cases and examples
- Accessibility considerations
- Best practices for implementation
description={` - ToggleGroup is a component that allows you to group multiple toggles together. Useful for when you want to allow users to select multiple options. For example, a user can select multiple filters for a search. + ToggleGroup is a component that allows you to group multiple toggles together, enabling users to select one or multiple options from a set of choices. It's particularly useful for: + + - Filtering interfaces where users can select multiple criteria + - Tool palettes where users can toggle between different tools + - Settings panels where users can enable/disable multiple features + + The component follows WAI-ARIA guidelines for toggle buttons and supports keyboard navigation. `}
17-20: Consider adding sections for accessibility and best practices.The documentation would benefit from additional sections covering accessibility features and implementation best practices.
<Documentation.Table columns={ToggleGroupTable.columns} data={ToggleGroupTable.data} /> + <Documentation.Section title="Accessibility"> + <Documentation.Text> + ToggleGroup implements WAI-ARIA guidelines for toggle buttons: + - Uses appropriate ARIA roles and states + - Supports keyboard navigation + - Provides visual feedback for focus and selection states + </Documentation.Text> + </Documentation.Section> + <Documentation.Section title="Best Practices"> + <Documentation.Text> + - Use clear, descriptive labels for toggle options + - Maintain consistent spacing between toggle items + - Provide visual feedback for interaction states + - Consider mobile touch targets in responsive designs + </Documentation.Text> + </Documentation.Section>docs/app/docsv2/components/strong/page.mdx (1)
5-7: Improve Description ClarityThe description provided in the Documentation component is clear; however, consider revising the wording for improved clarity and conciseness. For instance, you might rephrase the description from:
-Strong is used to define text with strong importance in bold. +The Strong component is used to emphasize text by rendering it in bold.Additionally, please double-check the punctuation to ensure consistency with our style guidelines.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...ith strong importance in bold. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/toggle/docs/toggle-example-basic.tsx (2)
14-16: Add TypeScript type for the handleChange parameter.The
handleChangefunction parameter should be typed for better type safety.- const handleChange = (newPressed) => { + const handleChange = (newPressed: boolean) => { setPressed(newPressed); };
10-12: Consider moving Icon component outside for reusability.The
Iconcomponent is currently defined within theToggleExampleBasiccomponent, causing it to be recreated on each render. Consider moving it outside for better reusability and performance.+const Icon = () => { + return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>; +}; + const ToggleExampleBasic = () => { const [pressed, setPressed] = React.useState(false); - const Icon = () => { - return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>; - };docs/app/docsv2/components/toggle/docs/codeUsage.js (1)
21-46: Add hover state styles.The CSS example is missing hover state styles which are important for user interaction feedback.
.rad-ui-toggle { box-shadow: 0 2px 10px var(--rad-ui-color-gray-700); color: var(--rad-ui-color-gray-1000); background-color: var(--rad-ui-color-accent-50); height: 35px; width: 35px; border-radius: 4px; display: flex; font-size: 15px; line-height: 1; align-items: center; justify-content: center; border: 0 none; outline: none; &[data-state=on]{ background-color: var(--rad-ui-color-accent-500); } + &:hover:not([disabled]) { + background-color: var(--rad-ui-color-accent-100); + } + + &[data-state=on]:hover:not([disabled]) { + background-color: var(--rad-ui-color-accent-600); + } + &:focus { box-shadow: 0 0 0 2px var(--rad-ui-color-accent-1000); }docs/app/docsv2/components/toggle/page.mdx (2)
8-10: Enhance the component description.The current description is basic. Consider adding more details about:
- Common use cases
- Accessibility considerations
- Keyboard interactions
description={` - Toggles are used to switch between two states. They are commonly used in settings, forms, and more. + Toggles are used to switch between two states, typically representing on/off or true/false values. They are commonly used in settings, forms, and interactive UI elements. The component is keyboard accessible, supporting Space and Enter keys for toggling, and includes ARIA attributes for screen readers. When pressed, it announces its new state to assistive technologies. `}
16-19: Consider adding usage examples section.The documentation would benefit from additional sections showing different use cases and variations of the Toggle component.
<Documentation.Table columns={ToggleTable.columns} data={ToggleTable.data} /> + + <Documentation.Section title="Usage Examples"> + <Documentation.Example + title="Disabled State" + description="Toggle in disabled state" + code={disabledExample} + > + <ToggleExampleDisabled /> + </Documentation.Example> + + <Documentation.Example + title="Custom Colors" + description="Toggle with custom accent colors" + code={colorExample} + > + <ToggleExampleColors /> + </Documentation.Example> + </Documentation.Section>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
docs/app/docsv2/components/badge/page.mdx(1 hunks)docs/app/docsv2/components/separator/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/separator/page.mdx(1 hunks)docs/app/docsv2/components/strong/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/strong/page.mdx(1 hunks)docs/app/docsv2/components/toggle-group/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/toggle-group/docs/toggle-group-example-basic.tsx(1 hunks)docs/app/docsv2/components/toggle-group/page.mdx(1 hunks)docs/app/docsv2/components/toggle/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/toggle/docs/toggle-example-basic.tsx(1 hunks)docs/app/docsv2/components/toggle/page.mdx(1 hunks)docs/app/docsv2/components/tooltip/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/tooltip/page.mdx(1 hunks)docs/app/docsv2/components/visually-hidden/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/visually-hidden/page.mdx(1 hunks)docs/components/Main/NavBar/index.js(1 hunks)docs/components/navigation/NavItem.js(1 hunks)docs/components/navigation/Navigation.js(1 hunks)
✅ Files skipped from review due to trivial changes (5)
- docs/app/docsv2/components/strong/docs/codeUsage.js
- docs/components/Main/NavBar/index.js
- docs/app/docsv2/components/badge/page.mdx
- docs/components/navigation/Navigation.js
- docs/app/docsv2/components/tooltip/docs/codeUsage.js
🧰 Additional context used
🪛 LanguageTool
docs/app/docsv2/components/strong/page.mdx
[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...ith strong importance in bold. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/separator/page.mdx
[uncategorized] ~10-~10: Loose punctuation mark.
Context: ...r is used to separate content. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (6)
docs/components/navigation/NavItem.js (1)
15-15: LGTM! The styling changes improve visual feedback.The updated styling enhances the navigation item's visual states with better active/inactive distinction and hover feedback.
Let's verify the color contrast ratios meet WCAG guidelines:
#!/usr/bin/env python3 import colorsys import math def hex_to_rgb(hex_color): # Remove the '#' if present hex_color = hex_color.lstrip('#') return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4)) def relative_luminance(r, g, b): rs = r/255 gs = g/255 bs = b/255 rs = rs/12.92 if rs <= 0.03928 else math.pow((rs+0.055)/1.055, 2.4) gs = gs/12.92 if gs <= 0.03928 else math.pow((gs+0.055)/1.055, 2.4) bs = bs/12.92 if bs <= 0.03928 else math.pow((bs+0.055)/1.055, 2.4) return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs def contrast_ratio(l1, l2): lighter = max(l1, l2) darker = min(l1, l2) return (lighter + 0.05) / (darker + 0.05) # Tailwind colors colors = { 'gray-50': '#F9FAFB', 'gray-100': '#F3F4F6', 'gray-300': '#D1D5DB', 'gray-800': '#1F2937', 'gray-950': '#030712', 'gray-1000': '#000000' } # Test background-text combinations combinations = [ ('gray-300', 'gray-1000'), # Active state ('gray-50', 'gray-950'), # Inactive state ('gray-100', 'gray-950') # Hover state ] print("Color Contrast Analysis:") for bg, fg in combinations: bg_rgb = hex_to_rgb(colors[bg]) fg_rgb = hex_to_rgb(colors[fg]) bg_luminance = relative_luminance(*bg_rgb) fg_luminance = relative_luminance(*fg_rgb) ratio = contrast_ratio(bg_luminance, fg_luminance) print(f"\nBackground: {bg} with Text: {fg}") print(f"Contrast ratio: {ratio:.2f}") print("WCAG AA Normal Text: " + ("Pass" if ratio >= 4.5 else "Fail")) print("WCAG AA Large Text: " + ("Pass" if ratio >= 3 else "Fail"))[skip_cloning]
docs/app/docsv2/components/tooltip/page.mdx (2)
7-12: Updated Documentation Component UsageThe updated
<Documentation>component is structured nicely with cleartitleand multi-linedescriptionprops. The removal of the old header in favor of a more encapsulated component approach improves consistency with the new V2 documentation design.
21-22: Closing Tags and Overall StructureThe closing of the
<Documentation>component is correctly placed, ensuring the MDX structure remains valid. Overall, the changes enhance the clarity and usability of the Tooltip documentation page, aligning well with the V2 migration objectives.docs/app/docsv2/components/strong/page.mdx (2)
1-3: Clear and Consistent ImportsThe import statements for the Documentation component, Strong component, and the codeUsage module are clear and follow the project's conventions.
8-13: Effective Use of Documentation ComponentsThe structure using
<Documentation>and its child<Documentation.ComponentHero>is well implemented. The live example nicely demonstrates how theStrongcomponent functions by wrapping a word within it. This approach effectively communicates usage to the readers.docs/app/docsv2/components/toggle/docs/toggle-example-basic.tsx (1)
17-19:Details
❓ Verification inconclusive
Verify the Toggle component usage.
The example uses
defaultPressedprop while the code usage example incodeUsage.jsusespressedprop. This inconsistency might confuse users.
🏁 Script executed:
#!/bin/bash # Description: Check Toggle component prop usage across documentation rg -A 2 'Toggle.*pressed' docs/app/docsv2/components/toggle/Length of output: 302
Inconsistent Toggle Component Props – Verify Usage
There is a discrepancy in the documented examples for the Toggle component:
- File:
docs/app/docsv2/components/toggle/docs/toggle-example-basic.tsx(lines 17-19) usesdefaultPressed.- File:
docs/app/docsv2/components/toggle/docs/codeUsage.jsusespressed.This inconsistency might confuse users about whether the component is being used in a controlled or uncontrolled manner. Please confirm if the differences are intentional or update the examples so that both use the same prop for clarity.
| code: `import VisuallyHidden from "@radui/ui/VisuallyHidden"" | ||
|
|
||
| const VisualltHiddenExample = () => ( | ||
| <VisuallyHidden asChild style={{display: "none"}}> | ||
| <span>This is a visually hidden text</span> | ||
| </VisuallyHidden> | ||
| )` |
There was a problem hiding this comment.
Fix syntax and naming issues in the code example.
The code example has several issues:
- Extra double quote in the import statement
- Typo in the component name "VisualltHiddenExample"
- The
style={{display: "none"}}prop is redundant and contradicts the purpose ofVisuallyHidden - Inconsistent indentation
Apply this diff to fix the issues:
-import VisuallyHidden from "@radui/ui/VisuallyHidden""
+import VisuallyHidden from "@radui/ui/VisuallyHidden"
-const VisualltHiddenExample = () => (
- <VisuallyHidden asChild style={{display: "none"}}>
- <span>This is a visually hidden text</span>
- </VisuallyHidden>
+const VisuallyHiddenExample = () => (
+ <VisuallyHidden asChild>
+ <span>This is a visually hidden text</span>
+ </VisuallyHidden>📝 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.
| code: `import VisuallyHidden from "@radui/ui/VisuallyHidden"" | |
| const VisualltHiddenExample = () => ( | |
| <VisuallyHidden asChild style={{display: "none"}}> | |
| <span>This is a visually hidden text</span> | |
| </VisuallyHidden> | |
| )` | |
| code: `import VisuallyHidden from "@radui/ui/VisuallyHidden" | |
| const VisuallyHiddenExample = () => ( | |
| <VisuallyHidden asChild> | |
| <span>This is a visually hidden text</span> | |
| </VisuallyHidden> | |
| )` |
| const code = { | ||
| javascript: { | ||
| code: `import Separator from "@radui/ui/Separator" | ||
|
|
||
| const SeparatorExample = () => ( | ||
| <div> | ||
| <div> | ||
| <Text>Welcome to Rad UI</Text> | ||
| </div> | ||
| <Separator /> | ||
| <div style={{ height: "20px", display:"flex" }}> | ||
| <Text>Modern</Text> | ||
| <Separator orientation="vertical" /> | ||
| <Text>Accessible</Text> | ||
| <Separator orientation="vertical" /> | ||
| <Text>Performant</Text> | ||
| </div> | ||
| </div> | ||
| )` | ||
| }, | ||
| scss: { | ||
| code: `/** Separator */ | ||
| .rad-ui-separator { | ||
| background-color: var(--rad-ui-color-gray-600); | ||
| align-self: stretch; | ||
| } | ||
|
|
||
| .rad-ui-separator-vertical{ | ||
| margin: 0px 8px; | ||
| width: 1px; | ||
| } | ||
|
|
||
| .rad-ui-separator-horizontal{ | ||
| margin: 8px 0px; | ||
| height: 1px; | ||
| }` | ||
| }, | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing Text import in the code example.
The code example uses the Text component but doesn't import it. This could confuse users trying to copy and use the example.
Update the import section in the JavaScript example:
-import Separator from "@radui/ui/Separator"
+import Separator from "@radui/ui/Separator"
+import Text from "@radui/ui/Text"📝 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.
| const code = { | |
| javascript: { | |
| code: `import Separator from "@radui/ui/Separator" | |
| const SeparatorExample = () => ( | |
| <div> | |
| <div> | |
| <Text>Welcome to Rad UI</Text> | |
| </div> | |
| <Separator /> | |
| <div style={{ height: "20px", display:"flex" }}> | |
| <Text>Modern</Text> | |
| <Separator orientation="vertical" /> | |
| <Text>Accessible</Text> | |
| <Separator orientation="vertical" /> | |
| <Text>Performant</Text> | |
| </div> | |
| </div> | |
| )` | |
| }, | |
| scss: { | |
| code: `/** Separator */ | |
| .rad-ui-separator { | |
| background-color: var(--rad-ui-color-gray-600); | |
| align-self: stretch; | |
| } | |
| .rad-ui-separator-vertical{ | |
| margin: 0px 8px; | |
| width: 1px; | |
| } | |
| .rad-ui-separator-horizontal{ | |
| margin: 8px 0px; | |
| height: 1px; | |
| }` | |
| }, | |
| } | |
| const code = { | |
| javascript: { | |
| code: `import Separator from "@radui/ui/Separator" | |
| import Text from "@radui/ui/Text" | |
| const SeparatorExample = () => ( | |
| <div> | |
| <div> | |
| <Text>Welcome to Rad UI</Text> | |
| </div> | |
| <Separator /> | |
| <div style={{ height: "20px", display:"flex" }}> | |
| <Text>Modern</Text> | |
| <Separator orientation="vertical" /> | |
| <Text>Accessible</Text> | |
| <Separator orientation="vertical" /> | |
| <Text>Performant</Text> | |
| </div> | |
| </div> | |
| )` | |
| }, | |
| scss: { | |
| code: `/** Separator */ | |
| .rad-ui-separator { | |
| background-color: var(--rad-ui-color-gray-600); | |
| align-self: stretch; | |
| } | |
| .rad-ui-separator-vertical{ | |
| margin: 0px 8px; | |
| width: 1px; | |
| } | |
| .rad-ui-separator-horizontal{ | |
| margin: 8px 0px; | |
| height: 1px; | |
| }` | |
| }, | |
| } |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | ||
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | ||
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Document all available properties.
There are commented-out properties (pressed and disabled) that should be documented to provide comprehensive API documentation.
data: [
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'},
+ {prop: 'pressed', type: 'boolean', default: 'false', description: 'Controls the pressed state of the toggle group', id: 'pressed'},
+ {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, prevents the user from interacting with the toggle group', id: 'disabled'},
- // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'},
- // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'},
]📝 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.
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | |
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | |
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, | |
| data: [ | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | |
| {prop: 'pressed', type: 'boolean', default: 'false', description: 'Controls the pressed state of the toggle group', id: 'pressed'}, | |
| {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, prevents the user from interacting with the toggle group', id: 'disabled'}, | |
| ] |
| data: [ | ||
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | ||
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | ||
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, | ||
| ] |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Complete the properties table.
The table is missing essential properties:
- Commented out properties should be uncommented and completed
- Missing
onChangeproperty which is required for handling state changes
data: [
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'},
- // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'},
- // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'},
+ {prop: 'pressed', type: 'boolean', default: 'false', description: 'The controlled pressed state of the toggle', id: 'pressed'},
+ {prop: 'defaultPressed', type: 'boolean', default: 'false', description: 'The default pressed state when initially rendered', id: 'defaultPressed'},
+ {prop: 'disabled', type: 'boolean', default: 'false', description: 'Whether the toggle is disabled', id: 'disabled'},
+ {prop: 'onChange', type: '(pressed: boolean) => void', default: 'undefined', description: 'Event handler called when the pressed state changes', id: 'onChange'},
]📝 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.
| data: [ | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | |
| // {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'}, | |
| // {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'}, | |
| ] | |
| data: [ | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'}, | |
| {prop: 'pressed', type: 'boolean', default: 'false', description: 'The controlled pressed state of the toggle', id: 'pressed'}, | |
| {prop: 'defaultPressed', type: 'boolean', default: 'false', description: 'The default pressed state when initially rendered', id: 'defaultPressed'}, | |
| {prop: 'disabled', type: 'boolean', default: 'false', description: 'Whether the toggle is disabled', id: 'disabled'}, | |
| {prop: 'onChange', type: '(pressed: boolean) => void', default: 'undefined', description: 'Event handler called when the pressed state changes', id: 'onChange'}, | |
| ] |
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (6)
docs/app/docsv2/components/progress/docs/codeUsage.js (1)
14-19: Fix CSS formatting and document color variables.The CSS has inconsistent spacing and uses color variables without explanation.
.rad-ui-progress { - background: var(--rad-ui-color-sand-600); + background: var(--rad-ui-color-sand-600); /* Light gray background */ overflow: hidden; - height:32px; + height: 32px; border-radius: 8px; }docs/app/docsv2/components/progress/page.mdx (3)
11-13: Enhance component description and fix formatting.The description has trailing whitespace and could be more comprehensive.
<Documentation title='Progress' description={` - Progress component is used to show the progress of a task. It can be used to show the progress of a file upload, a download, a form submission, or any other task that requires progress to be shown. + Progress component is used to show the progress of a task. It can be used to show the progress of a file upload, a download, a form submission, or any other task that requires progress to be shown. The component supports customization through color props and follows ARIA guidelines for accessibility. `}>🧰 Tools
🪛 LanguageTool
[uncategorized] ~13-~13: Loose punctuation mark.
Context: ...requires progress to be shown. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
15-19: Add interactive example and improve responsiveness.The example could be more engaging and the width should use responsive classes instead of inline styles.
<Card className="flex items-center justify-center bg-gray-50 w-64 sm:w-80 h-24 "> - <div style={{width:"90%"}}> + <div className="w-[90%]"> <Progress value={90} /> </div> </Card>Consider adding an interactive example that demonstrates different progress states and color variations.
22-24: Add usage guidelines section.The documentation would benefit from a section on best practices and usage guidelines.
<div className="max-w-screen-md"> <Documentation.Table columns={ProgressTable.columns} data={ProgressTable.data} /> + <Documentation.Section title="Usage Guidelines"> + <Documentation.List> + <Documentation.ListItem>Use Progress for tasks that have a known duration or completion percentage</Documentation.ListItem> + <Documentation.ListItem>Consider using indeterminate progress for unknown durations</Documentation.ListItem> + <Documentation.ListItem>Ensure sufficient color contrast for accessibility</Documentation.ListItem> + </Documentation.List> + </Documentation.Section> </div>docs/app/docsv2/components/switch/page.mdx (2)
12-14: Fix grammar in component description.The description has a grammatical error:
- Switch is used to toggle between two states on and off. You can commonly used in settings panel, forms and any other - place where a user needs to enable or disable feature. + Switch is used to toggle between two states: on and off. It is commonly used in settings panels, forms, and any other + places where a user needs to enable or disable a feature.🧰 Tools
🪛 LanguageTool
[uncategorized] ~14-~14: Loose punctuation mark.
Context: ...enable or disable feature. `}> <Documentation.ComponentHe...(UNLIKELY_OPENING_PUNCTUATION)
15-22: Enhance documentation structure with additional sections.The documentation would benefit from additional sections covering:
- Common usage patterns
- Accessibility considerations
- Best practices
- Examples with different states (disabled, loading, etc.)
Also, consider removing the commented-out UnderConstruction component if it's no longer needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/app/docsv2/components/progress/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/progress/page.mdx(1 hunks)docs/app/docsv2/components/switch/docs/codeUsage.js(1 hunks)docs/app/docsv2/components/switch/page.mdx(1 hunks)docs/app/docsv2/docsNavigationSections.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/app/docsv2/docsNavigationSections.tsx
🧰 Additional context used
🪛 LanguageTool
docs/app/docsv2/components/progress/page.mdx
[uncategorized] ~13-~13: Loose punctuation mark.
Context: ...requires progress to be shown. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
docs/app/docsv2/components/switch/page.mdx
[uncategorized] ~14-~14: Loose punctuation mark.
Context: ...enable or disable feature. `}> <Documentation.ComponentHe...
(UNLIKELY_OPENING_PUNCTUATION)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
| const ProgressExample = () => ( | ||
| <div style={{ width: "90%" }}> | ||
| <Progress value={90} /> | ||
| </div> | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to the Progress component.
The Progress component example should include ARIA attributes for better accessibility.
const ProgressExample = () => (
<div style={{ width: "90%" }}>
- <Progress value={90} />
+ <Progress
+ value={90}
+ aria-label="Loading progress"
+ aria-valuemin={0}
+ aria-valuemax={100}
+ aria-valuenow={90}
+ />
</div>
)📝 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.
| const ProgressExample = () => ( | |
| <div style={{ width: "90%" }}> | |
| <Progress value={90} /> | |
| </div> | |
| ) | |
| const ProgressExample = () => ( | |
| <div style={{ width: "90%" }}> | |
| <Progress | |
| value={90} | |
| aria-label="Loading progress" | |
| aria-valuemin={0} | |
| aria-valuemax={100} | |
| aria-valuenow={90} | |
| /> | |
| </div> | |
| ) |
| export const ProgressTable = { | ||
| columns: [ | ||
| {name: 'Prop', id: 'prop'}, | ||
| {name: 'Type', id: 'type'}, | ||
| {name: 'Default', id: 'default'}, | ||
| {name: 'Description', id: 'description'}, | ||
| ], | ||
|
|
||
| data: [ | ||
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the progress bar', id: 'color'}, | ||
| ] | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Document additional Progress component props.
The table is missing documentation for essential props like 'value', 'max', 'min', etc.
export const ProgressTable = {
columns: [
{name: 'Prop', id: 'prop'},
{name: 'Type', id: 'type'},
{name: 'Default', id: 'default'},
{name: 'Description', id: 'description'},
],
data: [
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the progress bar', id: 'color'},
+ {prop: 'value', type: 'number', default: '0', description: 'Current progress value', id: 'value'},
+ {prop: 'max', type: 'number', default: '100', description: 'Maximum progress value', id: 'max'},
+ {prop: 'min', type: 'number', default: '0', description: 'Minimum progress value', id: 'min'}
]
};📝 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.
| export const ProgressTable = { | |
| columns: [ | |
| {name: 'Prop', id: 'prop'}, | |
| {name: 'Type', id: 'type'}, | |
| {name: 'Default', id: 'default'}, | |
| {name: 'Description', id: 'description'}, | |
| ], | |
| data: [ | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the progress bar', id: 'color'}, | |
| ] | |
| }; | |
| export const ProgressTable = { | |
| columns: [ | |
| {name: 'Prop', id: 'prop'}, | |
| {name: 'Type', id: 'type'}, | |
| {name: 'Default', id: 'default'}, | |
| {name: 'Description', id: 'description'}, | |
| ], | |
| data: [ | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the progress bar', id: 'color'}, | |
| {prop: 'value', type: 'number', default: '0', description: 'Current progress value', id: 'value'}, | |
| {prop: 'max', type: 'number', default: '100', description: 'Maximum progress value', id: 'max'}, | |
| {prop: 'min', type: 'number', default: '0', description: 'Minimum progress value', id: 'min'} | |
| ] | |
| }; |
| const code = { | ||
| javascript: { | ||
| code: ` | ||
| import Switch from "@radui/ui/Switch"; | ||
|
|
||
| const SwitchExample = () => ( | ||
| <div> | ||
| <Switch /> | ||
| </div> | ||
| )` | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance the code example with more comprehensive usage patterns.
The current example is too basic. Consider enhancing it to demonstrate:
- Props usage (especially the
colorprop mentioned in the table) - State management with
useState - Event handling
- Accessibility attributes
Here's a suggested improvement:
const code = {
javascript: {
code: `
import Switch from "@radui/ui/Switch";
+import { useState } from "react";
-const SwitchExample = () => (
- <div>
- <Switch />
- </div>
-)
+const SwitchExample = () => {
+ const [enabled, setEnabled] = useState(false);
+
+ return (
+ <div>
+ <Switch
+ checked={enabled}
+ onChange={setEnabled}
+ color="blue"
+ aria-label="Toggle notifications"
+ >
+ {enabled ? 'Notifications enabled' : 'Notifications disabled'}
+ </Switch>
+ </div>
+ );
+}`📝 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.
| const code = { | |
| javascript: { | |
| code: ` | |
| import Switch from "@radui/ui/Switch"; | |
| const SwitchExample = () => ( | |
| <div> | |
| <Switch /> | |
| </div> | |
| )` | |
| }, | |
| const code = { | |
| javascript: { | |
| code: ` | |
| import Switch from "@radui/ui/Switch"; | |
| import { useState } from "react"; | |
| const SwitchExample = () => { | |
| const [enabled, setEnabled] = useState(false); | |
| return ( | |
| <div> | |
| <Switch | |
| checked={enabled} | |
| onChange={setEnabled} | |
| color="blue" | |
| aria-label="Toggle notifications" | |
| > | |
| {enabled ? 'Notifications enabled' : 'Notifications disabled'} | |
| </Switch> | |
| </div> | |
| ); | |
| }` | |
| }, |
| scss: { | ||
| code: `/** Switch */ | ||
| .rad-ui-Switch { | ||
| opacity: 0; | ||
| position: absolute; | ||
| + button{ | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; | ||
| font-size: 1.2rem; | ||
| color: var(--rad-ui-color-accent-500); | ||
| &::before{ | ||
| content: ""; | ||
| width: 2rem; | ||
| height: 1.05rem; | ||
| background-color: var(--rad-ui-color-accent-500); | ||
| border-radius: 1rem; | ||
| margin-right: .25rem; | ||
| transition: 200ms ease-in-out; | ||
| } | ||
| &::after{ | ||
| position: absolute; | ||
| left: .1rem; | ||
| content: ""; | ||
| width: .9rem; | ||
| height: .9rem; | ||
| background-color: var(--rad-ui-color-accent-50); | ||
| border-radius: 1rem; | ||
| transition: 200ms ease-in-out; | ||
| } | ||
|
|
||
| } | ||
| &:checked{ | ||
| + button::before{ | ||
| background-color: var(--rad-ui-color-accent-900); | ||
| } | ||
| + button::after{ | ||
| transform: translateX(100%); | ||
| background-color: var(--rad-ui-color-accent-50); | ||
|
|
||
| } | ||
| + button { | ||
| color: var(--rad-ui-color-accent-900); | ||
| } | ||
|
|
||
| } | ||
| }` | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve SCSS for accessibility, performance, and maintainability.
The current SCSS implementation has several areas for improvement:
- The hidden input needs dimensions for better accessibility
- Multiple transitions can be combined for better performance
- Magic numbers should be replaced with CSS custom properties
- Missing focus styles for keyboard navigation
Here's a suggested improvement:
scss: {
code: `/** Switch */
+:root {
+ --rad-ui-switch-width: 2rem;
+ --rad-ui-switch-height: 1.05rem;
+ --rad-ui-switch-thumb-size: 0.9rem;
+}
.rad-ui-Switch {
opacity: 0;
position: absolute;
+ width: var(--rad-ui-switch-width);
+ height: var(--rad-ui-switch-height);
+ button{
position: relative;
display: flex;
align-items: center;
font-size: 1.2rem;
color: var(--rad-ui-color-accent-500);
&::before{
content: "";
- width: 2rem;
- height: 1.05rem;
+ width: var(--rad-ui-switch-width);
+ height: var(--rad-ui-switch-height);
background-color: var(--rad-ui-color-accent-500);
border-radius: 1rem;
margin-right: .25rem;
- transition: 200ms ease-in-out;
+ transition: all 200ms ease-in-out;
}
&::after{
position: absolute;
left: .1rem;
content: "";
- width: .9rem;
- height: .9rem;
+ width: var(--rad-ui-switch-thumb-size);
+ height: var(--rad-ui-switch-thumb-size);
background-color: var(--rad-ui-color-accent-50);
border-radius: 1rem;
- transition: 200ms ease-in-out;
+ transition: all 200ms ease-in-out;
}
}
+ &:focus-visible + button::before {
+ outline: 2px solid var(--rad-ui-color-accent-500);
+ outline-offset: 2px;
+ }
&:checked{
+ button::before{
background-color: var(--rad-ui-color-accent-900);📝 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.
| scss: { | |
| code: `/** Switch */ | |
| .rad-ui-Switch { | |
| opacity: 0; | |
| position: absolute; | |
| + button{ | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.2rem; | |
| color: var(--rad-ui-color-accent-500); | |
| &::before{ | |
| content: ""; | |
| width: 2rem; | |
| height: 1.05rem; | |
| background-color: var(--rad-ui-color-accent-500); | |
| border-radius: 1rem; | |
| margin-right: .25rem; | |
| transition: 200ms ease-in-out; | |
| } | |
| &::after{ | |
| position: absolute; | |
| left: .1rem; | |
| content: ""; | |
| width: .9rem; | |
| height: .9rem; | |
| background-color: var(--rad-ui-color-accent-50); | |
| border-radius: 1rem; | |
| transition: 200ms ease-in-out; | |
| } | |
| } | |
| &:checked{ | |
| + button::before{ | |
| background-color: var(--rad-ui-color-accent-900); | |
| } | |
| + button::after{ | |
| transform: translateX(100%); | |
| background-color: var(--rad-ui-color-accent-50); | |
| } | |
| + button { | |
| color: var(--rad-ui-color-accent-900); | |
| } | |
| } | |
| }` | |
| } | |
| scss: { | |
| code: `/** Switch */ | |
| :root { | |
| --rad-ui-switch-width: 2rem; | |
| --rad-ui-switch-height: 1.05rem; | |
| --rad-ui-switch-thumb-size: 0.9rem; | |
| } | |
| .rad-ui-Switch { | |
| opacity: 0; | |
| position: absolute; | |
| width: var(--rad-ui-switch-width); | |
| height: var(--rad-ui-switch-height); | |
| + button{ | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.2rem; | |
| color: var(--rad-ui-color-accent-500); | |
| &::before{ | |
| content: ""; | |
| width: var(--rad-ui-switch-width); | |
| height: var(--rad-ui-switch-height); | |
| background-color: var(--rad-ui-color-accent-500); | |
| border-radius: 1rem; | |
| margin-right: .25rem; | |
| transition: all 200ms ease-in-out; | |
| } | |
| &::after{ | |
| position: absolute; | |
| left: .1rem; | |
| content: ""; | |
| width: var(--rad-ui-switch-thumb-size); | |
| height: var(--rad-ui-switch-thumb-size); | |
| background-color: var(--rad-ui-color-accent-50); | |
| border-radius: 1rem; | |
| transition: all 200ms ease-in-out; | |
| } | |
| } | |
| &:focus-visible + button::before { | |
| outline: 2px solid var(--rad-ui-color-accent-500); | |
| outline-offset: 2px; | |
| } | |
| &:checked{ | |
| + button::before{ | |
| background-color: var(--rad-ui-color-accent-900); | |
| } | |
| + button::after{ | |
| transform: translateX(100%); | |
| background-color: var(--rad-ui-color-accent-50); | |
| } | |
| + button { | |
| color: var(--rad-ui-color-accent-900); | |
| } | |
| } | |
| }` | |
| } |
| export const SwitchTable = { | ||
| columns: [ | ||
| {name: 'Prop', id: 'prop'}, | ||
| {name: 'Type', id: 'type'}, | ||
| {name: 'Default', id: 'default'}, | ||
| {name: 'Description', id: 'description'}, | ||
| ], | ||
| data: [ | ||
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the switch', id: 'color'}, | ||
| ] | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Expand props documentation for completeness.
The current props table is missing several essential props that users need to know about:
- Core props:
checked,onChange,disabled - Accessibility props:
aria-label,aria-describedby - Event handlers:
onFocus,onBlur
Here's a suggested improvement:
data: [
- {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the switch', id: 'color'},
+ {prop: 'checked', type: 'boolean', default: 'false', description: 'The controlled state of the switch', id: 'checked'},
+ {prop: 'onChange', type: '(checked: boolean) => void', default: 'undefined', description: 'Callback fired when the state changes', id: 'onChange'},
+ {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, prevents the user from interacting with the switch', id: 'disabled'},
+ {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the switch. Accepts any valid CSS color value', id: 'color'},
+ {prop: 'aria-label', type: 'string', default: 'undefined', description: 'Accessible label for the switch', id: 'aria-label'},
+ {prop: 'aria-describedby', type: 'string', default: 'undefined', description: 'Id of the element that describes the switch', id: 'aria-describedby'},
]📝 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.
| export const SwitchTable = { | |
| columns: [ | |
| {name: 'Prop', id: 'prop'}, | |
| {name: 'Type', id: 'type'}, | |
| {name: 'Default', id: 'default'}, | |
| {name: 'Description', id: 'description'}, | |
| ], | |
| data: [ | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the switch', id: 'color'}, | |
| ] | |
| }; | |
| export const SwitchTable = { | |
| columns: [ | |
| {name: 'Prop', id: 'prop'}, | |
| {name: 'Type', id: 'type'}, | |
| {name: 'Default', id: 'default'}, | |
| {name: 'Description', id: 'description'}, | |
| ], | |
| data: [ | |
| {prop: 'checked', type: 'boolean', default: 'false', description: 'The controlled state of the switch', id: 'checked'}, | |
| {prop: 'onChange', type: '(checked: boolean) => void', default: 'undefined', description: 'Callback fired when the state changes', id: 'onChange'}, | |
| {prop: 'disabled', type: 'boolean', default: 'false', description: 'When true, prevents the user from interacting with the switch', id: 'disabled'}, | |
| {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the switch. Accepts any valid CSS color value', id: 'color'}, | |
| {prop: 'aria-label', type: 'string', default: 'undefined', description: 'Accessible label for the switch', id: 'aria-label'}, | |
| {prop: 'aria-describedby', type: 'string', default: 'undefined', description: 'Id of the element that describes the switch', id: 'aria-describedby'}, | |
| ] | |
| }; |
| return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.14998 14V1H0.849976V14H2.14998ZM6.14998 14V1H4.84998V14H6.14998ZM10.15 1V14H8.84998V1H10.15ZM14.15 14V1H12.85V14H14.15Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>; | ||
| }; | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args |
kotAPI
added
the
automerge
2 participants
Summary by CodeRabbit
Documentation
Separator,Strong,ToggleGroup,Tooltip,Visually Hidden,Progress, andSwitch, enhancing content organization and clarity.Style