feat(radio): add size variants, orientation prop, and fix CSS issues by rohanchkrabrty · Pull Request #739 · raystack/apsara

rohanchkrabrty · 2026-04-14T20:24:48Z

Summary

Size variants: Add size prop (small | large) to Radio using CVA, following the same pattern as the Switch component. Default is large (preserving current 16px size). Small variant uses --rs-space-4 (12px).
Orientation prop: Add orientation prop (vertical | horizontal) to Radio.Group for controlling layout direction. Default is vertical. Implemented as a custom Apsara feature since Base UI's RadioGroup does not natively support orientation.
Fix indicator token: Replace --rs-radius-3 (a border-radius token) with --rs-space-2 (a spacing token) for the indicator dot width/height, fixing semantic token misuse.
CSS audit: Rename .radio to .group, add clarifying CSS comments for the display property usage on .group (flex for layout) and .radioitem (inline-flex for centering indicator), and remove fixed dimensions from .radioitem base class (moved to size variants).
Proportional indicator scaling: The indicator dot scales down for the small size variant using --rs-space-1.

Closes #630

Test plan

All 22 radio tests pass (including 7 new tests for sizes and orientation)
Full test suite passes (1626 tests across 70 files)
No new type errors introduced (verified with tsc --noEmit)
Visually verify radio indicator dot renders correctly at both sizes
Verify horizontal/vertical orientation layout in Storybook

🤖 Generated with Claude Code

vercel · 2026-04-14T20:24:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Apr 21, 2026 1:26pm

coderabbitai · 2026-04-14T20:24:56Z

Warning

Rate limit exceeded

@rohanchkrabrty has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 10 minutes and 27 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 10 minutes and 27 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2f714e39-cd93-40ff-a8ab-36384386540e

📥 Commits

Reviewing files that changed from the base of the PR and between d2a9805 and 23d908b.

📒 Files selected for processing (7)

apps/www/src/content/docs/components/radio/demo.ts
apps/www/src/content/docs/components/radio/index.mdx
apps/www/src/content/docs/components/radio/props.ts
docs/V1-migration.md
packages/raystack/components/radio/__tests__/radio.test.tsx
packages/raystack/components/radio/radio.module.css
packages/raystack/components/radio/radio.tsx

📝 Walkthrough

Walkthrough

The changes add size variants and orientation support to the Radio component. The RadioItem component now accepts an optional size prop ('small' | 'large', default 'large'), while RadioGroup accepts an optional orientation prop ('vertical' | 'horizontal', default 'vertical'). CSS module classes are reorganized, with .radio renamed to .group and new .large, .small, and .group-horizontal classes added. Component tests and documentation are updated to cover the new variants, and the migration guide is updated to document the reintroduced orientation prop on RadioGroup.

Suggested reviewers

rsbh

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: adding size variants, orientation prop, and fixing CSS issues to the Radio component.
Description check	✅ Passed	The description clearly documents the size variants, orientation prop, indicator token fix, CSS audit, and test results, all related to the Radio component changes.
Linked Issues check	✅ Passed	All coding requirements from issue `#630` are met: size variants added to Radio with 'small'\|'large' options [`#630`], orientation prop added to Radio.Group supporting 'vertical'\|'horizontal' [`#630`], and CSS issues fixed including token replacement and class renaming [`#630`].
Out of Scope Changes check	✅ Passed	All changes are scoped to Radio component enhancements and documentation updates directly related to issue `#630` requirements; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Remove "orientation prop removed" from breaking changes since PR #739 re-adds orientation support on Radio.Group. Add New Features subsection documenting the new size prop and orientation prop. Update the "After" code example and Table of Contents numbering. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

coderabbitai

🧹 Nitpick comments (1)

packages/raystack/components/radio/radio.module.css (1)
8-10: Optional: scope .group-horizontal under .group for stronger specificity.

Standalone .group-horizontal works today because it appears after .group in the stylesheet, but combining it (e.g., .group.group-horizontal) makes the override order-independent and clarifies intent.
Proposed tweak
-.group-horizontal {
+.group.group-horizontal {
   flex-direction: row;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/raystack/components/radio/radio.module.css` around lines 8 - 10, The
.group-horizontal rule should be made more specific so it reliably overrides
.group; change the selector from .group-horizontal to .group.group-horizontal
and keep the same properties (flex-direction: row) so the horizontal variant is
explicitly scoped to elements that also have the .group class (update any
related usages if necessary to ensure elements carry both classes).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/raystack/components/radio/radio.module.css`:
- Around line 8-10: The .group-horizontal rule should be made more specific so
it reliably overrides .group; change the selector from .group-horizontal to
.group.group-horizontal and keep the same properties (flex-direction: row) so
the horizontal variant is explicitly scoped to elements that also have the
.group class (update any related usages if necessary to ensure elements carry
both classes).

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 428fb458-eda6-4c62-8cd4-a9124e65695f

📥 Commits

Reviewing files that changed from the base of the PR and between 26e02f6 and d2a9805.

📒 Files selected for processing (7)

apps/www/src/content/docs/components/radio/demo.ts
apps/www/src/content/docs/components/radio/index.mdx
apps/www/src/content/docs/components/radio/props.ts
docs/V1-migration.md
packages/raystack/components/radio/__tests__/radio.test.tsx
packages/raystack/components/radio/radio.module.css
packages/raystack/components/radio/radio.tsx

#630) - Add size prop (small | large) using CVA, matching Switch component pattern - Add orientation prop (vertical | horizontal) to Radio.Group for layout control - Fix indicator dot using --rs-radius-3 (border-radius token) for width/height, replaced with --rs-space-2 (spacing token) for correct semantic usage - Add CSS comments clarifying display property intent on .group and .radioitem - Scale indicator dot proportionally for each size variant - Add tests for size variants and orientation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add documentation for the new size prop (large/small) on Radio items and orientation prop (vertical/horizontal) on Radio.Group. Includes new demo examples with tabs for each variant, updated props.ts interfaces, and cleaned up demo code formatting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Remove "orientation prop removed" from breaking changes since PR #739 re-adds orientation support on Radio.Group. Add New Features subsection documenting the new size prop and orientation prop. Update the "After" code example and Table of Contents numbering. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview April 14, 2026 20:30 View deployment

vercel Bot deployed to Preview April 15, 2026 21:08 View deployment

rohanchkrabrty self-assigned this Apr 17, 2026

vercel Bot deployed to Preview April 17, 2026 06:42 View deployment

coderabbitai Bot reviewed Apr 17, 2026

View reviewed changes

rohanchkrabrty and others added 3 commits April 17, 2026 12:18

rohanchkrabrty force-pushed the feat/630-radio-size-orientation-css branch from d2a9805 to 92ca271 Compare April 17, 2026 06:48

vercel Bot deployed to Preview April 17, 2026 06:52 View deployment

paanSinghCoder reviewed Apr 17, 2026

View reviewed changes

Comment thread packages/raystack/components/radio/radio.tsx Outdated

Comment thread packages/raystack/components/radio/radio.tsx

Comment thread packages/raystack/components/radio/radio.tsx Outdated

Comment thread apps/www/src/content/docs/components/radio/props.ts

rohanchkrabrty added 3 commits April 21, 2026 18:27

fix: pr comments

f321fbe

feat: update radio examples

12c33f2

Merge branch 'main' into feat/630-radio-size-orientation-css

23d908b

rohanchkrabrty requested a review from paanSinghCoder April 21, 2026 13:23

rohanchkrabrty enabled auto-merge (squash) April 21, 2026 13:23

vercel Bot deployed to Preview April 21, 2026 13:26 View deployment

paanSinghCoder approved these changes Apr 22, 2026

View reviewed changes

rohanchkrabrty merged commit 6f171e8 into main Apr 22, 2026
5 checks passed

rohanchkrabrty deleted the feat/630-radio-size-orientation-css branch April 22, 2026 08:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(radio): add size variants, orientation prop, and fix CSS issues#739

feat(radio): add size variants, orientation prop, and fix CSS issues#739
rohanchkrabrty merged 6 commits intomainfrom
feat/630-radio-size-orientation-css

rohanchkrabrty commented Apr 14, 2026

Uh oh!

vercel Bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 14, 2026 •

edited

Loading

Rate limit exceeded

Walkthrough

Suggested reviewers

❌ Failed checks (1 warning)

Review ran into problems

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

rohanchkrabrty commented Apr 14, 2026

Summary

Test plan

Uh oh!

vercel Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Suggested reviewers

❌ Failed checks (1 warning)

Review ran into problems

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Apr 14, 2026 •

edited

Loading

coderabbitai Bot commented Apr 14, 2026 •

edited

Loading