-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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
(web-components) - content update for overview docs #19891
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great improvement!
📊 Bundle size report🤖 This report was generated against 047f5f2907b01ae5eaf85869404a7e76de878115 |
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 047f5f2907b01ae5eaf85869404a7e76de878115 (build) |
Perf Analysis (
|
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? | ||
### |
There was a problem hiding this comment.
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?
### |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
Thanks @brookdozer! |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
🎉 Handy links: |
* Update content for web component overview docs * Change files * Removed blank heading and extra subheading * Added Ember page, fixed unclosed combobox tag
Pull request checklist
$ yarn change
Description of changes
Updated overview document to tie more closely with overall Fluent UI direction.