chore: Refactor Field components into the base component's package #25593

behowell · 2022-11-09T18:22:31Z

Current Behavior

All field components (e.g. InputField) are exported from the @fluentui/react-field package.

New Behavior

As discussed in RFC: Field Package Layout #25380, the individual field components (e.g. InputField) should be exported from their base component's package (e.g. @fluentui/react-input) instead of @fluentui/react-field.

Related Issue(s)

Fixes chore: Refactor Field components into the base component's package #25592

…g to individual packages

…omponent's package

…well/fluentui into field/move-components

fabricteam · 2022-11-09T18:33:18Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-combobox` Combobox (including child components)	`78.076 kB` `24.991 kB`
`react-combobox` Dropdown (including child components)	`77.363 kB` `24.893 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.941 kB` `17.678 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.948 kB` `52.993 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-input` Input	`24.112 kB` `7.892 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-progress` Progress	`13.526 kB` `5.113 kB`
`react-radio` Radio	`36.436 kB` `12.126 kB`
`react-radio` RadioGroup	`14.294 kB` `5.723 kB`
`react-select` Select	`23.428 kB` `8.023 kB`
`react-slider` Slider	`32.108 kB` `10.195 kB`
`react-spinbutton` SpinButton	`44.42 kB` `12.815 kB`
`react-switch` Switch	`33.443 kB` `10.585 kB`
`react-textarea` Textarea	`25.687 kB` `8.331 kB`

_{🤖 This report was generated against 715bd7f0686e1080ec0cbbdb5aa14c0d6ef18498}

fabricteam · 2022-11-09T18:35:10Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1550	1600	5000
Button	mount	1119	1137	5000
FluentProvider	mount	1885	1840	5000
FluentProviderWithTheme	mount	760	747	10
FluentProviderWithTheme	virtual-rerender	687	695	10
FluentProviderWithTheme	virtual-rerender-with-unmount	745	753	10
MakeStyles	mount	2249	2267	50000
SpinButton	mount	3103	2984	5000

size-auditor · 2022-11-09T18:35:17Z

Asset size changes

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

Baseline commit: 715bd7f0686e1080ec0cbbdb5aa14c0d6ef18498 (build)

…well/fluentui into field/move-components

…ield/cleanup-tests-stories

…well/fluentui into field/move-components

codesandbox-ci · 2022-11-09T23:44:23Z

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 8f5f3b7:

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

…ield/move-components

sopranopillow · 2022-11-10T00:35:19Z

apps/vr-tests-react-components/src/stories/Field.stories.tsx

-} from '@fluentui/react-field';
-import { SparkleFilled } from '@fluentui/react-icons';
+import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox';
+import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox';
 import { FieldControl, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field';


Ignore if this isn't an issue for vr-tests

Suggested change

import { FieldControl, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field';

import { FieldControl } from '@fluentui/react-field/src/Field';

import type { FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field';

It turns out this import caused a build failure anyways, so I removed it, and am using InputFieldProps instead.

import type { InputFieldProps_unstable as InputFieldProps } from '@fluentui/react-input';

…ield/move-components

* stress-test: add "afterframe" dependency (microsoft#25560) Previously stress-test used a "requestPostAnimationFrame" function that is used to measure from just before style recalc, layout and paint are executed to just afterward. This change drops that function in favor of taking a dependency on afterframe, a library that does the same thing. * Fix: Update tabs to remain the same size between unselected and selected states (microsoft#25542) * Add support to keep tabs from changing size when selected * Update for naming and tests * Rename update * Update packages/react-components/react-tabs/src/components/TabList/TabList.types.ts Co-authored-by: Sean Monahan <[email protected]> Co-authored-by: Sean Monahan <[email protected]> * chore: Add reduced-motion documentation to Spinner (microsoft#25561) * chore: Add reduced-motion documentation to Spinner * change file * chore: Add documentation to Progress about reduced-motion (microsoft#25563) * chore: Add documentation to Progress about reduced-motion * change file * stress-test: disable CSS transitions on injected styles (microsoft#25559) This addresses an issue where Firefox's style recalculation measurement becomes unstable when controls under test have CSS transitions. Specifically, our test injects styles that update the background color of selected controls and many Fluent controls transition the background color for different states like "hover" and "focus". With transitions running Firefox will sometimes include the transition time in the style recalc measurement and sometimes not. Additionally, Chromium browsers never include the transition time in the measurement. Disabling transitions ensures measurement behavior is consistent in Firefox and in alignment with the behavior of Chromium browsers. * docs(rfcs): add triage automation rfc (microsoft#24817) * chore: update beachball ignore list to apply to new project structure (microsoft#25531) * bugfix(react-switch): adds line-height=0 to switch indicator slot (microsoft#25507) * chore: add both options to useArrowNavigationGroup (microsoft#25568) * chore: add both options to useArrowNavigationGroup * chore: add changes * chore: update api * chore(vr-tests-v9): Convert Dialog and Image VR tests to CSF (microsoft#25527) * chore: toolbar a11y improvements (microsoft#25562) * feat: create vertical example * chore: add navigation arrows for vertical scenario * chore: add labels for all toolbar stories * chore: update tooltip example * chore: update radio example * chore: update toolbar stories examples * chore: add changes * chore: use both in toolbar arrow key nav * chore: update snapshot * chore(react-dialog): migrate to new package structure (microsoft#25523) Co-authored-by: Oleksandr Fediashov <[email protected]> * chore(react-overflow): migrate to new package structure (microsoft#25524) * Expand @fluentui/react root index file's export *s to uncover and fix duplicate exports. (microsoft#25545) * expanding index. * change. * Replacing with inline deprecation exclusions. * setting export * to warning. * change. * moving rules around. * fix: v9 form controls with underline should have underline-specific disabled styling (microsoft#25543) Updates disabled form styling for Input, Select, Spinbutton, Combobox, and Dropdown * docs(public-docsite-v9): Adding a basic setup section to the SSR docs (microsoft#25564) * applying package updates * update regex * updatE * Update azure-pipelines.vrt-baseline.yml for Azure Pipelines * Update azure-pipelines.vrt-baseline.yml for Azure Pipelines * chore(deps): bump loader-utils from 2.0.0 to 2.0.3 (microsoft#25567) Bumps [loader-utils](https://github.com/webpack/loader-utils) from 2.0.0 to 2.0.3. - [Release notes](https://github.com/webpack/loader-utils/releases) - [Changelog](https://github.com/webpack/loader-utils/blob/v2.0.3/CHANGELOG.md) - [Commits](webpack/loader-utils@v2.0.0...v2.0.3) --- updated-dependencies: - dependency-name: loader-utils dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: migrate @types/node to 14 to align with our supported node version (microsoft#25510) * chore(deps): resolve only to 1 @types/node version to mitigate global leaks and api-generation errors * fix(bundle-size): fix type errors exposed by node 14 typings * fix(tools): fix type errors exposed by node 14 typings * fix(typings): fix type errors exposed by node 14 typings * revert: use resolution for @types/node * chore(ts-minbar-test-react): use @types/node 14 explicitly * generate changefiles * chore: dedupe deps * fix(scripts): fix type errors exposed by node 14 typings * test: replace deprecated module.parent with require.main within isConformance * generate changefiles * test(react): clean up persona-coin test and use isConformant without side-effects * fix(storybook): fix theme picker current selection (microsoft#25533) * update * chore(vr-tests-v9): Convert Accordion VR tests to CSF (microsoft#25525) * fix: Update Avatar active ring color to match base color (microsoft#25497) * RFC: Field Package Layout (microsoft#25380) * Feature: Added large tab size to react-tabs (microsoft#25577) * Added large tab size * yarn change * Update vr-tests * Code review fix * feat(react-infobutton): Adding size prop, HCM styles, and updating styles to match design spec (microsoft#25519) * updating styles and adding size prop * updating comment * adding requested changes * fix: Adding expanded styles for MenuButtons and making various other styling fixes for Button components (microsoft#25521) * fix: Adding expanded styles for MenuButtons and making various other styling fixes for Button components. * Adding change file. * Addressing PR feedback. Co-authored-by: KHMakoto <[email protected]> * chore: Clean up Field tests and story imports in preparation of moving to individual packages (microsoft#25594) * Remove custom `isConformant` function for Field tests, and instead inline the customizations in each call to `isConformant` * Disable the `exported-top-level` test because the components will be exported as e.g. `InputField_unstable` from the component packages. * Change the stories to import from `@fluentui/react-components/unstable`, instead of the individual package. * Rename the `FieldComponent` type to `FieldControl` to correspond to the `control` slot name. * Tabs icon toggle (microsoft#25597) * Added regular filled icon toggling * yarn change * chore: Refactor Field components into the base component's package (microsoft#25593) Move Field components into their respective packages, as discussed in RFC microsoft#25380 * Update Component Implementation Epic template (microsoft#25480) * update to use vrscreenshotdiff beta * change lock file * update package version * applying package updates * update pr pipeline to add v8 * PR to add tasks in pipeline for v9 VRT integration (microsoft#25606) * fix: create valid export maps (microsoft#25558) * generate changefiles * chore(deps): bump socket.io-parser from 4.0.4 to 4.0.5 (microsoft#25604) Bumps [socket.io-parser](https://github.com/socketio/socket.io-parser) from 4.0.4 to 4.0.5. - [Release notes](https://github.com/socketio/socket.io-parser/releases) - [Changelog](https://github.com/socketio/socket.io-parser/blob/main/CHANGELOG.md) - [Commits](socketio/socket.io-parser@4.0.4...4.0.5) --- updated-dependencies: - dependency-name: socket.io-parser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(react-dialog): removes unnecessary union case for DialogOpenChangeData (microsoft#25504) * templatize * update * templatize * updatE * refactor(scripts): remove deprecated exec abstractions (microsoft#25569) * fix(scripts): make eslint run again on pre-commit (microsoft#25537) * feat(react-components): Move AvatarGroup to stable (microsoft#25005) * update * update version * run partial tests * update * update * update * update * update * update * updatE * updatE * update version * update lock file * update name * update version * add quotes * docs: refactor Text documentation and add missing guidance for presets/alignment (microsoft#25587) Fixes microsoft#24341 Fixes microsoft#25548 * update * package version * fix(react-menu): remove unwanted aria attributes on context menu (microsoft#25615) * fix(react-menu): remove unwanted aria attributes on context menu * chore: updates trigger selector for cypress tests * remove unwanted param * update * applying package updates * convert * checkpoint * add regex * change convert script * updates * update sw version Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Sean Monahan <[email protected]> Co-authored-by: Geoff Cox (Microsoft) <[email protected]> Co-authored-by: tomi-msft <[email protected]> Co-authored-by: Martin Hochel <[email protected]> Co-authored-by: Bernardo Sunderhus <[email protected]> Co-authored-by: chajun <[email protected]> Co-authored-by: Tristan Watanabe <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: David Zearing <[email protected]> Co-authored-by: Sarah Higley <[email protected]> Co-authored-by: Esteban Munoz Facusse <[email protected]> Co-authored-by: Fluent UI Build <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Tudor Popa <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: KHMakoto <[email protected]> Co-authored-by: Marcos Moura <[email protected]>

…icrosoft#25593) Move Field components into their respective packages, as discussed in RFC microsoft#25380

behowell added 9 commits November 9, 2022 00:25

chore: Clean up Field tests and story imports in preparation of movin…

76fff3d

…g to individual packages

Rename FieldComponent to FieldControl

68abc4a

Inline fieldConformanceTestOptions, and remove export

8b2be4b

chore: Move field components out of react-field and into their base c…

2342d0f

…omponent's package

Inline fieldConformanceTestOptions and remove export

21f96ac

Merge branch 'field/cleanup-tests-stories' of https://github.com/beho…

d305fc0

…well/fluentui into field/move-components

Rename FieldComponent to FieldControl

61559e9

Merge branch 'field/cleanup-tests-stories' of https://github.com/beho…

663bded

…well/fluentui into field/move-components

yarn change

bf1a5ba

behowell added Fluent UI react-components (v9) Component: Field labels Nov 9, 2022

behowell self-assigned this Nov 9, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 9, 2022

behowell mentioned this pull request Nov 9, 2022

chore: Clean up Field tests and story imports in preparation of moving to individual packages #25594

Merged

behowell added 12 commits November 9, 2022 10:50

.api.md

e43e330

Merge branch 'field/cleanup-tests-stories' of https://github.com/beho…

a75a77c

…well/fluentui into field/move-components

Remove isConformant.ts, since it is not currently used in react-field

6e7a2ac

Rename FieldComponent to FieldControl in VR tests

f96f312

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

b768b3f

…ield/cleanup-tests-stories

Merge branch 'field/cleanup-tests-stories' of https://github.com/beho…

ab8aafb

…well/fluentui into field/move-components

Fix VR test imports

873fc8a

Organize imports

c3fae68

Merge branch 'field/cleanup-tests-stories' of https://github.com/beho…

0aafaea

…well/fluentui into field/move-components

Fix package version build error

ea43904

Fix capitalization in import

cc9316e

.api.md

90b99a9

behowell added 3 commits November 9, 2022 15:55

Fix SliderField.test.tsx

e217aef

Fix capitalization in import

e9b8ba8

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

15e9476

…ield/move-components

behowell marked this pull request as ready for review November 10, 2022 00:28

behowell requested review from a team, tomi-msft, sopranopillow, khmakoto, spmonahan, micahgodbolt and smhigley as code owners November 10, 2022 00:28

yarn change

301b50a

khmakoto approved these changes Nov 10, 2022

View reviewed changes

sopranopillow approved these changes Nov 10, 2022

View reviewed changes

behowell added 3 commits November 9, 2022 16:59

Fix vr-test imports

426be97

Add missing FieldControl export

797915a

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

8f5f3b7

…ield/move-components

behowell merged commit 39ba7b6 into microsoft:master Nov 10, 2022

behowell deleted the field/move-components branch November 10, 2022 02:40

NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022

chore: Refactor Field components into the base component's package (m…

eee8320

…icrosoft#25593) Move Field components into their respective packages, as discussed in RFC microsoft#25380

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

chore: Refactor Field components into the base component's package (m…

3d0b46b

…icrosoft#25593) Move Field components into their respective packages, as discussed in RFC microsoft#25380

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Refactor Field components into the base component's package #25593

chore: Refactor Field components into the base component's package #25593

behowell commented Nov 9, 2022

fabricteam commented Nov 9, 2022 •

edited

Loading

fabricteam commented Nov 9, 2022 •

edited

Loading

size-auditor bot commented Nov 9, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 9, 2022 •

edited

Loading

sopranopillow Nov 10, 2022 •

edited

Loading

behowell Nov 10, 2022

	import { FieldControl, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field';
	import { FieldControl } from '@fluentui/react-field/src/Field';
	import type { FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field';

chore: Refactor Field components into the base component's package #25593

chore: Refactor Field components into the base component's package #25593

Conversation

behowell commented Nov 9, 2022

Current Behavior

New Behavior

Related Issue(s)

fabricteam commented Nov 9, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Nov 9, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

size-auditor bot commented Nov 9, 2022 • edited Loading

Asset size changes

codesandbox-ci bot commented Nov 9, 2022 • edited Loading

sopranopillow Nov 10, 2022 • edited Loading

Choose a reason for hiding this comment

behowell Nov 10, 2022

Choose a reason for hiding this comment

fabricteam commented Nov 9, 2022 •

edited

Loading

fabricteam commented Nov 9, 2022 •

edited

Loading

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

size-auditor bot commented Nov 9, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 9, 2022 •

edited

Loading

sopranopillow Nov 10, 2022 •

edited

Loading