Open
Conversation
Contributor
WalkthroughThis pull request introduces a new Switch component to the design system by adding a Radix UI-based implementation, comprehensive MDX documentation with live examples, updating the atoms registry, adding the required radix-ui dependency, and exporting the component from the main API surface. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
carlagn
force-pushed
the
feat/DR-7298-switch
branch
from
b70d2ba to
320f822
Compare
Contributor
🍈 Lychee Link Check Report3664 links: ❌ Errors
Full Statistics Table
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/eclipse/content/design-system/atoms/switch.mdx`:
- Around line 467-477: The doc's styling tokens/sizes for the Switch component
are out of sync with the implementation; inspect the Switch component
implementation (named Switch) and either update this MDX (switch.mdx) to match
the actual classes (e.g., replace bg-input/bg-primary/thumb tokens with the
current bg-background-neutral-* classes and the actual Tailwind size utilities
used for heights/widths and thumb sizes) or change the component to use the
documented design tokens (bg-input, bg-primary, bg-background,
bg-primary-foreground, ring-ring/50, rounded-full, and the exact pixel sizes for
sm/default); ensure the MDX lists the same token names and pixel dimensions as
the component's classnames and that the focus ring, border (transparent with
shadow), and size variants (sm/default) exactly match the implementation.
- Around line 12-24: The examples render an unlabeled Switch which is
inaccessible; update the BasicSwitch component and the live example to provide
an accessible label by either passing an aria-label prop to the Switch (e.g.,
aria-label="Enable feature") or pairing the Switch with an explicit label
element and id. Specifically modify the BasicSwitch function (export function
BasicSwitch) to render <Switch aria-label="..."> (or wrap Switch with a <label
htmlFor="..."> and give the Switch an id) and update the inline Live Example
<Switch /> inside the demo div the same way so both examples show accessible
usage.
In `@packages/eclipse/src/components/switch.tsx`:
- Around line 14-27: The small variant lacks size classes so
SwitchPrimitive.Root and SwitchPrimitive.Thumb render without dimensions; add
matching data-[size=sm] rules alongside the existing data-[size=default] ones:
on SwitchPrimitive.Root add data-[size=sm]:h-... and data-[size=sm]:w-... (and
any disabled/outline equivalents) and on SwitchPrimitive.Thumb add
data-[size=sm] sizing (width/height) and adjust the translate-x for
data-[state=checked] for the sm thumb to correctly move to the end; update the
cn calls where data-[size=default] appears to include the corresponding
data-[size=sm] tokens so the small variant gets proper root and thumb dimensions
and translations.
- Around line 1-4: Add the client directive and correct Radix import: this file
uses the Radix Switch primitive so add "use client" as the first line of
packages/eclipse/src/components/switch.tsx, and change the import from
"radix-ui" to the scoped package "@radix-ui/react-switch" (the existing import
alias SwitchPrimitive should be preserved), ensuring the Switch component and
any references to SwitchPrimitive continue to work with the updated import.
- Line 2: Replace the import of SwitchPrimitive from the aggregator "radix-ui"
with the scoped package "@radix-ui/react-switch" and add
"@radix-ui/react-switch" to package.json dependencies; specifically update the
import statement that currently reads like `import { Switch as SwitchPrimitive }
from "radix-ui";` to import from "@radix-ui/react-switch" and run your package
install so SwitchPrimitive resolves the same way as other components
(tooltip/dialog/checkbox) in the codebase.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
apps/eclipse/content/design-system/atoms/meta.jsonapps/eclipse/content/design-system/atoms/switch.mdxapps/eclipse/src/app/layout.tsxpackages/eclipse/package.jsonpackages/eclipse/src/components/index.tspackages/eclipse/src/components/switch.tsx
carlagn
requested review from
AmanVarshney01,
ArthurGamby,
aidankmcalister,
ankur-arch,
mhartington and
mhessdev
carlagn
force-pushed
the
feat/DR-7298-switch
branch
from
4024ac0 to
a2a4341
Compare
Update stylings remove size prop
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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 by CodeRabbit
Release Notes
New Features
Chores