Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add web components toolbar #19155

Merged
merged 9 commits into from
Sep 14, 2021
Merged

feat: add web components toolbar #19155

merged 9 commits into from
Sep 14, 2021

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Jul 27, 2021 •
edited

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Adds the Toolbar Component

Screen Shot 2021-08-19 at 9 58 53 AM

Screen Shot 2021-08-19 at 9 58 21 AM

Screen Shot 2021-08-19 at 9 58 40 AM

Screen Shot 2021-08-19 at 10 06 04 AM

Note:
The keyboarding sequence will be off until this FAST issue is solved:
microsoft/fast#4983

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 27, 2021 •
edited

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)		 55.248 kB
17.403 kB
react-avatar
Avatar		 56.558 kB
15.66 kB
react-badge
Badge		 24.343 kB
7.165 kB
react-badge
CounterBadge		 27.156 kB
7.851 kB
react-badge
PresenseBadge		 237 B
177 B
react-button
Button		 22.932 kB
6.984 kB
react-button
CompoundButton		 28.215 kB
7.834 kB
react-button
MenuButton		 24.733 kB
7.546 kB
react-button
ToggleButton		 32.527 kB
7.601 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 163.935 kB
46.761 kB
react-components
react-components: FluentProvider & webLightTheme		 35.75 kB
11.392 kB
react-divider
Divider		 15.889 kB
5.747 kB
react-image
Image		 9.882 kB
3.975 kB
react-input
Input		 31.636 kB
11.312 kB
react-label
Label		 9.397 kB
3.839 kB
react-link
Link		 12.609 kB
4.948 kB
react-make-styles
makeStaticStyles (runtime)		 7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)		 22.135 kB
8.356 kB
react-make-styles
makeStyles + mergeClasses (build time)		 2.557 kB
1.202 kB
react-menu
Menu (including children components)		 102.963 kB
31.313 kB
react-menu
Menu (including selectable components)		 105.239 kB
31.665 kB
react-popover
Popover		 100.411 kB
30.075 kB
react-portal
Portal		 6.725 kB
2.237 kB
react-positioning
usePopper		 23.145 kB
7.942 kB
react-provider
FluentProvider		 15.748 kB
5.773 kB
react-slider
Slider		 30.621 kB
9.711 kB
react-switch
Switch		 18.067 kB
6.181 kB
react-text
Text - Default		 11.798 kB
4.452 kB
react-text
Text - Wrappers		 15.414 kB
4.734 kB
react-theme
Teams: all themes		 32.941 kB
6.674 kB
react-theme
Teams: Light theme		 20.247 kB
5.662 kB
react-tooltip
Tooltip		 46.029 kB
15.655 kB
react-utilities
SSRProvider		 213 B
170 B
🤖 This report was generated against 5fed6eb60f7f958dab75c19aece0b905c06ee6fa

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 27, 2021 •
edited

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 1c3cf50:

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link

size-auditor bot commented Jul 27, 2021 •
edited

Asset size changes

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

Baseline commit: 5fed6eb60f7f958dab75c19aece0b905c06ee6fa (build)

@SethDonohue
Copy link
Contributor Author

SethDonohue commented Jul 27, 2021 •
edited

I'm going to update the styling a touch, its height is a bit off.

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 27, 2021 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 916 914 5000
BaseButton mount 945 909 5000
Breadcrumb mount 2675 2698 1000
ButtonNext mount 442 456 5000
Checkbox mount 1549 1517 5000
CheckboxBase mount 1263 1360 5000
ChoiceGroup mount 4822 4825 5000
ComboBox mount 995 1023 1000
CommandBar mount 10447 10389 1000
ContextualMenu mount 6627 6685 1000
DefaultButton mount 1148 1159 5000
DetailsRow mount 3750 3810 5000
DetailsRowFast mount 3780 3793 5000
DetailsRowNoStyles mount 3620 3528 5000
Dialog mount 2465 2470 1000
DocumentCardTitle mount 137 166 1000
Dropdown mount 3254 3232 5000
FluentProviderNext mount 7609 7594 5000
FluentProviderWithTheme mount 362 360 10
FluentProviderWithTheme virtual-rerender 92 87 10
FluentProviderWithTheme virtual-rerender-with-unmount 485 496 10
FocusTrapZone mount 1838 1828 5000
FocusZone mount 1826 1846 5000
IconButton mount 1750 1752 5000
Label mount 335 337 5000
Layer mount 2987 3049 5000
Link mount 466 473 5000
MakeStyles mount 1875 1845 50000
MenuButton mount 1466 1512 5000
MessageBar mount 2113 2033 5000
Nav mount 3359 3301 1000
OverflowSet mount 1123 1138 5000
Panel mount 2421 2409 1000
Persona mount 825 824 1000
Pivot mount 1448 1435 1000
PrimaryButton mount 1345 1299 5000
Rating mount 7816 7776 5000
SearchBox mount 1316 1332 5000
Shimmer mount 2527 2518 5000
Slider mount 2010 1993 5000
SpinButton mount 5140 5091 5000
Spinner mount 432 435 5000
SplitButton mount 3172 3242 5000
Stack mount 497 515 5000
StackWithIntrinsicChildren mount 1645 1626 5000
StackWithTextChildren mount 4611 4577 5000
SwatchColorPicker mount 11395 10570 5000
Tabs mount 1442 1446 1000
TagPicker mount 2674 2654 5000
TeachingBubble mount 13410 13431 5000
Text mount 416 413 5000
TextField mount 1364 1406 5000
ThemeProvider mount 1226 1216 5000
ThemeProvider virtual-rerender 607 610 5000
ThemeProvider virtual-rerender-with-unmount 1895 1955 5000
Toggle mount 813 811 5000
buttonNative mount 123 118 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ImageMinimalPerf.default 382 358 1.07:1
CarouselMinimalPerf.default 479 453 1.06:1
ReactionMinimalPerf.default 383 360 1.06:1
RefMinimalPerf.default 245 232 1.06:1
TableMinimalPerf.default 414 396 1.05:1
AccordionMinimalPerf.default 156 150 1.04:1
ListNestedPerf.default 572 549 1.04:1
ListWith60ListItems.default 651 625 1.04:1
RadioGroupMinimalPerf.default 457 438 1.04:1
IconMinimalPerf.default 625 600 1.04:1
TextMinimalPerf.default 367 352 1.04:1
BoxMinimalPerf.default 354 345 1.03:1
DialogMinimalPerf.default 770 749 1.03:1
DropdownManyItemsPerf.default 684 665 1.03:1
GridMinimalPerf.default 342 331 1.03:1
LabelMinimalPerf.default 384 373 1.03:1
PortalMinimalPerf.default 181 176 1.03:1
SplitButtonMinimalPerf.default 4245 4134 1.03:1
StatusMinimalPerf.default 688 671 1.03:1
TableManyItemsPerf.default 1929 1866 1.03:1
AttachmentSlotsPerf.default 1080 1062 1.02:1
DatepickerMinimalPerf.default 5643 5517 1.02:1
FormMinimalPerf.default 405 399 1.02:1
HeaderSlotsPerf.default 772 754 1.02:1
InputMinimalPerf.default 1310 1282 1.02:1
ListCommonPerf.default 636 622 1.02:1
ListMinimalPerf.default 514 505 1.02:1
PopupMinimalPerf.default 598 588 1.02:1
AlertMinimalPerf.default 270 267 1.01:1
AttachmentMinimalPerf.default 159 157 1.01:1
AvatarMinimalPerf.default 199 197 1.01:1
ButtonMinimalPerf.default 174 173 1.01:1
ButtonOverridesMissPerf.default 1758 1737 1.01:1
CardMinimalPerf.default 563 560 1.01:1
ChatDuplicateMessagesPerf.default 303 299 1.01:1
ItemLayoutMinimalPerf.default 1203 1197 1.01:1
LayoutMinimalPerf.default 365 360 1.01:1
ProviderMergeThemesPerf.default 1729 1711 1.01:1
SkeletonMinimalPerf.default 343 341 1.01:1
CustomToolbarPrototype.default 4070 4048 1.01:1
ToolbarMinimalPerf.default 929 918 1.01:1
VideoMinimalPerf.default 633 627 1.01:1
AnimationMinimalPerf.default 407 408 1:1
EmbedMinimalPerf.default 4259 4247 1:1
MenuButtonMinimalPerf.default 1653 1651 1:1
ProviderMinimalPerf.default 1062 1060 1:1
SegmentMinimalPerf.default 341 342 1:1
CheckboxMinimalPerf.default 2754 2793 0.99:1
DividerMinimalPerf.default 364 369 0.99:1
DropdownMinimalPerf.default 3190 3207 0.99:1
FlexMinimalPerf.default 288 291 0.99:1
LoaderMinimalPerf.default 699 706 0.99:1
TextAreaMinimalPerf.default 490 496 0.99:1
TreeMinimalPerf.default 774 779 0.99:1
ChatMinimalPerf.default 633 643 0.98:1
ChatWithPopoverPerf.default 374 380 0.98:1
RosterPerf.default 1143 1166 0.98:1
SliderMinimalPerf.default 1635 1675 0.98:1
TooltipMinimalPerf.default 1020 1045 0.98:1
ButtonSlotsPerf.default 540 556 0.97:1
MenuMinimalPerf.default 821 847 0.97:1
TreeWith60ListItems.default 174 180 0.97:1
HeaderMinimalPerf.default 357 375 0.95:1

@chrisdholt chrisdholt assigned chrisdholt and unassigned ling1726 Aug 18, 2021
@SethDonohue SethDonohue requested a review from a team as a code owner September 14, 2021 17:19
chrisdholt
chrisdholt requested changes Sep 14, 2021
View reviewed changes
Copy link
Member

@chrisdholt chrisdholt left a comment

Choose a reason for hiding this comment

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

Looks like there are some unrelated changes in this PR with the latest update. I don't think we want to include the removed changed files here - that seems odd

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v1.5.1 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-utilities@v9.0.0-alpha.47 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tooltip@v9.0.0-alpha.81 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-text@v9.0.0-alpha.14 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tabster@v9.0.0-alpha.59 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-switch@v9.0.0-alpha.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-slider@v9.0.0-alpha.4 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-provider@v9.0.0-alpha.76 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-portal@v9.0.0-alpha.47 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-popover@v9.0.0-alpha.42 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-menu@v9.0.0-alpha.76 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-make-styles@v9.0.0-alpha.65 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-link@v9.0.0-alpha.80 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-label@v9.0.0-alpha.38 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-image@v9.0.0-alpha.77 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-divider@v9.0.0-alpha.66 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-context-selector@v9.0.0-alpha.30 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-conformance-make-styles@v9.0.0-alpha.9 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-components@v9.0.0-alpha.107 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-checkbox@v9.0.0-alpha.34 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-card@v9.0.0-alpha.1 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-button@v9.0.0-alpha.85 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-badge@v9.0.0-alpha.79 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-avatar@v9.0.0-alpha.79 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-aria@v9.0.0-alpha.31 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-accordion@v9.0.0-alpha.75 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/make-styles-webpack-loader@v9.0.0-alpha.20 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/jest-serializer-make-styles@v9.0.0-alpha.40 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/babel-make-styles@v9.0.0-alpha.47 has been released which incorporates this pull request.:tada:

Handy links:

mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
@SethDonohue
feat: add web components toolbar (microsoft#19155)
2dfac23 
* add toolbar

* Change files

* update docs

* update definition file

* update styles on examples

* remove border, update padding to designUnit only

* label alignment style updates

* update foundation package and change file

* update yarn lock

Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

@ecraig12345 ecraig12345 ecraig12345 approved these changes

@scomea scomea scomea approved these changes

@chrisdholt chrisdholt chrisdholt approved these changes

@khamudom khamudom khamudom approved these changes

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
9 participants
@SethDonohue @fabricteam @msft-fluent-ui-bot @EisenbergEffect @ecraig12345 @scomea @chrisdholt @khamudom @ling1726