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.

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

(web-components) - content update for overview docs #19891

Conversation

brookdozer
Copy link
Contributor

Pull request checklist

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

Description of changes

Updated overview document to tie more closely with overall Fluent UI direction.

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.

Great improvement!

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 21, 2021

📊 Bundle size report

🤖 This report was generated against 047f5f2907b01ae5eaf85869404a7e76de878115

@size-auditor
Copy link

size-auditor bot commented Sep 21, 2021

Asset size changes

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

Baseline commit: 047f5f2907b01ae5eaf85869404a7e76de878115 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 21, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 992 962 5000
BaseButton mount 968 971 5000
Breadcrumb mount 2690 2656 1000
ButtonNext mount 446 480 5000
Checkbox mount 1597 1508 5000
CheckboxBase mount 1273 1329 5000
ChoiceGroup mount 4848 4877 5000
ComboBox mount 1010 971 1000
CommandBar mount 10575 10646 1000
ContextualMenu mount 6769 6853 1000
DefaultButton mount 1160 1126 5000
DetailsRow mount 3853 3963 5000
DetailsRowFast mount 3821 3830 5000
DetailsRowNoStyles mount 3615 3798 5000
Dialog mount 2568 2490 1000
DocumentCardTitle mount 161 150 1000
Dropdown mount 3260 3405 5000
FluentProviderNext mount 7708 7691 5000
FluentProviderWithTheme mount 371 365 10
FluentProviderWithTheme virtual-rerender 103 97 10
FluentProviderWithTheme virtual-rerender-with-unmount 518 484 10
FocusTrapZone mount 1798 1952 5000
FocusZone mount 1830 1879 5000
IconButton mount 1785 1796 5000
Label mount 351 333 5000
Layer mount 3047 3139 5000
Link mount 470 488 5000
MakeStyles mount 1821 1873 50000
MenuButton mount 1510 1447 5000
MessageBar mount 2062 2082 5000
Nav mount 3455 3359 1000
OverflowSet mount 1132 1087 5000
Panel mount 2419 2414 1000
Persona mount 865 882 1000
Pivot mount 1484 1501 1000
PrimaryButton mount 1298 1363 5000
Rating mount 7824 7929 5000
SearchBox mount 1351 1411 5000
Shimmer mount 2567 2613 5000
Slider mount 1978 2001 5000
SpinButton mount 5118 5003 5000
Spinner mount 443 415 5000
SplitButton mount 3226 3257 5000
Stack mount 533 502 5000
StackWithIntrinsicChildren mount 1747 1678 5000
StackWithTextChildren mount 4846 4815 5000
SwatchColorPicker mount 10689 10656 5000
Tabs mount 1443 1459 1000
TagPicker mount 2697 2701 5000
TeachingBubble mount 13671 13623 5000
Text mount 418 425 5000
TextField mount 1419 1423 5000
ThemeProvider mount 1197 1212 5000
ThemeProvider virtual-rerender 602 651 5000
ThemeProvider virtual-rerender-with-unmount 1911 1933 5000
Toggle mount 826 835 5000
buttonNative mount 136 114 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TextMinimalPerf.default 388 353 1.1:1
ListCommonPerf.default 664 611 1.09:1
CardMinimalPerf.default 599 554 1.08:1
ChatWithPopoverPerf.default 403 373 1.08:1
FlexMinimalPerf.default 306 283 1.08:1
GridMinimalPerf.default 363 336 1.08:1
FormMinimalPerf.default 432 402 1.07:1
AccordionMinimalPerf.default 167 157 1.06:1
ChatMinimalPerf.default 673 634 1.06:1
DropdownManyItemsPerf.default 740 700 1.06:1
TooltipMinimalPerf.default 1076 1019 1.06:1
AnimationMinimalPerf.default 424 407 1.04:1
AttachmentSlotsPerf.default 1112 1068 1.04:1
ItemLayoutMinimalPerf.default 1266 1215 1.04:1
LayoutMinimalPerf.default 397 381 1.04:1
ReactionMinimalPerf.default 386 372 1.04:1
SplitButtonMinimalPerf.default 4463 4287 1.04:1
VideoMinimalPerf.default 662 639 1.04:1
CheckboxMinimalPerf.default 2825 2738 1.03:1
SliderMinimalPerf.default 1784 1731 1.03:1
TreeMinimalPerf.default 844 819 1.03:1
AttachmentMinimalPerf.default 170 167 1.02:1
ImageMinimalPerf.default 372 363 1.02:1
InputMinimalPerf.default 1372 1341 1.02:1
PortalMinimalPerf.default 193 189 1.02:1
BoxMinimalPerf.default 359 357 1.01:1
ChatDuplicateMessagesPerf.default 321 317 1.01:1
DividerMinimalPerf.default 361 358 1.01:1
SkeletonMinimalPerf.default 359 357 1.01:1
DatepickerMinimalPerf.default 5841 5824 1:1
DropdownMinimalPerf.default 3203 3204 1:1
PopupMinimalPerf.default 603 603 1:1
TableManyItemsPerf.default 1969 1976 1:1
TableMinimalPerf.default 429 431 1:1
TextAreaMinimalPerf.default 511 511 1:1
ButtonOverridesMissPerf.default 1763 1778 0.99:1
ButtonSlotsPerf.default 569 575 0.99:1
CarouselMinimalPerf.default 468 474 0.99:1
DialogMinimalPerf.default 784 789 0.99:1
HeaderSlotsPerf.default 786 793 0.99:1
LoaderMinimalPerf.default 734 741 0.99:1
ProviderMinimalPerf.default 1150 1166 0.99:1
IconMinimalPerf.default 626 632 0.99:1
CustomToolbarPrototype.default 4255 4278 0.99:1
TreeWith60ListItems.default 176 178 0.99:1
AlertMinimalPerf.default 267 273 0.98:1
EmbedMinimalPerf.default 4302 4387 0.98:1
HeaderMinimalPerf.default 386 393 0.98:1
LabelMinimalPerf.default 397 405 0.98:1
ListNestedPerf.default 557 566 0.98:1
RadioGroupMinimalPerf.default 454 464 0.98:1
SegmentMinimalPerf.default 352 360 0.98:1
StatusMinimalPerf.default 670 685 0.98:1
AvatarMinimalPerf.default 193 201 0.96:1
ProviderMergeThemesPerf.default 1774 1839 0.96:1
RefMinimalPerf.default 239 252 0.95:1
ToolbarMinimalPerf.default 965 1017 0.95:1
ButtonMinimalPerf.default 176 187 0.94:1
RosterPerf.default 1167 1245 0.94:1
ListWith60ListItems.default 648 696 0.93:1
ListMinimalPerf.default 498 541 0.92:1
MenuButtonMinimalPerf.default 1635 1771 0.92:1
MenuMinimalPerf.default 832 919 0.91:1


## What are the Fluent UI Web Components?
###
Copy link
Member

Choose a reason for hiding this comment

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

@brookdozer do we need this paragraph here on line 7 if there isn't any content?

Suggested change
###

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nope. Removed


The Fluent UI Web Components is a library of Web Components that composes `@microsoft/fast-foundation`, styled with design tokens for Microsoft's [Fluent design language](https://github.com/microsoft/fluentui).
It is designed to get you up and running quickly with an extensible set of Web Components for building Fluent UI web applications.
### Web Component libraries for building Fluent UI web experiences
Copy link
Member

Choose a reason for hiding this comment

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

Considering this is specific to one library, is there a better "heading" for this section of text?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You're right. This is unclear and the whole page reads better w/o this subhead. Removed

@chrisdholt chrisdholt merged commit e356b30 into microsoft:master Sep 23, 2021
@chrisdholt
Copy link
Member

Thanks @brookdozer!

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/theme-samples@v8.2.14 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.34.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tabs@v1.0.0-beta.160 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-monaco-editor@v1.2.14 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-experiments@v8.3.14 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-docsite-components@v8.3.32 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-date-time@v8.1.71 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-charting@v5.3.45 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-cards@v0.200.33 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/cra-template@v8.0.5 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/azure-themes@v8.1.73 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
* Update content for web component overview docs

* Change files

* Removed blank heading and extra subheading

* Added Ember page, fixed unclosed combobox tag
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.

5 participants