-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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) add progress and progress ring examples to show animated options #20114
(web components) add progress and progress ring examples to show animated options #20114
Conversation
@brookdozer check this out and let me know what you think. |
📊 Bundle size report🤖 This report was generated against 1c65efb2c7618613d03c8f525f70a2c935313b09 |
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 dff3c19:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 1c65efb2c7618613d03c8f525f70a2c935313b09 (build) |
9b50d9a
to
dff3c19
Compare
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 790 | 813 | 5000 | |
BaseButton | mount | 799 | 793 | 5000 | |
Breadcrumb | mount | 2039 | 1961 | 1000 | |
ButtonNext | mount | 427 | 426 | 5000 | |
Checkbox | mount | 1306 | 1266 | 5000 | |
CheckboxBase | mount | 1120 | 975 | 5000 | |
ChoiceGroup | mount | 3932 | 3916 | 5000 | |
ComboBox | mount | 836 | 824 | 1000 | |
CommandBar | mount | 8461 | 8568 | 1000 | |
ContextualMenu | mount | 5447 | 5383 | 1000 | |
DefaultButton | mount | 980 | 917 | 5000 | |
DetailsRow | mount | 3246 | 3188 | 5000 | |
DetailsRowFast | mount | 3171 | 3113 | 5000 | |
DetailsRowNoStyles | mount | 3087 | 3066 | 5000 | |
Dialog | mount | 1896 | 2077 | 1000 | |
DocumentCardTitle | mount | 121 | 128 | 1000 | |
Dropdown | mount | 2583 | 2655 | 5000 | |
FluentProviderNext | mount | 2944 | 2891 | 5000 | |
FluentProviderWithTheme | mount | 180 | 177 | 10 | |
FluentProviderWithTheme | virtual-rerender | 81 | 83 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 186 | 221 | 10 | |
FocusTrapZone | mount | 1590 | 1554 | 5000 | |
FocusZone | mount | 1602 | 1569 | 5000 | |
IconButton | mount | 1502 | 1514 | 5000 | |
Label | mount | 314 | 276 | 5000 | |
Layer | mount | 2494 | 2384 | 5000 | |
Link | mount | 389 | 419 | 5000 | |
MakeStyles | mount | 1575 | 1594 | 50000 | |
MenuButton | mount | 1275 | 1175 | 5000 | |
MessageBar | mount | 1723 | 1723 | 5000 | |
Nav | mount | 2849 | 2831 | 1000 | |
OverflowSet | mount | 985 | 847 | 5000 | |
Panel | mount | 2003 | 1908 | 1000 | |
Persona | mount | 732 | 719 | 1000 | |
Pivot | mount | 1213 | 1223 | 1000 | |
PrimaryButton | mount | 1111 | 1124 | 5000 | |
Rating | mount | 6521 | 6555 | 5000 | |
SearchBox | mount | 1126 | 1150 | 5000 | |
Shimmer | mount | 2205 | 2203 | 5000 | |
Slider | mount | 1708 | 1677 | 5000 | |
SpinButton | mount | 4320 | 4541 | 5000 | |
Spinner | mount | 383 | 376 | 5000 | |
SplitButton | mount | 2724 | 2711 | 5000 | |
Stack | mount | 437 | 440 | 5000 | |
StackWithIntrinsicChildren | mount | 1471 | 1457 | 5000 | |
StackWithTextChildren | mount | 3964 | 3943 | 5000 | |
SwatchColorPicker | mount | 8807 | 8857 | 5000 | |
Tabs | mount | 1192 | 1213 | 1000 | |
TagPicker | mount | 2327 | 2260 | 5000 | |
TeachingBubble | mount | 10967 | 11031 | 5000 | |
Text | mount | 378 | 377 | 5000 | |
TextField | mount | 1190 | 1095 | 5000 | |
ThemeProvider | mount | 1019 | 1030 | 5000 | |
ThemeProvider | virtual-rerender | 529 | 526 | 5000 | |
ThemeProvider | virtual-rerender-with-unmount | 1598 | 1584 | 5000 | |
Toggle | mount | 689 | 699 | 5000 | |
buttonNative | mount | 120 | 119 | 5000 |
Perf Analysis (@fluentui/react-northstar
)
Perf tests with no regressions
Scenario | Current PR Ticks | Baseline Ticks | Ratio |
---|---|---|---|
FormMinimalPerf.default | 336 | 284 | 1.18:1 |
FlexMinimalPerf.default | 239 | 212 | 1.13:1 |
AccordionMinimalPerf.default | 140 | 127 | 1.1:1 |
ButtonSlotsPerf.default | 466 | 424 | 1.1:1 |
ChatDuplicateMessagesPerf.default | 251 | 229 | 1.1:1 |
DialogMinimalPerf.default | 644 | 587 | 1.1:1 |
MenuButtonMinimalPerf.default | 1378 | 1269 | 1.09:1 |
ToolbarMinimalPerf.default | 774 | 710 | 1.09:1 |
PopupMinimalPerf.default | 472 | 437 | 1.08:1 |
ListNestedPerf.default | 478 | 446 | 1.07:1 |
SegmentMinimalPerf.default | 304 | 285 | 1.07:1 |
CustomToolbarPrototype.default | 3463 | 3240 | 1.07:1 |
AttachmentMinimalPerf.default | 133 | 125 | 1.06:1 |
AvatarMinimalPerf.default | 156 | 148 | 1.05:1 |
CheckboxMinimalPerf.default | 2288 | 2177 | 1.05:1 |
HeaderSlotsPerf.default | 601 | 573 | 1.05:1 |
ListMinimalPerf.default | 425 | 407 | 1.04:1 |
IconMinimalPerf.default | 535 | 516 | 1.04:1 |
TreeWith60ListItems.default | 154 | 148 | 1.04:1 |
ChatMinimalPerf.default | 515 | 501 | 1.03:1 |
LabelMinimalPerf.default | 335 | 325 | 1.03:1 |
RadioGroupMinimalPerf.default | 382 | 372 | 1.03:1 |
CardMinimalPerf.default | 461 | 452 | 1.02:1 |
DividerMinimalPerf.default | 304 | 298 | 1.02:1 |
ImageMinimalPerf.default | 303 | 297 | 1.02:1 |
ItemLayoutMinimalPerf.default | 960 | 942 | 1.02:1 |
TooltipMinimalPerf.default | 882 | 863 | 1.02:1 |
AlertMinimalPerf.default | 226 | 223 | 1.01:1 |
ButtonOverridesMissPerf.default | 1445 | 1427 | 1.01:1 |
ChatWithPopoverPerf.default | 328 | 326 | 1.01:1 |
DatepickerMinimalPerf.default | 4509 | 4465 | 1.01:1 |
GridMinimalPerf.default | 281 | 279 | 1.01:1 |
HeaderMinimalPerf.default | 301 | 297 | 1.01:1 |
TreeMinimalPerf.default | 618 | 610 | 1.01:1 |
AttachmentSlotsPerf.default | 921 | 925 | 1:1 |
CarouselMinimalPerf.default | 392 | 392 | 1:1 |
ProviderMergeThemesPerf.default | 1406 | 1410 | 1:1 |
ProviderMinimalPerf.default | 957 | 960 | 1:1 |
RefMinimalPerf.default | 207 | 206 | 1:1 |
DropdownManyItemsPerf.default | 569 | 576 | 0.99:1 |
EmbedMinimalPerf.default | 3511 | 3535 | 0.99:1 |
ListCommonPerf.default | 521 | 527 | 0.99:1 |
SplitButtonMinimalPerf.default | 3347 | 3366 | 0.99:1 |
TextAreaMinimalPerf.default | 384 | 388 | 0.99:1 |
DropdownMinimalPerf.default | 2573 | 2624 | 0.98:1 |
MenuMinimalPerf.default | 697 | 708 | 0.98:1 |
RosterPerf.default | 982 | 1001 | 0.98:1 |
ButtonMinimalPerf.default | 134 | 140 | 0.96:1 |
SkeletonMinimalPerf.default | 285 | 296 | 0.96:1 |
AnimationMinimalPerf.default | 330 | 348 | 0.95:1 |
SliderMinimalPerf.default | 1371 | 1443 | 0.95:1 |
TableManyItemsPerf.default | 1485 | 1555 | 0.95:1 |
ListWith60ListItems.default | 501 | 538 | 0.93:1 |
PortalMinimalPerf.default | 139 | 150 | 0.93:1 |
TextMinimalPerf.default | 262 | 283 | 0.93:1 |
InputMinimalPerf.default | 1019 | 1105 | 0.92:1 |
StatusMinimalPerf.default | 500 | 552 | 0.91:1 |
TableMinimalPerf.default | 298 | 328 | 0.91:1 |
LoaderMinimalPerf.default | 527 | 589 | 0.89:1 |
ReactionMinimalPerf.default | 280 | 313 | 0.89:1 |
BoxMinimalPerf.default | 260 | 294 | 0.88:1 |
LayoutMinimalPerf.default | 273 | 310 | 0.88:1 |
VideoMinimalPerf.default | 453 | 543 | 0.83:1 |
@SethDonohue - this looks good to me -- it's not perfect, but given the way we're using Storybook for Fluent UI Web Components, I like your angle here. |
I think you are able to review this correct? Sign off if you like it! |
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.
I think this is fine to add stories. @brookdozer and I talked recently about wanting to find a way to embed examples in a better way. With this we should probably figure that out sooner rather than later.
Something to consider in the future - if we made the default story animated, in theory I could click "paused" in the example and turn that on via attribute, and I could also pass value which would fix the value which would leverage the current example approach.
…ated options (microsoft#20114) * add progress examples * Change files * update to separate examples out * updated to add stories Co-authored-by: Seth Donohue <[email protected]>
Pull request checklist
$ yarn change
Description of changes
Adds to the progress and progress ring component examples to show the animated versions of the components.