Skip to content

chore: Add FieldContext and connect it to input components#26543

Closed
behowell wants to merge 1 commit into
microsoft:masterfrom
behowell:field/context
Closed

chore: Add FieldContext and connect it to input components#26543
behowell wants to merge 1 commit into
microsoft:masterfrom
behowell:field/context

Conversation

@behowell

Copy link
Copy Markdown
Contributor

Previous Behavior

Now that Field is a standalone component as of PR #26430, we don't have a direct way to pass the field's size or validationState to controls like Input and ProgressBar.

New Behavior

Add FieldContext so that controls can apply styling customizations when they're in a Field, like size or validationState.

Related Issue(s)

@size-auditor

size-auditor Bot commented Jan 28, 2023

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 4e058ce9ac62585e7062b8badfa85f74ebe51f84 (build)

@fabricteam

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-checkbox
CheckboxField
39.673 kB
12.094 kB
44.975 kB
14.013 kB
5.302 kB
1.919 kB
react-combobox
Combobox (including child components)
82.678 kB
26.408 kB
82.758 kB
26.434 kB
80 B
26 B
react-combobox
ComboboxField
79.095 kB
26.183 kB
79.393 kB
26.303 kB
298 B
120 B
react-combobox
Dropdown (including child components)
81.346 kB
26.144 kB
81.432 kB
26.155 kB
86 B
11 B
react-field
Field
17.605 kB
6.518 kB
23.048 kB
8.486 kB
5.443 kB
1.968 kB
react-input
Input
24.848 kB
8.136 kB
30.481 kB
10.166 kB
5.633 kB
2.03 kB
react-input
InputField
34.99 kB
11.072 kB
40.851 kB
13.199 kB
5.861 kB
2.127 kB
react-progress
ProgressBar
13.573 kB
5.232 kB
19.363 kB
7.349 kB
5.79 kB
2.117 kB
react-progress
ProgressField
23.805 kB
8.339 kB
29.83 kB
10.534 kB
6.025 kB
2.195 kB
react-radio
RadioGroupField
24.895 kB
9.045 kB
25.149 kB
9.114 kB
254 B
69 B
react-select
Select
24.14 kB
8.271 kB
29.772 kB
10.315 kB
5.632 kB
2.044 kB
react-select
SelectField
33.316 kB
10.755 kB
39.176 kB
12.874 kB
5.86 kB
2.119 kB
react-slider
Slider
32.768 kB
10.438 kB
38.414 kB
12.486 kB
5.646 kB
2.048 kB
react-slider
SliderField
42.599 kB
13.345 kB
48.47 kB
15.493 kB
5.871 kB
2.148 kB
react-spinbutton
SpinButton
45.161 kB
13.035 kB
50.949 kB
15.128 kB
5.788 kB
2.093 kB
react-spinbutton
SpinButtonField
54.361 kB
15.594 kB
60.368 kB
17.812 kB
6.007 kB
2.218 kB
react-switch
SwitchField
34.687 kB
10.541 kB
40.135 kB
12.488 kB
5.448 kB
1.947 kB
react-textarea
Textarea
26.331 kB
8.581 kB
31.96 kB
10.61 kB
5.629 kB
2.029 kB
react-textarea
TextareaField
36.469 kB
11.483 kB
42.328 kB
13.614 kB
5.859 kB
2.131 kB
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-checkbox
Checkbox
32.768 kB
10.213 kB
react-components
react-components: Button, FluentProvider & webLightTheme
60.391 kB
16.843 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.158 kB
52.87 kB
react-components
react-components: FluentProvider & webLightTheme
34.751 kB
11.453 kB
react-portal-compat
PortalCompatProvider
6.069 kB
2.053 kB
react-radio
Radio
32.353 kB
10.504 kB
react-radio
RadioGroup
14.822 kB
5.91 kB
react-switch
Switch
27.902 kB
8.647 kB
react-table
DataGrid
129.423 kB
35.243 kB
react-table
Table (Primitives only)
42.971 kB
11.781 kB
react-table
Table as DataGrid
127.672 kB
32.893 kB
react-table
Table (Selection only)
81.106 kB
20.161 kB
react-table
Table (Sort only)
80.535 kB
20.005 kB
🤖 This report was generated against 4e058ce9ac62585e7062b8badfa85f74ebe51f84

@codesandbox-ci

Copy link
Copy Markdown

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 72c70d5:

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

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1620 1620 5000
Button mount 1159 1158 5000
FluentProvider mount 2071 2014 5000
FluentProviderWithTheme mount 775 784 10
FluentProviderWithTheme virtual-rerender 731 733 10
FluentProviderWithTheme virtual-rerender-with-unmount 781 785 10
InfoButton mount 709 709 5000
MakeStyles mount 2397 2326 50000
Persona mount 3781 3836 5000
SpinButton mount 3169 3136 5000

@@ -6,13 +6,14 @@ import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobo
import { SparkleFilled } from '@fluentui/react-icons';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 5 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1864 screenshots unchanged, 0 screenshots with different dimensions and 5 screenshots with visible difference.

unknown 5 screenshots
Image Name Diff(in Pixels) Image Type
ProgressField converged.base.default.chromium.png 132 Changed
ProgressField converged.hint.default.chromium.png 132 Changed
ProgressField converged.horizontal.default.chromium.png 83 Changed
ProgressField converged.required.default.chromium.png 132 Changed
ProgressField converged.validation.default.chromium.png 534 Changed

@behowell

Copy link
Copy Markdown
Contributor Author

Given the cost to bundle size, and relatively minor benefit from FieldContext, we've decided not to add it at this time. If there is a compelling reason to add it in the future, we may revisit this.

For now, the size prop needs to be manually added to the child of Field, were applicable:

<Field size="small">
  <Input size="small />
</Field>

@behowell behowell closed this Jan 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

chore: Add FieldContext and connect it to input components

3 participants