Skip to content

refactor: use one size name per control height - #975

Open
rohanchkrabrty wants to merge 3 commits into
mainfrom
refactor/size-names
Open

rohanchkrabrty wants to merge 3 commits into
mainfrom
refactor/size-names

Conversation

@rohanchkrabrty

@rohanchkrabrty rohanchkrabrty commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Rename the 32px control size to medium: Button normal, and large on Input, TextArea, Search, Combobox.Input, Command.Input, Checkbox, Radio and Switch. Pixel sizes and defaults do not change.
  • Rename Badge sizes micro to xsmall and regular to medium. small stays the default.
  • Replace Separator size (small, half, full) with variant (full, middle). middle insets both ends of the line.
  • Update internal usages (DataView Timeline badges), docs pages, playgrounds, Figma templates and the add-new-component skill example.
  • Add the old to new mappings to the Upgrading page.

Decisions where the proposal is silent:

  • Separator middle insets each end by 16px on a horizontal line and 8px on a vertical line, as MUI Divider middle does. The line is centered. half and small both map to middle, so the length of those lines changes (they were 50% and 20px).
  • Button small stays 22px, and Badge stays 18, 22 and 28px. These do not match the 24px and 32px rule. They are open items for design.
  • Checkbox, Radio and Switch medium keep their current sizes.
  • Badge uses xsmall, as the proposal says. An earlier analysis used extra-small.
  • CSS module classes follow the pattern each file already uses (.medium, size-medium, badge-xsmall). The new Separator classes are variant-full and variant-middle.
  • docs/V1-migration.md keeps the old names, because it describes the 1.0 release.
  • The Separator orientation demo is rewritten, because it used size="half". The Input playground uses defaultValue, so the default size is left out of the generated code.

No open PR covers this change. Badge variant and icon, and Separator color, are renamed in separate PRs.

Checks run: pnpm lint, pnpm exec tsc --noEmit in packages/react, and pnpm test:apsara pass. I compared 17 docs pages on a local dev server with the deployed docs (main) in light and dark themes. The computed size, spacing and color of every demo part match. Only the demo labels and the Separator demos differ.

@vercel

vercel Bot commented Oct 18, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
apsara Ready Ready Preview Oct 20, 2026 8:36am UTC

@coderabbitai

coderabbitai Bot commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 38 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: a3087c7e-8fbc-4175-a489-faaa94898302
📥 Commits

Reviewing files that changed from the base of the PR and between 0baca36 and db4a3f5.

📒 Files selected for processing: 69
  • .agents/skills/add-new-component/SKILL.md
  • apps/www/src/components/dataview-demo.tsx
  • apps/www/src/components/docs/footer.tsx
  • apps/www/src/components/tag/tag.module.css
  • apps/www/src/components/tag/tag.tsx
  • apps/www/src/content/docs/(overview)/upgrading.mdx
  • apps/www/src/content/docs/ai-elements/prompt-input/demo.ts
  • apps/www/src/content/docs/components/badge/demo.ts
  • apps/www/src/content/docs/components/badge/index.mdx
  • apps/www/src/content/docs/components/badge/props.ts
  • apps/www/src/content/docs/components/button/demo.ts
  • apps/www/src/content/docs/components/button/index.mdx
  • apps/www/src/content/docs/components/button/props.ts
  • apps/www/src/content/docs/components/checkbox/demo.ts
  • apps/www/src/content/docs/components/checkbox/index.mdx
  • apps/www/src/content/docs/components/checkbox/props.ts
  • apps/www/src/content/docs/components/combobox/demo.ts
  • apps/www/src/content/docs/components/combobox/props.ts
  • apps/www/src/content/docs/components/command/props.ts
  • apps/www/src/content/docs/components/floating-actions/props.ts
  • apps/www/src/content/docs/components/input/demo.ts
  • apps/www/src/content/docs/components/input/index.mdx
  • apps/www/src/content/docs/components/input/props.ts
  • 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
  • apps/www/src/content/docs/components/search/demo.ts
  • apps/www/src/content/docs/components/search/index.mdx
  • apps/www/src/content/docs/components/search/props.ts
  • apps/www/src/content/docs/components/separator/demo.ts
  • apps/www/src/content/docs/components/separator/index.mdx
  • apps/www/src/content/docs/components/separator/props.ts
  • apps/www/src/content/docs/components/switch/demo.ts
  • apps/www/src/content/docs/components/switch/index.mdx
  • apps/www/src/content/docs/components/switch/props.ts
  • apps/www/src/content/docs/components/textarea/demo.ts
  • apps/www/src/content/docs/components/textarea/index.mdx
  • apps/www/src/content/docs/components/textarea/props.ts
  • packages/react/components/badge/__tests__/badge.test.tsx
  • packages/react/components/badge/badge.module.css
  • packages/react/components/badge/badge.tsx
  • packages/react/components/button/__tests__/button.test.tsx
  • packages/react/components/button/button.module.css
  • packages/react/components/button/button.tsx
  • packages/react/components/checkbox/__tests__/checkbox.test.tsx
  • packages/react/components/checkbox/checkbox.module.css
  • packages/react/components/checkbox/checkbox.tsx
  • packages/react/components/command/command-input.tsx
  • packages/react/components/data-view/components/timeline.tsx
  • packages/react/components/input/__tests__/input.test.tsx
  • packages/react/components/input/input.module.css
  • packages/react/components/input/input.tsx
  • packages/react/components/radio/__tests__/radio.test.tsx
  • packages/react/components/radio/radio.module.css
  • packages/react/components/radio/radio.tsx
  • packages/react/components/separator/__tests__/separator.test.tsx
  • packages/react/components/separator/separator.module.css
  • packages/react/components/separator/separator.tsx
  • packages/react/components/switch/__tests__/switch.test.tsx
  • packages/react/components/switch/switch.module.css
  • packages/react/components/switch/switch.tsx
  • packages/react/components/text-area/__tests__/text-area.test.tsx
  • packages/react/components/text-area/text-area.module.css
  • packages/react/components/text-area/text-area.tsx
  • packages/react/figma/badge.figma.ts
  • packages/react/figma/button.figma.ts
  • packages/react/figma/search.figma.ts
  • packages/react/figma/separator.figma.ts
  • packages/react/figma/toolbar.figma.ts
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

@pkg-pr-new

pkg-pr-new Bot commented Oct 18, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

pnpm add https://pkg.pr.new/@raystack/apsara@975

commit: db4a3f5

@ravisuhag

Copy link
Copy Markdown
Member

@rohanchkrabrty why micro -> xsmall ? for scale.

Auto margins stopped a stretched vertical middle line from growing, so it rendered 0px tall. The upgrading note no longer says middle is always longer than half and small.

This branch was successfully deployed

1 active deployment
Preview — db4a3f58 Deployed Oct 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants