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

Staging the react-avatar package; #14518

Merged
merged 48 commits into from
Aug 17, 2020
Merged

Staging the react-avatar package; #14518

merged 48 commits into from
Aug 17, 2020

Conversation

dzearing
Copy link
Member

@dzearing dzearing commented Aug 14, 2020

Getting this up and running to unblock @behowell .

This will include the converged Avatar. We may need to separate out a separate react-badge package as well, separately of this PR.

Note; this has a converted Image, but really we should change this asap to react-image.

dzearing and others added 30 commits March 24, 2020 10:31
…eat/avatar

# Conflicts:
#	apps/test-bundles/package.json
#	packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
#	yarn.lock
…eat/avatar

# Conflicts:
#	apps/test-bundles/package.json
dzearing and others added 12 commits May 1, 2020 08:00
feat: use react-compose in react-avatar
…eat/avatar

# Conflicts:
#	.vscode/settings.json
#	packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts
#	packages/react-compose/etc/react-compose.api.md
#	packages/react-compose/package.json
#	packages/react-compose/src/compose.ts
#	packages/react-compose/src/types.ts
#	packages/react-compose/src/utils.ts
#	scripts/package.json
#	yarn.lock
…eat/avatar

# Conflicts:
#	packages/react-compose/src/next/types.ts
@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 14, 2020

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 e0b8902:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 14, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 916 940 5000
ButtonNext mount 610 599 5000
Checkbox mount 1644 1664 5000
CheckboxBase mount 1334 1364 5000
CheckboxNext mount 1740 1703 5000
ChoiceGroup mount 5159 5176 5000
ComboBox mount 975 980 1000
CommandBar mount 7974 7908 1000
ContextualMenu mount 15046 13509 1000
DefaultButton mount 1167 1167 5000
DetailsRow mount 3739 3715 5000
DetailsRowFast mount 3627 3673 5000
DetailsRowNoStyles mount 3571 3602 5000
Dialog mount 1561 1558 1000
DocumentCardTitle mount 1903 1915 1000
Dropdown mount 2702 2716 5000
FocusZone mount 1939 1911 5000
IconButton mount 1777 1786 5000
Label mount 353 352 5000
Link mount 460 476 5000
LinkNext mount 516 496 5000
MenuButton mount 1518 1494 5000
Nav mount 3366 3308 1000
Panel mount 1521 1499 1000
Persona mount 891 865 1000
Pivot mount 1485 1494 1000
PivotNext mount 1426 1462 1000
PrimaryButton mount 1305 1325 5000
SearchBox mount 1332 1314 5000
SearchBoxNext mount 1314 1376 5000
Slider mount 1578 1577 5000
SliderNext mount 2002 1980 5000
SpinButton mount 5111 5072 5000
SpinButtonNext mount 5289 5303 5000
Spinner mount 447 430 5000
SplitButton mount 3293 3233 5000
Stack mount 538 519 5000
StackWithIntrinsicChildren mount 2150 2111 5000
StackWithTextChildren mount 5298 5217 5000
TagPicker mount 2867 2881 5000
Text mount 438 443 5000
TextField mount 1454 1415 5000
ThemeProvider mount 3133 3144 5000
ThemeProvider virtual-rerender 479 459 5000
Toggle mount 881 881 5000
ToggleNext mount 888 893 5000
button mount 129 119 5000

Perf Analysis (Fluent)

⚠️ 2 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 132 46 2.87:1 analysis
ButtonUseCssNestingPerf.default 65 45 1.44:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.5 0.9:1 2000 897
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 547
🔧 Checkbox.Fluent 0.67 0.36 1.86:1 1000 665
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 800
🔧 Dropdown.Fluent 3.07 0.48 6.4:1 1000 3065
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 703
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 365
🔧 Slider.Fluent 1.7 0.36 4.72:1 1000 1703
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 341
🦄 Tooltip.Fluent 0.11 20.27 0.01:1 5000 550

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonUseCssPerf.default 63 47 1.34:1
AttachmentMinimalPerf.default 171 148 1.16:1
PortalMinimalPerf.default 143 123 1.16:1
ButtonMinimalPerf.default 203 176 1.15:1
TreeWith60ListItems.default 250 224 1.12:1
TextMinimalPerf.default 360 327 1.1:1
ImageMinimalPerf.default 374 347 1.08:1
ListMinimalPerf.default 495 461 1.07:1
ButtonSlotsPerf.default 637 602 1.06:1
DividerMinimalPerf.default 357 338 1.06:1
RefMinimalPerf.default 231 217 1.06:1
TreeMinimalPerf.default 907 859 1.06:1
VideoMinimalPerf.default 617 583 1.06:1
AlertMinimalPerf.default 312 297 1.05:1
ReactionMinimalPerf.default 401 383 1.05:1
SliderMinimalPerf.default 1757 1676 1.05:1
Tooltip.Fluent 550 524 1.05:1
AttachmentSlotsPerf.default 1209 1162 1.04:1
LayoutMinimalPerf.default 408 391 1.04:1
MenuButtonMinimalPerf.default 1643 1581 1.04:1
TableMinimalPerf.default 416 399 1.04:1
Image.Fluent 365 351 1.04:1
Text.Fluent 341 327 1.04:1
AnimationMinimalPerf.default 409 396 1.03:1
AvatarMinimalPerf.default 485 473 1.03:1
CarouselMinimalPerf.default 492 478 1.03:1
DialogMinimalPerf.default 798 773 1.03:1
DropdownManyItemsPerf.default 808 788 1.03:1
HeaderMinimalPerf.default 373 362 1.03:1
HeaderSlotsPerf.default 809 783 1.03:1
ListWith60ListItems.default 1147 1111 1.03:1
MenuMinimalPerf.default 887 861 1.03:1
PopupMinimalPerf.default 705 683 1.03:1
SegmentMinimalPerf.default 340 331 1.03:1
ToolbarMinimalPerf.default 982 949 1.03:1
TooltipMinimalPerf.default 816 792 1.03:1
BoxMinimalPerf.default 355 349 1.02:1
ChatDuplicateMessagesPerf.default 451 442 1.02:1
ListCommonPerf.default 998 982 1.02:1
ListNestedPerf.default 898 884 1.02:1
ProviderMinimalPerf.default 1020 998 1.02:1
CustomToolbarPrototype.default 4038 3974 1.02:1
Checkbox.Fluent 665 654 1.02:1
Icon.Fluent 703 690 1.02:1
EmbedMinimalPerf.default 1974 1962 1.01:1
FlexMinimalPerf.default 286 284 1.01:1
ProviderMergeThemesPerf.default 2034 2016 1.01:1
SplitButtonMinimalPerf.default 3897 3857 1.01:1
Button.Fluent 547 543 1.01:1
Dialog.Fluent 800 795 1.01:1
DropdownMinimalPerf.default 3085 3084 1:1
InputMinimalPerf.default 1361 1355 1:1
ItemLayoutMinimalPerf.default 1299 1294 1:1
LabelMinimalPerf.default 405 407 1:1
SkeletonMinimalPerf.default 400 399 1:1
TableManyItemsPerf.default 2244 2254 1:1
Avatar.Fluent 897 898 1:1
Dropdown.Fluent 3065 3067 1:1
ChatMinimalPerf.default 604 610 0.99:1
CheckboxMinimalPerf.default 2932 2973 0.99:1
FormMinimalPerf.default 392 395 0.99:1
GridMinimalPerf.default 335 340 0.99:1
RadioGroupMinimalPerf.default 414 417 0.99:1
StatusMinimalPerf.default 682 687 0.99:1
IconMinimalPerf.default 679 685 0.99:1
TextAreaMinimalPerf.default 469 474 0.99:1
Slider.Fluent 1703 1712 0.99:1
AccordionMinimalPerf.default 158 161 0.98:1
CardMinimalPerf.default 541 550 0.98:1
ChatWithPopoverPerf.default 507 520 0.98:1
LoaderMinimalPerf.default 765 789 0.97:1

@size-auditor
Copy link

size-auditor bot commented Aug 14, 2020

Asset size changes

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

Baseline commit: 07e38ab3f989e8ea69cab0c880950c8027204eec (build)

yarn.lock Outdated
@@ -116,6 +116,28 @@
invariant "^2.2.4"
semver "^5.5.0"

"@babel/[email protected]":
Copy link
Contributor

Choose a reason for hiding this comment

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

Are all of these yarn.lock changes intended? Or do you need to update dependency versions in package.json?

@dzearing dzearing merged commit b483aa1 into microsoft:master Aug 17, 2020
@dzearing dzearing deleted the feat/avatar branch August 17, 2020 02:50
@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

levithomason pushed a commit to levithomason/fluentui that referenced this pull request Aug 24, 2020
* Adding react-avatar.

* Adding Avatar.

* Updating Avatar to use raw sass.

* blah.

* more updates.

* Changes.

* Shorthand props now work

* more updates.

* Adding PersonaCoin example.

* Cleanup.

* Updating url.

* changes

* more changes.

* Adding button. Renaming handledProp to mappedProp.

* Addressing missing font definitions. Adding stylesheet support to themeprovider.

* Addressing review feedback.

* Merge branch 'master' of https://github.com/microsoft/fluentui into feat/avatar

# Conflicts:
#	apps/test-bundles/package.json
#	packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
#	yarn.lock

* Undoing changes.

* undoing a few more changes.

* Updating react-compose dependency

* Fixing broken things.

* wip

* Update packages/react-compose/src/utils.ts

* converted all components to use react-compose

* wip

* Integrating useStylesheet.

* Removing dupe stylesheets provider.

* Merge branch 'master' of https://github.com/microsoft/fluentui into feat/avatar

# Conflicts:
#	.vscode/settings.json
#	packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts
#	packages/react-compose/etc/react-compose.api.md
#	packages/react-compose/package.json
#	packages/react-compose/src/compose.ts
#	packages/react-compose/src/types.ts
#	packages/react-compose/src/utils.ts
#	scripts/package.json
#	yarn.lock

* updated readme

* Change files

* removing private

* Change files

* fixing lint.

* Ensuring tests work.

* Awesome.

* updates.

* yarn updates.

Co-authored-by: Marija Najdova <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants