feat(ui): new Switch #11061
Draft
feat(ui): new Switch #11061
+455
−375
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
replace heroui switch implementation with radix-ui for better maintainability update package.json and yarn.lock to include new dependency
…ange to checked/onCheckedChange Standardize Switch component props across the codebase to use checked/onCheckedChange instead of isSelected/onValueChange for better consistency with common React patterns. Also updates loading state prop from isLoading to loading and removes size prop where unnecessary. The changes include: - Replacing isSelected with checked - Replacing onValueChange with onCheckedChange - Updating isLoading to loading - Removing redundant size props - Adjusting styling to accommodate new loading state
- Add default values for loading and disabled props - Update styling classes and add group cursor pointer - Restructure loading indicator and thumb positioning - Wrap DescriptionSwitch children in flex container
- Restructure DescriptionSwitch to use explicit props instead of children - Add label, description, and position props for better customization - Update all switch usages in SettingsTab to use new props format
Remove redundant children prop from CustomSwitchProps since it's already omitted from the parent type
Ensure proper label association with switch input by generating unique ID using React's useId hook
Add sm, md, and lg size options to the Switch component with corresponding styles. This allows for better visual consistency across different UI contexts.
update switch component layout and spacing to improve consistency modify secondary-foreground color variable to use correct semantic token
- Add new switch.css file with gradient and transition styles - Update switch.tsx component with new styling classes and animations - Remove loader icon in favor of animated gradient effect
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This pull request replaces the HeroUI Switch component with a custom implementation based on Radix UI primitives, improving maintainability and providing better control over the component's behavior and styling.
Key Changes
Component Migration
@radix-ui/react-switchas a new dependencyAPI Improvements
isSelected→checked,onValueChange→onCheckedChangeisLoading→loadingsizepropEnhanced Features
Code Updates
Updated 30+ files across the codebase to use the new Switch API:
SettingsTab.tsx,AboutSettings.tsx, etc.)AihubmixPage.tsx,DmxapiPage.tsx, etc.)Benefits
Breaking Changes
checked/onCheckedChangeinstead ofisSelected/onValueChangeisLoadingrenamed toloadingThese changes are backward-compatible through the wrapper components and have been systematically applied throughout the codebase.
Testing