Skip to content

react-badge: Migrate to new DX#18746

Merged
tringakrasniqi merged 11 commits intomicrosoft:masterfrom
tringakrasniqi:@tringakrasniqi/dx-migration-badge
Jul 1, 2021
Merged

react-badge: Migrate to new DX#18746
tringakrasniqi merged 11 commits intomicrosoft:masterfrom
tringakrasniqi:@tringakrasniqi/dx-migration-badge

Conversation

@tringakrasniqi
Copy link
Contributor

@tringakrasniqi tringakrasniqi commented Jun 28, 2021

Pull request checklist

Description of changes

Migration of react-badge package to new DX

@tringakrasniqi tringakrasniqi requested a review from Hotell June 28, 2021 13:20
@tringakrasniqi tringakrasniqi changed the title @tringakrasniqi/dx migration badge react-badge: Migrate to new DX Jun 28, 2021
@size-auditor
Copy link

size-auditor bot commented Jun 28, 2021

Asset size changes

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

Baseline commit: 8de04ed56820cfdb7c13d9c108b0eae596cd3215 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 28, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 832 890 5000
BaseButton mount 927 933 5000
Breadcrumb mount 2856 2676 1000
ButtonNext mount 515 531 5000
Checkbox mount 1588 1558 5000
CheckboxBase mount 1332 1392 5000
ChoiceGroup mount 4929 4870 5000
ComboBox mount 1050 1022 1000
CommandBar mount 10490 10715 1000
ContextualMenu mount 6356 6233 1000
DefaultButton mount 1168 1139 5000
DetailsRow mount 3808 3895 5000
DetailsRowFast mount 3813 3818 5000
DetailsRowNoStyles mount 3552 3574 5000
Dialog mount 2163 2179 1000
DocumentCardTitle mount 140 151 1000
Dropdown mount 3288 3341 5000
FluentProviderNext mount 7495 7516 5000
FocusTrapZone mount 1786 1749 5000
FocusZone mount 1801 1848 5000
IconButton mount 1818 1772 5000
Label mount 334 355 5000
Layer mount 1785 1836 5000
Link mount 460 484 5000
MakeStyles mount 1826 1831 50000
MenuButton mount 1448 1538 5000
MessageBar mount 2078 2106 5000
Nav mount 3422 3407 1000
OverflowSet mount 1089 1097 5000
Panel mount 1446 2222 1000
Persona mount 844 863 1000
Pivot mount 1503 1464 1000
PrimaryButton mount 1353 1386 5000
Rating mount 7762 7753 5000
SearchBox mount 1422 1356 5000
Shimmer mount 2569 2652 5000
Slider mount 1932 2003 5000
SpinButton mount 5124 5145 5000
Spinner mount 439 471 5000
SplitButton mount 3128 3186 5000
Stack mount 495 497 5000
StackWithIntrinsicChildren mount 1513 1535 5000
StackWithTextChildren mount 4538 4501 5000
SwatchColorPicker mount 10464 10671 5000
Tabs mount 1478 1389 1000
TagPicker mount 2487 2528 5000
TeachingBubble mount 12447 12367 5000
Text mount 461 421 5000
TextField mount 1434 1431 5000
ThemeProvider mount 1270 1217 5000
ThemeProvider virtual-rerender 591 602 5000
Toggle mount 841 790 5000
buttonNative mount 117 122 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonSlotsPerf.default 603 548 1.1:1
FormMinimalPerf.default 442 406 1.09:1
IconMinimalPerf.default 666 624 1.07:1
TreeWith60ListItems.default 177 165 1.07:1
AttachmentSlotsPerf.default 1132 1064 1.06:1
AvatarMinimalPerf.default 205 193 1.06:1
ListMinimalPerf.default 546 517 1.06:1
AnimationMinimalPerf.default 442 419 1.05:1
BoxMinimalPerf.default 366 350 1.05:1
PortalMinimalPerf.default 201 191 1.05:1
ButtonMinimalPerf.default 177 171 1.04:1
ChatWithPopoverPerf.default 382 367 1.04:1
HeaderMinimalPerf.default 376 360 1.04:1
SplitButtonMinimalPerf.default 3975 3825 1.04:1
TableMinimalPerf.default 427 415 1.03:1
VideoMinimalPerf.default 642 624 1.03:1
CarouselMinimalPerf.default 488 479 1.02:1
ItemLayoutMinimalPerf.default 1285 1264 1.02:1
MenuMinimalPerf.default 901 886 1.02:1
PopupMinimalPerf.default 614 600 1.02:1
RefMinimalPerf.default 251 247 1.02:1
SliderMinimalPerf.default 1667 1633 1.02:1
DialogMinimalPerf.default 784 776 1.01:1
ImageMinimalPerf.default 375 370 1.01:1
InputMinimalPerf.default 1322 1315 1.01:1
ListNestedPerf.default 572 567 1.01:1
RadioGroupMinimalPerf.default 469 464 1.01:1
StatusMinimalPerf.default 704 695 1.01:1
AlertMinimalPerf.default 285 285 1:1
ButtonOverridesMissPerf.default 1757 1762 1:1
CheckboxMinimalPerf.default 2870 2867 1:1
DatepickerMinimalPerf.default 5850 5868 1:1
DropdownMinimalPerf.default 3191 3201 1:1
LabelMinimalPerf.default 408 407 1:1
ListCommonPerf.default 638 641 1:1
ProviderMergeThemesPerf.default 1766 1773 1:1
ProviderMinimalPerf.default 1054 1056 1:1
TooltipMinimalPerf.default 1011 1006 1:1
TreeMinimalPerf.default 833 836 1:1
CardMinimalPerf.default 563 568 0.99:1
DropdownManyItemsPerf.default 665 670 0.99:1
MenuButtonMinimalPerf.default 1663 1685 0.99:1
ReactionMinimalPerf.default 395 398 0.99:1
TableManyItemsPerf.default 1995 2022 0.99:1
ToolbarMinimalPerf.default 938 952 0.99:1
ChatDuplicateMessagesPerf.default 303 309 0.98:1
ChatMinimalPerf.default 675 689 0.98:1
EmbedMinimalPerf.default 4269 4370 0.98:1
GridMinimalPerf.default 334 342 0.98:1
HeaderSlotsPerf.default 783 798 0.98:1
LayoutMinimalPerf.default 370 379 0.98:1
ListWith60ListItems.default 688 702 0.98:1
RosterPerf.default 1250 1272 0.98:1
CustomToolbarPrototype.default 3943 4034 0.98:1
AccordionMinimalPerf.default 147 152 0.97:1
DividerMinimalPerf.default 368 380 0.97:1
FlexMinimalPerf.default 294 304 0.97:1
LoaderMinimalPerf.default 728 747 0.97:1
TextAreaMinimalPerf.default 515 535 0.96:1
AttachmentMinimalPerf.default 157 165 0.95:1
SegmentMinimalPerf.default 358 377 0.95:1
TextMinimalPerf.default 345 364 0.95:1
SkeletonMinimalPerf.default 370 392 0.94:1

Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

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

Approving with 2 minor comments. Thanks for doing this!

@@ -0,0 +1,62 @@
//
Copy link
Member

Choose a reason for hiding this comment

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

nit: Should this have just a .tsx extension instead of a .stories.tsx one?

Copy link
Contributor

@Hotell Hotell Jun 30, 2021

Choose a reason for hiding this comment

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

Should this have just a .tsx extension instead of a .stories.tsx one?

no.

Why?:

  • we wanna be explicit about content for storybook.
  • in upcoming stages of DX improvements, we'll use separate tsconfig for storybook related things -> this will allow us to not ship those files (storybook related) to npm registry (which we currently do)

tringakrasniqi and others added 4 commits June 30, 2021 14:48
Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
…c1723b.json

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 1, 2021

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 522cdd2:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@tringakrasniqi tringakrasniqi merged commit 3559542 into microsoft:master Jul 1, 2021
@tringakrasniqi tringakrasniqi deleted the @tringakrasniqi/dx-migration-badge branch July 1, 2021 11:58
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.

6 participants