feat: add toolbar component by chpalac · Pull Request #21743 · microsoft/fluentui

chpalac · 2022-02-15T00:10:02Z

Details

This is part of the work described on #21533 . Here we are adding the basic Toolbar component that just serve as container for several other components ( ToolbarButton and ToolbarDivider here implemented )

This work will be actively refactored and improve constantly while in status of WIP, so be careful with it usage

codesandbox-ci · 2022-02-15T00:14:44Z

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

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

packages/react-toolbar/package.json

fabricteam · 2022-02-15T09:59:45Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.836 kB` `1.209 kB`
`react-accordion` Accordion (including children components)	`74.792 kB` `22.516 kB`
`react-avatar` Avatar	`45.142 kB` `13.111 kB`
`react-badge` Badge	`20.895 kB` `6.567 kB`
`react-badge` CounterBadge	`21.848 kB` `6.883 kB`
`react-badge` PresenceBadge	`21.951 kB` `6.565 kB`
`react-button` Button	`28.013 kB` `8.059 kB`
`react-button` CompoundButton	`33.508 kB` `9.092 kB`
`react-button` MenuButton	`29.796 kB` `8.665 kB`
`react-button` SplitButton	`36.268 kB` `9.863 kB`
`react-button` ToggleButton	`37.395 kB` `8.68 kB`
`react-card` Card - All	`53.619 kB` `15.372 kB`
`react-card` Card	`48.904 kB` `14.089 kB`
`react-card` CardFooter	`7.686 kB` `3.264 kB`
`react-card` CardHeader	`9.251 kB` `3.78 kB`
`react-card` CardPreview	`7.658 kB` `3.291 kB`
`react-combobox` Combobox	`6.817 kB` `2.901 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`176.089 kB` `49.113 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.601 kB` `10.668 kB`
`react-divider` Divider	`15.385 kB` `5.539 kB`
`react-image` Image	`10.109 kB` `3.958 kB`
`react-input` Input	`21.661 kB` `7.18 kB`
`react-label` Label	`8.371 kB` `3.504 kB`
`react-link` Link	`11.106 kB` `4.507 kB`
`react-menu` Menu (including children components)	`105.852 kB` `32.433 kB`
`react-menu` Menu (including selectable components)	`109.031 kB` `32.897 kB`
`react-popover` Popover	`96.787 kB` `29.559 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`
`react-priority-overflow` hooks only	`10.606 kB` `4.087 kB`
`react-provider` FluentProvider	`14.009 kB` `5.25 kB`
`react-select` Select	`16.562 kB` `6.264 kB`
`react-slider` Slider	`25.549 kB` `8.25 kB`
`react-spinner` Spinner	`16.459 kB` `5.549 kB`
`react-switch` Switch	`24.279 kB` `8.001 kB`
`react-text` Text - Default	`10.797 kB` `4.233 kB`
`react-text` Text - Wrappers	`14.113 kB` `4.576 kB`
`react-textarea` Textarea	`20.602 kB` `7.033 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.676 kB` `6.604 kB`
`react-theme` Teams: Light theme	`18.492 kB` `5.296 kB`
`react-tooltip` Tooltip	`42.837 kB` `14.727 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 7a6fc1de0f33e7d593990df21a043939493fef49}

size-auditor · 2022-02-15T10:07:00Z

Asset size changes

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

Baseline commit: 7a6fc1de0f33e7d593990df21a043939493fef49 (build)

fabricteam · 2022-02-15T10:24:02Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
DocumentCardTitle	mount	173	128	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	796	772	5000
Breadcrumb	mount	2423	2444	1000
Checkbox	mount	1305	1289	5000
CheckboxBase	mount	1088	1038	5000
ChoiceGroup	mount	4026	4066	5000
ComboBox	mount	825	845	1000
CommandBar	mount	9389	9322	1000
ContextualMenu	mount	10938	11073	1000
DefaultButton	mount	986	989	5000
DetailsRow	mount	3062	3398	5000
DetailsRowFast	mount	3319	3347	5000
DetailsRowNoStyles	mount	3161	3129	5000
Dialog	mount	1855	1903	1000
DocumentCardTitle	mount	173	128	1000	Possible regression
Dropdown	mount	2850	2871	5000
FocusTrapZone	mount	1541	1579	5000
FocusZone	mount	1554	1564	5000
IconButton	mount	1545	1582	5000
Label	mount	299	305	5000
Layer	mount	2505	2554	5000
Link	mount	400	415	5000
MenuButton	mount	1281	1283	5000
MessageBar	mount	1871	1835	5000
Nav	mount	2845	2707	1000
OverflowSet	mount	943	944	5000
Panel	mount	1855	1782	1000
Persona	mount	884	868	1000
Pivot	mount	1230	1251	1000
PrimaryButton	mount	1127	1136	5000
Rating	mount	6679	6747	5000
SearchBox	mount	1122	1117	5000
Shimmer	mount	2172	2165	5000
Slider	mount	1671	1656	5000
SpinButton	mount	4734	4388	5000
Spinner	mount	374	367	5000
SplitButton	mount	2716	2757	5000
Stack	mount	451	452	5000
StackWithIntrinsicChildren	mount	2013	1996	5000
StackWithTextChildren	mount	4555	4557	5000
SwatchColorPicker	mount	10083	10047	5000
TagPicker	mount	2274	2502	5000
TeachingBubble	mount	92689	91900	5000
Text	mount	373	376	5000
TextField	mount	1202	1227	5000
ThemeProvider	mount	1011	1005	5000
ThemeProvider	virtual-rerender	559	561	5000
ThemeProvider	virtual-rerender-with-unmount	1600	1605	5000
Toggle	mount	682	757	5000
buttonNative	mount	116	113	5000

ling1726 · 2022-02-15T10:24:27Z

/azp run

azure-pipelines · 2022-02-15T10:24:56Z

Azure Pipelines successfully started running 3 pipeline(s).

packages/react-toolbar/package.json

theerebuss

Please split this into several PRs to facilitate the review. Ideally a PR for scaffolding, one for the Spec for individual review of it and then functionality.
Also, please add this component to the CODEOWNERS file for tracking of ownership.

chpalac · 2022-02-18T11:15:43Z

Please split this into several PRs to facilitate the review. Ideally a PR for scaffolding, one for the Spec for individual review of it and then functionality. Also, please add this component to the CODEOWNERS file for tracking of ownership.

That is bein addressed in #21791

packages/react-toolbar/Spec.md

…olbar

…eat/add-toolbar

fabricteam · 2022-03-22T11:48:28Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	894	939	5000
Button	mount	583	550	5000
FluentProvider	mount	1760	1882	5000
FluentProviderWithTheme	mount	291	271	10
FluentProviderWithTheme	virtual-rerender	230	225	10
FluentProviderWithTheme	virtual-rerender-with-unmount	303	276	10
MakeStyles	mount	1555	1538	50000

chpalac · 2022-03-23T11:28:33Z

@andrefcdias Can you reset your request for changes please?

ling1726

LGTM

…eat/add-toolbar

theerebuss · 2022-02-22T17:54:48Z

packages/react-toolbar/src/index.ts

@@ -1,5 +1,5 @@
 // TODO: replace with real exports


Suggested change

// TODO: replace with real exports

theerebuss

Approving changes as is

…eat/add-toolbar

msft-fluent-ui-bot assigned tomi-msft Feb 15, 2022

ling1726 reviewed Feb 15, 2022

View reviewed changes

packages/react-toolbar/package.json Outdated Show resolved Hide resolved

ling1726 reviewed Feb 15, 2022

View reviewed changes

packages/react-toolbar/package.json Outdated Show resolved Hide resolved

chpalac requested a review from ling1726 February 16, 2022 11:17

chpalac requested a review from a team as a code owner February 16, 2022 13:59

ling1726 closed this Feb 17, 2022

ling1726 reopened this Feb 17, 2022

theerebuss self-requested a review February 17, 2022 13:19

chpalac mentioned this pull request Feb 17, 2022

chore: add Toolbar autogenerated files #21791

Merged

chpalac force-pushed the feat/add-toolbar branch from c33761b to 41cf842 Compare February 17, 2022 14:30

theerebuss suggested changes Feb 17, 2022

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label Feb 17, 2022

msft-fluent-ui-bot removed the Needs: Author Feedback label Feb 18, 2022

chpalac and others added 6 commits February 18, 2022 09:44

feat: add toolbar component

cce3950

Update packages/react-toolbar/package.json

70ee080

fix: griffel version

cbf1af4

fix: required props

2ff370f

fixes

143867d

add deps

2ac9b8a

chpalac force-pushed the feat/add-toolbar branch from 41cf842 to 2ac9b8a Compare February 18, 2022 12:47

chpalac added 2 commits February 18, 2022 09:48

fix: griffel dep

9bc247b

chore: partial slots for divider

2789045

ling1726 reviewed Feb 18, 2022

View reviewed changes

packages/react-toolbar/Spec.md Show resolved Hide resolved

chpalac added 9 commits March 21, 2022 21:36

chore: reuse components in toolbar

ae9e8f5

fix: non-existing imports

487ade2

chore: update api

8abc73b

chore: remove render functions

b81326e

chore: remove rendertoolbarbutton

1dd3f10

chore: update api

650bb45

Merge branch 'master' of github.com:chpalac/fluentui into feat/add-to…

a206af7

…olbar

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

6e92429

…eat/add-toolbar

chore: update deps

c8864a5

chpalac added 2 commits March 22, 2022 09:49

chore: add tabster to the deps

7c5af97

chore: disable test

57f5c55

ling1726 approved these changes Mar 24, 2022

View reviewed changes

chpalac enabled auto-merge (squash) March 24, 2022 11:52

chpalac added 2 commits March 25, 2022 09:27

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

6830aab

…eat/add-toolbar

feat: add toggle button

39cca83

theerebuss removed their request for review March 28, 2022 14:35

theerebuss reviewed Mar 28, 2022

View reviewed changes

theerebuss approved these changes Mar 28, 2022

View reviewed changes

chpalac mentioned this pull request Mar 28, 2022

docs: add Toolbar spec #21937

Merged

chpalac added 6 commits April 4, 2022 09:21

chore: update api

4020150

chore: remove comment about export

b4b4786

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

084833c

…eat/add-toolbar

fix: toolbar button toggle

d107e64

fix: types

fa2ee04

chore: update snapshots

8e7112f

raghavthind2005 approved these changes Apr 5, 2022

View reviewed changes

chpalac merged commit ed0bd4a into microsoft:master Apr 5, 2022

chpalac deleted the feat/add-toolbar branch April 11, 2022 11:10

Conversation

chpalac commented Feb 15, 2022

Details

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Feb 15, 2022 • 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 Feb 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

ling1726 commented Feb 15, 2022

Uh oh!

azure-pipelines bot commented Feb 15, 2022

Uh oh!

Uh oh!

theerebuss left a comment

Choose a reason for hiding this comment

Uh oh!

chpalac commented Feb 18, 2022

Uh oh!

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

chpalac commented Mar 23, 2022

Uh oh!

ling1726 left a comment

Choose a reason for hiding this comment

Uh oh!

theerebuss Feb 22, 2022

Choose a reason for hiding this comment

Uh oh!

theerebuss left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

codesandbox-ci bot commented Feb 15, 2022 •

edited

Loading

fabricteam commented Feb 15, 2022 •

edited

Loading

size-auditor bot commented Feb 15, 2022 •

edited

Loading

fabricteam commented Feb 15, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Mar 22, 2022 •

edited

Loading

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