feat!(BREAKING CHANGE): remove misused styling props

[paanSinghCoder]

Summary

Removes one-off styling props across components that should be handled via className / style, and reshapes Callout's outline boolean into a proper variant axis. These props let callers inline layout/width overrides that bypass the design system.

CSS defaults are preserved (input/textarea/search containers stay width: 100%; dialogs stay 400px), so default rendering is unchanged — only explicit prop usage needs migration.

⚠️ Breaking changes

Component	Change
Callout	Removed width. outline boolean → variant="outline" (variant?: 'solid' | 'outline', default solid)
Button	Removed width, maxWidth
Input	Removed width
TextArea	Removed width
List	Removed maxWidth (on List) and minWidth (on List.Label)
Flex	Removed width="full"
Dialog.Content	Removed width
AlertDialog.Content	Removed width

variant on Callout is a separate axis from type, so the combination is preserved — e.g. <Callout type="success" variant="outline"> still works.

Migration

Before	After
<Callout outline>	<Callout variant="outline">
<Callout width={500}>	<Callout style={{ width: 500 }}>
<Button width="100%">	<Button style={{ width: '100%' }}>
<Flex width="full">	<Flex style={{ width: '100%' }}>
<List maxWidth="600px">	<List style={{ maxWidth: '600px' }}>
<List.Label minWidth="88px">	<List.Label style={{ minWidth: '88px' }}>
<Dialog.Content width={500}>	<Dialog.Content style={{ width: 500 }}>
<TextArea width="300px">	<TextArea style={{ width: '300px' }}>
<Input width="560px">	wrap in a sized container, or classNames={{ container }}

Not in this PR (follow-up)

• Search.width removal and Input type-level hardening are deferred. They're coupled — Search extends InputProps, and DataView.Search / DataView.Search (beta) / TableSearch all forward to Search — so they'll land together. A few Input doc examples still reference width and will be migrated in that follow-up.

Verification

• ✅ All in-scope component test suites pass (270 tests)
• ✅ tsc clean for changed areas; Biome clean
• ✅ Audited repo-wide: no dangling references, Figma Code Connect (callout.figma.tsx) updated to map variant, docs/demos/playground migrated

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Jun 5, 2026 9:31am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9096a47c-cd6a-4a84-b5b0-2d61c3e8c729

📥 Commits

Reviewing files that changed from the base of the PR and between 2efe162 and 20ada26.

📒 Files selected for processing (3)

• 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

💤 Files with no reviewable changes (2)

• apps/www/src/content/docs/components/input/props.ts
• apps/www/src/content/docs/components/input/index.mdx

---

📝 Walkthrough

Walkthrough

This pull request removes width-related styling props (width, maxWidth, minWidth) across components and demos, migrating callers to use explicit inline style objects instead. Flex drops its width='full' variant; Callout replaces boolean outline with a variant prop and drops width. Dialog/AlertDialog, Button, Input, TextArea, and List APIs remove width-related props. Demo snippets, docs, Figma mapping, and tests were updated accordingly.

Suggested reviewers

• rsbh
• rohanchkrabrty

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 17.24% 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 clearly and specifically identifies the main change: removal of misused styling props as a breaking change, which aligns with the comprehensive refactoring across multiple components in the changeset.
Description check	✅ Passed	The description is well-structured and directly related to the changeset, providing a clear summary of removed styling props, breaking changes, migration guidance, and verification steps for the refactoring effort.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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