feat: Add FieldContext to pass props to controls inside Field #27399

behowell · 2023-03-31T10:33:16Z

Previous Behavior

Field reads and modifies the props of its child elements, in order to set up the aria-labelledby, etc. associations between the control and the labels in the Field.

This works fine in common, simple cases where the control is the direct child of the field. However, some form validation libraries require inserting a React component around the control, as is the case with #27202. This component interferes with the prop setting approach that Field was using.

New Behavior

Create FieldContext to pass information about the Field to its child elements.
Add utility function useFieldControlProps_unstable for controls to use to merge field props from the context.
Hook up FieldContext to form controls in the library.
Field no longer reads or modifies props of its child element.

Related Issue(s)

Fixes [Bug]: Field overwrites id of wrapped control #27202

…ild props directly

fabricteam · 2023-03-31T10:41:28Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-checkbox` Checkbox	`36.067 kB` `10.856 kB`	`37.02 kB` `11.255 kB`	`953 B` `399 B`
`react-combobox` Combobox (including child components)	`88.743 kB` `28.107 kB`	`89.718 kB` `28.49 kB`	`975 B` `383 B`
`react-combobox` Dropdown (including child components)	`87.441 kB` `27.855 kB`	`88.402 kB` `28.217 kB`	`961 B` `362 B`
`react-datepicker-compat` DatePicker Compat	`250.208 kB` `66.95 kB`	`251.272 kB` `67.329 kB`	`1.064 kB` `379 B`
`react-field` Field	`20.552 kB` `7.092 kB`	`21.509 kB` `7.408 kB`	`957 B` `316 B`
`react-input` Input	`25.747 kB` `7.697 kB`	`26.707 kB` `8.113 kB`	`960 B` `416 B`
`react-progress` ProgressBar	`15.961 kB` `5.675 kB`	`16.322 kB` `5.822 kB`	`361 B` `147 B`
`react-radio` RadioGroup	`17.988 kB` `6.544 kB`	`18.889 kB` `6.929 kB`	`901 B` `385 B`
`react-select` Select	`26.957 kB` `8.766 kB`	`27.915 kB` `9.189 kB`	`958 B` `423 B`
`react-slider` Slider	`35.919 kB` `11.059 kB`	`36.845 kB` `11.474 kB`	`926 B` `415 B`
`react-spinbutton` SpinButton	`35.648 kB` `10.348 kB`	`36.598 kB` `10.752 kB`	`950 B` `404 B`
`react-switch` Switch	`31.413 kB` `9.294 kB`	`32.438 kB` `9.706 kB`	`1.025 kB` `412 B`
`react-table` DataGrid	`149.878 kB` `40.662 kB`	`150.829 kB` `41.052 kB`	`951 B` `390 B`
`react-table` Table as DataGrid	`138.018 kB` `35.282 kB`	`138.971 kB` `35.722 kB`	`953 B` `440 B`
`react-table` Table (Selection only)	`85.849 kB` `21.303 kB`	`86.8 kB` `21.742 kB`	`951 B` `439 B`
`react-table` Table (Sort only)	`85.179 kB` `21.113 kB`	`86.13 kB` `21.549 kB`	`951 B` `436 B`
`react-textarea` Textarea	`29.07 kB` `9.081 kB`	`30.108 kB` `9.478 kB`	`1.038 kB` `397 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.994 kB` `18.395 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.512 kB` `57.555 kB`
`react-components` react-components: FluentProvider & webLightTheme	`38.819 kB` `12.351 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-radio` Radio	`35.48 kB` `11.126 kB`
`react-table` Table (Primitives only)	`47.119 kB` `12.703 kB`

_{🤖 This report was generated against f196c2eb9fe14dbfca668815fc20925cb7618d19}

…ield/context

size-auditor · 2023-03-31T10:53:24Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: f196c2eb9fe14dbfca668815fc20925cb7618d19 (build)

fabricteam · 2023-03-31T11:04:36Z

🕵 fluentuiv9 No visual regressions between this PR and main

…ield/context

…into field/context

codesandbox-ci · 2023-03-31T19:43:31Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3423379:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2023-03-31T20:13:23Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	930	922	5000
Button	mount	572	573	5000
Field	mount	1635	1643	5000
FluentProvider	mount	1176	1185	5000
FluentProviderWithTheme	mount	304	324	10
FluentProviderWithTheme	virtual-rerender	278	275	10
FluentProviderWithTheme	virtual-rerender-with-unmount	298	299	10
InfoButton	mount	210	193	5000
MakeStyles	mount	1314	1309	50000
Persona	mount	2249	2228	5000
SpinButton	mount	2013	1982	5000

…ield/context

spmonahan · 2023-03-31T23:50:20Z

Any ideas why Progress is increasing in size more than other packages?

packages/react-components/react-field/src/components/Field/Field.test.tsx

packages/react-components/react-field/src/contexts/useFieldContextValues.ts

…ield/context

behowell · 2023-04-03T23:24:40Z

Any ideas why Progress is increasing in size more than other packages?

I think it's because it had more logic related to merging props, in addition to importing useFieldControlProps_unstable (and ignoring most of what that hook does). I changed it to no longer use useFieldControlProps_unstable, which will hopefully reduce the bundle size.

packages/react-components/react-field/stories/Field/FieldRenderFunction.stories.tsx

packages/react-components/react-field/src/contexts/useFieldControlProps.ts

…ield/context

…self at the same time

behowell added 3 commits March 31, 2023 01:35

feat: Add FieldContext to pass props to child instead of modifying ch…

d7462ab

…ild props directly

Change files

db409be

Add component tests

f6c6994

msft-fluent-ui-bot assigned GeoffCoxMSFT Mar 31, 2023

github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 31, 2023

Revert field vr tests for now

9605124

behowell assigned behowell and unassigned GeoffCoxMSFT Mar 31, 2023

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

eb6b4a9

…ield/context

behowell added 3 commits March 31, 2023 12:04

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

1175509

…ield/context

Merge branch 'field/context' of https://github.com/behowell/fluentui …

a3bc6b2

…into field/context

Fix tsdoc warnings

38bab37

behowell added 2 commits March 31, 2023 12:53

Replace supportsSize option with boolean

755eb06

Export FieldControlProps and FieldControlPropsOptions

3067ea1

msft-fluent-ui-bot added the Component: Field label Mar 31, 2023

behowell added 2 commits March 31, 2023 13:04

Add _unstable useFieldContextValues

ba896d6

Make FieldContextValues optional in renderField

628c138

behowell added 3 commits March 31, 2023 13:13

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

a437a37

…ield/context

Update field size story

ded8ebb

Update RenderFunction story

9985f7f

behowell marked this pull request as ready for review March 31, 2023 23:20

behowell requested review from a team, khmakoto, sopranopillow and tomi-msft as code owners March 31, 2023 23:20

behowell requested review from a team, micahgodbolt, smhigley and spmonahan as code owners March 31, 2023 23:20

spmonahan approved these changes Apr 1, 2023

View reviewed changes

behowell added 4 commits April 3, 2023 10:42

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

081383a

…ield/context

Remove ProgressBar dependency on useFieldControlProps_unstable

bc19f9d

Refactor how the label to control connection is managed.

5d9fd58

Update tests

2f4bcfb

github-actions bot modified the milestones: March Project Cycle Q1 2023, April Project Cycle Q2 2023 Apr 3, 2023

khmakoto reviewed Apr 4, 2023

View reviewed changes

packages/react-components/react-field/stories/Field/FieldRenderFunction.stories.tsx Outdated Show resolved Hide resolved

packages/react-components/react-field/src/contexts/useFieldControlProps.ts Show resolved Hide resolved

behowell added 6 commits April 4, 2023 10:25

Add supportsRequired to useFieldControlProps

ee60d99

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

cf76fe5

…ield/context

Fix wording of render function story

bad8e7d

Add tests for required, and fix Dropdown (doesn't support required)

d3d0ae4

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

d121481

…ield/context

Add a test to Checkbox that it can be labelled by both a field and it…

3423379

…self at the same time

behowell merged commit 5a8d7a2 into microsoft:master Apr 4, 2023

behowell deleted the field/context branch April 4, 2023 21:25

This was referenced Apr 4, 2023

chore: Update Field's VR tests to test changes from FieldContext #27400

Merged

fix: Update FormFieldShim to work with Field context changes #27436

Merged

chore: Update Field spec for FieldContext #27454

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add FieldContext to pass props to controls inside Field #27399

feat: Add FieldContext to pass props to controls inside Field #27399

Uh oh!

behowell commented Mar 31, 2023 •

edited

Loading

Uh oh!

fabricteam commented Mar 31, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Mar 31, 2023 •

edited

Loading

Uh oh!

fabricteam commented Mar 31, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Mar 31, 2023 •

edited

Loading

Uh oh!

fabricteam commented Mar 31, 2023 •

edited

Loading

Uh oh!

spmonahan commented Mar 31, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

behowell commented Apr 3, 2023

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat: Add FieldContext to pass props to controls inside Field #27399

feat: Add FieldContext to pass props to controls inside Field #27399

Uh oh!

Conversation

behowell commented Mar 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Mar 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Mar 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Mar 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

codesandbox-ci bot commented Mar 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Mar 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

spmonahan commented Mar 31, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

behowell commented Apr 3, 2023

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

behowell commented Mar 31, 2023 •

edited

Loading

fabricteam commented Mar 31, 2023 •

edited

Loading

size-auditor bot commented Mar 31, 2023 •

edited

Loading

fabricteam commented Mar 31, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 31, 2023 •

edited

Loading

fabricteam commented Mar 31, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)