Use Button Primitive in Toggle, ToggleGroup - and more QOL improvements #402
Conversation
WalkthroughThe modifications across various components enhance the user interface by introducing new elements, reorganizing layouts, and refining styles. Key updates include the addition of Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SandboxEditor
participant RadUILogo
participant Heading
participant ToggleGroup
User->>SandboxEditor: Open Editor
SandboxEditor->>RadUILogo: Display Logo
SandboxEditor->>Heading: Display Title
SandboxEditor->>ToggleGroup: Render Toggle Options
ToggleGroup->>User: Interact with Toggle
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #402 +/- ##
=======================================
Coverage 94.44% 94.44%
=======================================
Files 10 10
Lines 54 54
Branches 9 9
=======================================
Hits 51 51
Misses 3 3 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (3)
src/components/tools/SandboxEditor/SandboxEditor.tsx (3)
18-20: Consider adding accessibility features toRadUILogo.To improve accessibility, consider adding a
<title>or<desc>element within the SVG to provide context for screen readers.const RadUILogo = () => { - return <svg xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 211 109" fill="none"> + return <svg xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 211 109" fill="none"> + <title>Rad UI Logo</title>
Line range hint
23-30: Enhance color accessibility inColorSelect.Consider adding a border or pattern to the color swatches to make them distinguishable for users with color vision deficiencies.
const ColorSelect = ({color, colorName, changeAccentColor}: ColorSelectProps) => { const dimensions = 32; return <div onClick={() => changeAccentColor(colorName)} - className='cursor-pointer rounded-full hover:border-gray-700 border' + className='cursor-pointer rounded-full hover:border-gray-700 border border-black' style={{width: dimensions, height: dimensions, backgroundColor: color['light']['900']}}></div>; };
Line range hint
39-41: EnsureuseEffectis used effectively.The current
useEffecthook is empty. If it's not needed, consider removing it to avoid confusion.useEffect(() => { - }, []);
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (11)
- src/components/tools/SandboxEditor/SandboxEditor.tsx (3 hunks)
- src/components/ui/Button/Button_sb.stories.js (2 hunks)
- src/components/ui/Toggle/Toggle.tsx (2 hunks)
- src/components/ui/ToggleGroup/ToggleGroup.stories.js (2 hunks)
- src/components/ui/ToggleGroup/ToggleGroup.tsx (1 hunks)
- src/components/ui/ToggleGroup/shards/ToggleGroupRoot.tsx (1 hunks)
- src/components/ui/ToggleGroup/shards/ToggleItem.tsx (2 hunks)
- src/core/primitives/Button/ButtonPrimitive.stories.tsx (1 hunks)
- styles/themes/components/button.scss (2 hunks)
- styles/themes/components/toggle-group.scss (1 hunks)
- styles/themes/default.scss (1 hunks)
Files skipped from review due to trivial changes (4)
- src/components/ui/Button/Button_sb.stories.js
- src/core/primitives/Button/ButtonPrimitive.stories.tsx
- styles/themes/components/toggle-group.scss
- styles/themes/default.scss
Additional comments not posted (13)
src/components/ui/ToggleGroup/ToggleGroup.tsx (1)
27-27: Standardized display name forToggleGroup.The use of
COMPONENT_NAMEforToggleGroup.displayNameimproves consistency and debugging.src/components/ui/ToggleGroup/shards/ToggleGroupRoot.tsx (1)
8-18: Enhanced customization and styling capabilities.The introduction of additional props and the use of
customClassSwitcherenhance the component's flexibility and usability without altering its core functionality.src/components/ui/Toggle/Toggle.tsx (2)
40-47: Improved styling and behavior withButtonPrimitive.Replacing the standard
<button>withButtonPrimitivelikely enhances the component's styling and behavior, aligning it with a consistent UI framework.
51-51: Standardized display name forToggle.Setting the display name to
COMPONENT_NAMEimproves consistency and aids in debugging.src/components/ui/ToggleGroup/shards/ToggleItem.tsx (3)
4-4: Import statement is correct.The import of
ButtonPrimitivealigns with the changes made in the component.
41-45: Logic for settingaria-pressedis correct.The conditional setting of
aria-pressedbased onisActiveimproves accessibility.
47-52: Use ofButtonPrimitiveis correct.The
ButtonPrimitiveenhances semantic structure and the onClick handler is correctly implemented.styles/themes/components/button.scss (3)
12-15: Focus and active state styles are well-defined.The use of CSS variables ensures consistency and maintainability.
19-55: Button type styles are well-implemented.The styles for solid, soft, outline, and ghost button types enhance user interaction and provide clear visual feedback.
Line range hint
58-76: Button size styles are well-defined.The styles for small, medium, large, and x-large button sizes ensure scalability and adaptability.
src/components/ui/ToggleGroup/ToggleGroup.stories.js (3)
34-47: New icon components are well-implemented.The new icons enhance the visual design and provide diverse options for user interaction.
50-55:itemsarray is well-structured.The
itemsarray enhances modularity and scalability of the component stories.
61-70: Story exports are well-updated.The inclusion of the
itemsarray improves the flexibility and maintainability of theMultipleandSinglestories.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/components/tools/SandboxEditor/SandboxEditor.tsx (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/components/tools/SandboxEditor/SandboxEditor.tsx
kotAPI
changed the title
This PR updates toggle group component's styles and some minor accessibility improvements
Before
After
Summary by CodeRabbit
New Features
RadUILogo,Heading) in theSandboxEditorfor better visual presentation.ToggleGroupwith dynamic rendering capabilities through a newitemsprop.ToggleGroupfor improved visual options.Bug Fixes
ToggleItemandTogglecomponents for better screen reader support.Style
SandboxEditorfor improved visual hierarchy and user guidance.Chores