Skip to content

fix(react-input, react-textarea): Fix Field control size handling - #36453

Open
dmytrokirpa wants to merge 1 commit into
microsoft:masterfrom
dmytrokirpa:fix/field-input-textarea-sizes
Open

fix(react-input, react-textarea): Fix Field control size handling#36453
dmytrokirpa wants to merge 1 commit into
microsoft:masterfrom
dmytrokirpa:fix/field-input-textarea-sizes

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Fixes Field control size handling for textfield-like controls.

Changes

  • Updated Input size resolution in useInput to default from Field context (fieldContext?.size ?? 'medium').
  • Updated Textarea size resolution in useTextarea to default from Field context (fieldContext?.size ?? 'medium').
  • Updated Combobox size resolution in useCombobox to default from Field context (fieldContext?.size ?? 'medium').
  • Updated Dropdown size resolution in useDropdown to default from Field context (fieldContext?.size ?? 'medium').
  • Updated Select size resolution in useSelect to default from Field context (fieldContext?.size ?? 'medium').
  • Removed supportsSize: true from useFieldControlProps_unstable options in Input and Textarea.

Packages affected

  • @fluentui/react-combobox (patch)
  • @fluentui/react-input (patch)
  • @fluentui/react-select (patch)
  • @fluentui/react-textarea (patch)

Beachball change files have been created for all affected packages.

Before (all inputs don't respect field size)

image

After (inputs respect field size)

image

@github-actions

github-actions Bot commented Jul 25, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox (including child components)
138.149 kB
44.681 kB
138.23 kB
44.719 kB
81 B
38 B
react-combobox
Dropdown (including child components)
137.905 kB
44.453 kB
137.986 kB
44.486 kB
81 B
33 B
react-components
react-components: entire library
1.294 MB
326.152 kB
1.295 MB
326.246 kB
278 B
94 B
react-datepicker-compat
DatePicker Compat
216.224 kB
63.964 kB
216.276 kB
63.974 kB
52 B
10 B
react-headless-components-preview
react-headless-components-preview: entire library
247.623 kB
71.456 kB
247.659 kB
71.468 kB
36 B
12 B
react-input
Input
25.027 kB
8.183 kB
25.092 kB
8.212 kB
65 B
29 B
react-select
Select
24.876 kB
8.936 kB
24.957 kB
8.972 kB
81 B
36 B
react-textarea
Textarea
23.392 kB
8.447 kB
23.457 kB
8.478 kB
65 B
31 B
react-timepicker-compat
TimePicker
140.867 kB
46.058 kB
140.934 kB
46.073 kB
67 B
15 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
66.281 kB
19.002 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
226.026 kB
68.049 kB
react-components
react-components: FluentProvider & webLightTheme
39.504 kB
13.112 kB
react-portal-compat
PortalCompatProvider
5.341 kB
2.146 kB
react-tag-picker
@fluentui/react-tag-picker - package
174.01 kB
54.191 kB
🤖 This report was generated against 47b4e4269f0415a4942fb4ddf5ebb3998fc4aa46

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

@github-actions github-actions Bot Jul 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Field 11 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Field.Select+horizontal.default.chromium.png 5924 Changed
vr-tests-react-components/Field.Dropdown+horizontal.default.chromium.png 6002 Changed
vr-tests-react-components/Field.Combobox+horizontal.default.chromium.png 6024 Changed
vr-tests-react-components/Field.Textarea+horizontal.default.chromium.png 2696 Changed
vr-tests-react-components/Field.size-large.default.chromium.png 3841 Changed
vr-tests-react-components/Field.Dropdown.default.chromium.png 3582 Changed
vr-tests-react-components/Field.Input+horizontal.default.chromium.png 5610 Changed
vr-tests-react-components/Field.size-small.default.chromium.png 3841 Changed
vr-tests-react-components/Field.Combobox.default.chromium.png 3608 Changed
vr-tests-react-components/Field.Select.default.chromium.png 3208 Changed
vr-tests-react-components/Field.Textarea.default.chromium.png 3543 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 906 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 314 Changed
vr-tests-react-components/ProgressBar converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 85 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 66 Changed
vr-tests-react-components/TagPicker 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

There were 2 duplicate changes discarded. Check the build logs for more information.

@dmytrokirpa
dmytrokirpa marked this pull request as ready for review July 25, 2026 16:13
@dmytrokirpa
dmytrokirpa requested review from a team and mainframev as code owners July 25, 2026 16:13
});

expect(result.current.input.value).toBe('test');
expect(result.current.size).toBe('large');

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.

q: is this expected behaviour in terms of design language consistency ? user can go wild and use various sizes between field/input ?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

From a design language point of view, I’m not sure this is behaving as expected. In the all controls implementation, context values act as defaults, and component props override them.

const fieldControlProps = useFieldControlProps_unstable(props, {
supportsLabelFor: true,
supportsRequired: true,
supportsSize: true,

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.

with these changes is this prop dead API now ? it is still used in TagPickerInput, should we reflect these changes there as well ?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

it's not a dead API, it just doesn't make sense for base hooks as they shouldn't have style props (size/appearance/etc)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I'll double check for TagPicker and other components

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

TagPicker didn't use the supportsSize: true and its sizes doesn't map to Field sizes, but Combobox, Dropdown and Select components have been fixed

@dmytrokirpa
dmytrokirpa force-pushed the fix/field-input-textarea-sizes branch from 66e12cc to b13bb7e Compare July 28, 2026 09:24
@dmytrokirpa
dmytrokirpa requested a review from a team as a code owner July 28, 2026 09:24
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