fix: textarea overflow, default rows, and size/variant API#738
fix: textarea overflow, default rows, and size/variant API#738rohanchkrabrty wants to merge 2 commits intomainfrom
Conversation
Fix overflow: hidden preventing scroll, replace CSS min-height with native rows attribute (default 3), and add size/variant CVA variants to align TextArea API with InputField. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis pull request enhances the TextArea component by adding Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ 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. Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/raystack/components/text-area/text-area.tsx (1)
35-47: Prefer explicitrowsdefault in props destructuring.Right now the default
rowsvalue is implicit viarows={3}plus{...props}override order. Makingrowsexplicit in the function signature improves readability and avoids subtle override behavior.Suggested refactor
export function TextArea({ className, style, disabled, width = '100%', + rows = 3, value, onChange, placeholder, required, size, variant, ...props }: TextAreaProps) { @@ <textarea - rows={3} + rows={rows} className={cx( textAreaVariants({ size, variant }), disabled && styles.disabled, className )}Also applies to: 53-66
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/text-area/text-area.tsx` around lines 35 - 47, The TextArea component currently relies on an implicit default for rows via rows={3} merged from {...props}; update the TextArea function signature to destructure rows with an explicit default (e.g., rows = 3) alongside other props so the default is obvious and cannot be accidentally overridden by spread order; locate the TextArea function (export function TextArea) and remove or adjust any later rows={3} usage so the component uses the destructured rows value when rendering the underlying textarea.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/raystack/components/text-area/text-area.module.css`:
- Around line 90-93: The CSS for .variant-borderless currently removes the
border and outline on focus, making keyboard focus invisible; update the focus
rule for .variant-borderless:focus:not(:disabled) to keep a visible focus
indicator (e.g., use a non-transparent border-color, box-shadow, or outline with
accessible contrast) instead of border-color: transparent and outline: none so
keyboard users can see focus on the TextArea component (class
.variant-borderless / TextArea component).
---
Nitpick comments:
In `@packages/raystack/components/text-area/text-area.tsx`:
- Around line 35-47: The TextArea component currently relies on an implicit
default for rows via rows={3} merged from {...props}; update the TextArea
function signature to destructure rows with an explicit default (e.g., rows = 3)
alongside other props so the default is obvious and cannot be accidentally
overridden by spread order; locate the TextArea function (export function
TextArea) and remove or adjust any later rows={3} usage so the component uses
the destructured rows value when rendering the underlying textarea.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e5091c4d-56ca-4e79-866e-8c23a668f795
📒 Files selected for processing (6)
apps/www/src/content/docs/components/textarea/demo.tsapps/www/src/content/docs/components/textarea/index.mdxapps/www/src/content/docs/components/textarea/props.tspackages/raystack/components/text-area/__tests__/text-area.test.tsxpackages/raystack/components/text-area/text-area.module.csspackages/raystack/components/text-area/text-area.tsx
| .variant-borderless:focus:not(:disabled) { | ||
| border-color: transparent; | ||
| outline: none; | ||
| } |
There was a problem hiding this comment.
Borderless variant loses visible keyboard focus state.
Line 90–93 keeps border transparent and removes outline, so focused and unfocused states become visually indistinguishable for keyboard users. Please retain a visible focus indicator for variant="borderless".
Suggested patch
.variant-borderless:focus:not(:disabled) {
border-color: transparent;
- outline: none;
+ outline: 2px solid var(--rs-color-border-accent-emphasis);
+ outline-offset: 1px;
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/text-area/text-area.module.css` around lines 90
- 93, The CSS for .variant-borderless currently removes the border and outline
on focus, making keyboard focus invisible; update the focus rule for
.variant-borderless:focus:not(:disabled) to keep a visible focus indicator
(e.g., use a non-transparent border-color, box-shadow, or outline with
accessible contrast) instead of border-color: transparent and outline: none so
keyboard users can see focus on the TextArea component (class
.variant-borderless / TextArea component).
1 participant
Summary
overflow: autoso users can scroll when content exceeds the visible arearowsattribute -- removed hardcodedmin-height: var(--rs-space-13)and setrows={3}as default, allowing users to override with<TextArea rows={6} />sizeandvariantCVA variants to align TextArea API with InputField -- supportssize="small" | "large"andvariant="default" | "borderless"with matching defaults (size: 'large',variant: 'default')Test plan
<TextArea rows={6} />renders taller than defaultsize="small"applies smaller paddingvariant="borderless"removes bordersCloses #645
🤖 Generated with Claude Code