fix(react-tag-picker): drop no-op supportsSize field control option - #36468
Draft
Hotell wants to merge 4 commits into
Draft
fix(react-tag-picker): drop no-op supportsSize field control option#36468Hotell wants to merge 4 commits into
supportsSize field control option#36468Hotell wants to merge 4 commits into
Conversation
`useFieldControlProps_unstable({ supportsSize: true })` injects the Field size
into the control props. That only works if the control reads `size` from the
same props object it passes to the hook.
- `TagPickerInput` never did: it has no `size` prop and derives its size from
`TagPickerContext`, on a different scale (`medium | large | extra-large`).
The injected value only reached the native `<input>`, where React drops it
as an invalid numeric attribute. Removed.
- `Input`/`Textarea` no longer do either, since the base-hook split moved the
`size` destructuring into the styled hook. Flagged with a TODO; the actual
removal + fix lands in microsoft#36453.
The option is deprecated in favour of reading the size in the styled hook via
`useFieldContext_unstable()`.
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
Hotell
changed the title
supportsSize and drop its no-op TagPicker usagesupportsSize field control option
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Menu 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu.Nested Submenus Small Viewport Flipped.nested menu.chromium.png | 695 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
| 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 | 492 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 513 | Changed |
vr-tests-react-components/ProgressBar converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 110 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 81 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png | 1319 | Changed |
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Follow-up cleanup discovered while reviewing #36453.
useFieldControlProps_unstable(props, { supportsSize: true })setssizeon the props it returns, so it only has an effect if the control readssizefrom that returned object.TagPickerInputnever did — removedTagPickerInputPropsexplicitly omitssize, andTagPickerInputBaseStateomits it too.TagPickerContext, on a different scale ('medium' | 'large' | 'extra-large') thanField's'small' | 'medium' | 'large'.<input>(sizeis ininputProperties), where React discards it as an invalid numeric attribute.Verified by rendering
useTagPickerInput_unstableinside<Field size="small">:No user-visible symptom — purely dead config. Removed, with a note explaining why it must not be re-added.
Input/Textarea—TODOonlyThe base-hook split moved the
sizedestructuring into the styled hook, so the injectedsizeis stripped before the base hook ever runs. Left in place here with aTODO; the actual removal and the real fix (readinguseFieldContext_unstable()?.sizein the styled hook) land in #36453 — this PR deliberately does not touch that to avoid conflicting.supportsSizeis documented, not deprecatedAn earlier revision of this PR marked the option
@deprecated. That was walked back: the option is not broken, it does exactly what it documents, and it remains the most ergonomic choice for any control that readssizeoff the returned props. The no-op only arises from Fluent's own base-hook/styled-hook split — an implementation detail we should not push onto external consumers via deprecation warnings.Instead the JSDoc now spells out the constraint, so the failure mode is discoverable at the call site.
Note
Draft until #36453 merges. After that, the two
TODOs (and theirsupportsSize: truecall sites) should be removed.Verification
nx run-many -t lint test type-check -p react-field react-tag-picker react-input react-textarea— all green (280 tests)yarn beachball check— OKnx run react-field:generate-api— noapi.mddelta (API Extractor does not emit member JSDoc for type aliases)