feat: Publish react-field package, and export from react-components/unstable by behowell · Pull Request #24235 · microsoft/fluentui

behowell · 2022-08-04T20:13:48Z

Publish @fluentui/react-field package
Add Field components to @fluentui/react-components/unstable
Fixes feat: Add react-field to react-components/unstable #24708

fabricteam · 2022-08-04T20:20:56Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`187.656 kB` `51.96 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.359 kB` `11.004 kB`
`react-portal-compat` PortalCompatProvider	`5.851 kB` `1.964 kB`

_{🤖 This report was generated against e95ba37f3a8155930542712bfc63055c306cce56}

codesandbox-ci · 2022-08-04T20:22:54Z

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 1366cb6:

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

fabricteam · 2022-08-04T20:26:02Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1259	1273	5000
Button	mount	936	937	5000
FluentProvider	mount	1480	1460	5000
FluentProviderWithTheme	mount	571	578	10
FluentProviderWithTheme	virtual-rerender	538	537	10
FluentProviderWithTheme	virtual-rerender-with-unmount	573	589	10
MakeStyles	mount	1973	1939	50000
SpinButton	mount	2292	2341	5000

size-auditor · 2022-08-04T20:26:30Z

Asset size changes

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

Baseline commit: f97dc9f0f713bdf845cdd250d3b2d2993a0a5a0d (build)

layershifter · 2022-09-08T18:36:00Z

change/@fluentui-react-components-de1ae615-fbbf-4fd4-8957-40d69ff9414f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",


This probably should be patch as it's an unstable feature.

layershifter · 2022-09-08T18:36:30Z

change/@fluentui-react-field-e888af0f-e684-4f66-8f86-8c950a9bb41e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",


patch will trigger 9.0.0 release, it is okay of do you want to stay in alpha for now (i.e. use prerelease)?

I've changed it to prerelease. Not sure why yarn change didn't default to that for an alpha package...

Ahh it looks like I need to change the disallowedChangeTypes to allow prerelease and disallow patch. (I wonder if that should be the default configuration from the create-package script?)

layershifter · 2022-09-08T18:41:43Z

Please add/remove "Best practices"
Please a notice like in other preview components

It seems that grouping is not correct as I would expect to have these stories on Field's page rather than separate links.

behowell · 2022-09-08T20:26:59Z

@layershifter

It seems that grouping is not correct as I would expect to have these stories on Field's page rather than separate links.

It is intentional, although I'd be happy to change it to make it clearer. There is no component named Field: those first stories are common field features, and the actual *Field components have their own documentation pages below that, with the props listed, and a default example.

I'm open to suggestions how best to document these features in the storybook. Perhaps there could be a single markdown page that describes the general Field features (rather than stories across several pages). And/or these stories could be repeated to each Field type.

behowell · 2022-09-09T00:07:20Z

packages/react-components/react-field/src/stories/Field/index.stories.tsx

@@ -1,5 +1,4 @@
 import descriptionMd from './FieldDescription.md';
-import bestPracticesMd from './FieldBestPractices.md';


#24735 tracks adding this back once the best practices have been written.

…ield/add-to-react-components

layershifter · 2022-09-09T07:33:55Z

@layershifter

It seems that grouping is not correct as I would expect to have these stories on Field's page rather than separate links.

It is intentional, although I'd be happy to change it to make it clearer. There is no component named Field: those first stories are common field features, and the actual *Field components have their own documentation pages below that, with the props listed, and a default example.

I'm open to suggestions how best to document these features in the storybook. Perhaps there could be a single markdown page that describes the general Field features (rather than stories across several pages). And/or these stories could be repeated to each Field type.

I don't have a good suggestion, so I think that we can proceed as is and apply changes based on feedback. WDYT?

packages/react-components/react-field/package.json

…ield/add-to-react-components

* master: (28 commits) Fix value font-weight inside heatmap chart (microsoft#24726) Fix legend overflow-indication-text role (microsoft#24756) Support custom locale in date axis (microsoft#24753) Cleanup env variables (microsoft#24739) ci(github): add GH Action to add issue labels based on new GH issue template (microsoft#24788) Update disallowedChangeTypes for newly created packages, to allow only 'prerelease' change types by default (microsoft#24763) feat(react-components): Adding missing AvatarGroup exports (microsoft#24770) remove unnecessary nohoist (microsoft#24760) feat(react-dialog): supports 1st rule of ARIA (microsoft#24525) BREAKING: TableCell layouts are handled by layout components (microsoft#24762) feat: Implement table cell layout components (microsoft#24773) applying package updates fix: remove readonly from DetailsList (microsoft#24615) chore: Cleaning up tokens in Button components so they better adhere to the design spec (microsoft#24732) fix: react-combobox listbox popup width matches trigger width (microsoft#24733) fix: react-combobox Option focus outline only shows with keyboard nav (microsoft#24700) feat: Publish react-field package, and export from react-components/unstable (microsoft#24235) fix: Replacing bottom border styles with text decoration underline in Link (microsoft#24734) docs(react-theme): Update readme (microsoft#24755) Add tests for hover states (microsoft#24390) ...

behowell added the Component: Field label Aug 4, 2022

behowell self-assigned this Aug 4, 2022

github-actions bot added this to the July Project Cycle Q3 2022 milestone Aug 4, 2022

feat: Add *Field components to @fluentui/react-components/unstable

e134d83

behowell force-pushed the field/add-to-react-components branch from f0c2cdd to e134d83 Compare September 8, 2022 18:01

behowell changed the title ~~Add Field to react-components/unstable~~ feat: Add *Field components to react-components/unstable Sep 8, 2022

behowell changed the title ~~feat: Add *Field components to react-components/unstable~~ feat: Publish react-field package, and export from react-components/unstable Sep 8, 2022

behowell marked this pull request as ready for review September 8, 2022 18:19

behowell requested review from a team as code owners September 8, 2022 18:19

layershifter reviewed Sep 8, 2022

View reviewed changes

behowell added 4 commits September 8, 2022 17:01

Add preview warning to description.md files

7522f96

Remove Best Practices section from Field until it can be written

fd27804

Updating change files

39fc02c

Update change files

2a9b737

behowell commented Sep 9, 2022

View reviewed changes

behowell added 2 commits September 8, 2022 17:10

Fix beachball disallowedChangeTypes for react-field

e219ad6

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

76b7c37

…ield/add-to-react-components

layershifter approved these changes Sep 9, 2022

View reviewed changes

khmakoto approved these changes Sep 9, 2022

View reviewed changes

packages/react-components/react-field/package.json Outdated Show resolved Hide resolved

behowell added 2 commits September 12, 2022 11:15

Remove private: false

437fb2f

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

1366cb6

…ield/add-to-react-components

behowell enabled auto-merge (squash) September 12, 2022 18:18

behowell merged commit cd8f5a1 into microsoft:master Sep 12, 2022

behowell mentioned this pull request Sep 12, 2022

fix: Update package template beachball config to allow only 'prerelease' changes by default #24763

Merged

behowell deleted the field/add-to-react-components branch September 12, 2022 18:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Publish react-field package, and export from react-components/unstable#24235

feat: Publish react-field package, and export from react-components/unstable#24235
behowell merged 9 commits intomicrosoft:masterfrom
behowell:field/add-to-react-components

behowell commented Aug 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Aug 4, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Aug 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Aug 4, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Aug 4, 2022 •

edited

Loading

Uh oh!

layershifter Sep 8, 2022 •

edited

Loading

Uh oh!

layershifter Sep 8, 2022 •

edited

Loading

Uh oh!

behowell Sep 9, 2022

Uh oh!

behowell Sep 9, 2022

Uh oh!

layershifter commented Sep 8, 2022

Uh oh!

behowell commented Sep 8, 2022 •

edited

Loading

Uh oh!

behowell Sep 9, 2022

Uh oh!

layershifter commented Sep 9, 2022

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -1,5 +1,4 @@
		import descriptionMd from './FieldDescription.md';
		import bestPracticesMd from './FieldBestPractices.md';

Conversation

behowell commented Aug 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Aug 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Aug 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Aug 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

size-auditor bot commented Aug 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

layershifter Sep 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

layershifter Sep 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

behowell Sep 9, 2022

Choose a reason for hiding this comment

Uh oh!

behowell Sep 9, 2022

Choose a reason for hiding this comment

Uh oh!

layershifter commented Sep 8, 2022

Uh oh!

behowell commented Sep 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

behowell Sep 9, 2022

Choose a reason for hiding this comment

Uh oh!

layershifter commented Sep 9, 2022

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

behowell commented Aug 4, 2022 •

edited

Loading

fabricteam commented Aug 4, 2022 •

edited

Loading

codesandbox-ci bot commented Aug 4, 2022 •

edited

Loading

fabricteam commented Aug 4, 2022 •

edited

Loading

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

size-auditor bot commented Aug 4, 2022 •

edited

Loading

layershifter Sep 8, 2022 •

edited

Loading

layershifter Sep 8, 2022 •

edited

Loading

behowell commented Sep 8, 2022 •

edited

Loading