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

(web components) add progress and progress ring examples to show animated options #20114

Merged
merged 4 commits into from
Oct 7, 2021
Merged

(web components) add progress and progress ring examples to show animated options #20114

merged 4 commits into from
Oct 7, 2021

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Oct 5, 2021 •
edited
Loading

Pull request checklist

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

Description of changes

Adds to the progress and progress ring component examples to show the animated versions of the components.

progressstories

@SethDonohue
Copy link
Contributor Author

@brookdozer check this out and let me know what you think.
Is this the correct way to add another example in storybook now?

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 5, 2021 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against 1c65efb2c7618613d03c8f525f70a2c935313b09

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 5, 2021 •
edited
Loading

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:

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

@size-auditor
Copy link

size-auditor bot commented Oct 5, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 1c65efb2c7618613d03c8f525f70a2c935313b09 (build)

@SethDonohue SethDonohue force-pushed the users/sethd/add-progress-examples branch from 9b50d9a to dff3c19 Compare October 5, 2021 20:54
@SethDonohue SethDonohue changed the title (web components) add progress examples to show animated options (web components) add progress and progress ring examples to show animated options Oct 5, 2021
@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

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

@brookdozer
Copy link
Contributor

@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.

@SethDonohue
Copy link
Contributor Author

@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!

chrisdholt
chrisdholt approved these changes Oct 7, 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.

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.

@chrisdholt chrisdholt merged commit 41f9ce2 into microsoft:master Oct 7, 2021
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
@SethDonohue
(web components) add progress and progress ring examples to show anim…
c0e68d8 
…ated options (microsoft#20114)

* add progress examples

* Change files

* update to separate examples out

* updated to add stories

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

@chrisdholt chrisdholt chrisdholt approved these changes

@EisenbergEffect EisenbergEffect Awaiting requested review from EisenbergEffect

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@bsunderhus bsunderhus

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@SethDonohue @fabricteam @brookdozer @chrisdholt @bsunderhus @msft-fluent-ui-bot