Skip to content

Core: Fix input width #33591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghengeveld merged 2 commits into from
Jan 19, 2026
Merged

Core: Fix input width #33591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9448d72
Fix input width
ghengeveld Jan 19, 2026
7ee4fa6
Merge branch 'next' into fix-input-width
ghengeveld Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions code/core/src/components/components/Form/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export const Input = Object.assign(
})
)<InputProps>(styles, sizes, alignment, validation, {
minHeight: 32,
width: '100%',
}),
Comment on lines 84 to 87

@coderabbitai coderabbitai Bot Jan 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cat -n code/core/src/components/components/Form/Input.tsx | head -100

Repository: storybookjs/storybook

Length of output: 2540

🏁 Script executed:

# Search for Input component usages with size prop
rg -n "size=\"|size={" code/core/src/components/components/Form/ -A 2 -B 2 --type tsx

Repository: storybookjs/storybook

Length of output: 154

🏁 Script executed:

# Find all files that import Input from Form/Input
rg -l "from.*Form/Input|from.*Form/Input" code/ --type tsx

Repository: storybookjs/storybook

Length of output: 92

🏁 Script executed:

# Search for size prop values being used in the codebase
rg "size=['\"]" code/ --type tsx -o | sort | uniq -c

Repository: storybookjs/storybook

Length of output: 92

🏁 Script executed:

cat -n code/core/src/components/components/Form/styles.ts | head -150

Repository: storybookjs/storybook

Length of output: 3610

🏁 Script executed:

# Search for Input component usages with size prop - corrected syntax
rg -n 'Input.*size=' code/ --type ts --type tsx -B 1 -A 1

Repository: storybookjs/storybook

Length of output: 92

🏁 Script executed:

# Also search for imports of Input component
rg -n 'import.*Input.*from.*Form/Input' code/ --type ts --type tsx

Repository: storybookjs/storybook

Length of output: 92

🏁 Script executed:

fd -t f -e ts -e tsx | xargs rg -l 'Input' | head -20

Repository: storybookjs/storybook

Length of output: 1234

🏁 Script executed:

# Search directly for usage patterns
rg '<Input' code/ -A 2 | head -50

Repository: storybookjs/storybook

Length of output: 3196

🏁 Script executed:

# Check if flex or auto size is used
rg "size=['\"]flex['\"]|size=['\"]auto['\"]" code/

Repository: storybookjs/storybook

Length of output: 265

🏁 Script executed:

cat -n code/addons/docs/src/blocks/controls/Text.tsx | head -80

Repository: storybookjs/storybook

Length of output: 2613

🏁 Script executed:

find code/core/src/components/components/Form -name "*.tsx" -type f | head -20

Repository: storybookjs/storybook

Length of output: 788

🏁 Script executed:

cat -n code/core/src/components/components/Form/Textarea.tsx | head -50

Repository: storybookjs/storybook

Length of output: 1698

🏁 Script executed:

cat -n code/core/src/components/components/Form/Textarea.tsx | tail -40

Repository: storybookjs/storybook

Length of output: 1336

Check size prop behavior—width: '100%' overrides size="flex" which is actively used.

width: '100%' is applied after sizes, which means:

  • size="flex" returns { flex: 1 }, then width: '100%' overrides it (breaks flex layouts in Text, Files, Number controls)
  • size="auto" returns { display: 'inline' }, then width: '100%' contradicts inline display

This is a functional regression affecting real uses in the codebase. Make width conditional on size to preserve the intended behavior:

Suggested fix 
-  )<InputProps>(styles, sizes, alignment, validation, {
-    minHeight: 32,
-    width: '100%',
-  }),
+  )<InputProps>(styles, sizes, alignment, validation, ({ size }) => ({
+    minHeight: 32,
+    width: !size || size === '100%' ? '100%' : 'auto',
+  })),
🤖 Prompt for AI Agents 
In `@code/core/src/components/components/Form/Input.tsx` around lines 84 - 87, The
width: '100%' being applied after the sizes object overrides size-specific
styles (e.g., size="flex" -> {flex:1}, size="auto" -> {display:'inline'})
causing layout regressions; update the Input style merge in Input.tsx where
styles, sizes, alignment, validation, { minHeight:32, width:'100%' } are
composed so that width is conditional on the resolved size: if size === 'flex'
do not set width (let flex:1 handle sizing), if size === 'auto' avoid forcing
width, otherwise apply width:'100%'; ensure the conditional uses the same size
prop used by the sizes map (refer to sizes and InputProps) so Text, Files,
Number controls retain their intended behavior.

{
displayName: 'Input',
Expand Down
2 changes: 1 addition & 1 deletion code/core/src/components/components/Form/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const styleResets: CSSObject = {
appearance: 'none',
border: '0 none',
boxSizing: 'inherit',
display: ' block',
display: 'block',
margin: ' 0',
background: 'transparent',
padding: 0,
Expand Down