Skip to content

chore(react-persona): Create package react-persona and Persona component#24214

Merged
sopranopillow merged 1 commit intomicrosoft:masterfrom
sopranopillow:persona-scaffold
Aug 3, 2022
Merged

chore(react-persona): Create package react-persona and Persona component#24214
sopranopillow merged 1 commit intomicrosoft:masterfrom
sopranopillow:persona-scaffold

Conversation

@sopranopillow
Copy link
Contributor

This PR creates the react-persona package and Persona component. This is just an initial PR to get all the templates needed.

Related

#24213

@@ -0,0 +1,4 @@
import * as React from 'react';
import { Persona, PersonaProps } from '@fluentui/react-persona';
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
import { Persona, PersonaProps } from '@fluentui/react-persona';
import { Persona } from '@fluentui/react-persona';
import type { PersonaProps } from '@fluentui/react-persona';

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry I just saw the comment, I'll update it in a follow-up PR

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 3, 2022

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

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

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1288 1267 5000
Button mount 938 933 5000
FluentProvider mount 1463 1463 5000
FluentProviderWithTheme mount 562 582 10
FluentProviderWithTheme virtual-rerender 536 545 10
FluentProviderWithTheme virtual-rerender-with-unmount 566 580 10
MakeStyles mount 1979 1960 50000
SpinButton mount 2413 2412 5000

@size-auditor
Copy link

size-auditor bot commented Aug 3, 2022

Asset size changes

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

Baseline commit: f1bb447bb76b4bbc15cb9c377f7543cd06f83887 (build)

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
554 B
348 B
priority-overflow
createOverflowManager
2.936 kB
1.212 kB
react-accordion
Accordion (including children components)
79.485 kB
24.082 kB
react-alert
Alert
82.803 kB
20.582 kB
react-avatar
Avatar
48.533 kB
13.78 kB
react-avatar
AvatarGroup
139.268 kB
41.173 kB
react-avatar
AvatarGroupItem
68.248 kB
19.109 kB
react-badge
Badge
22.494 kB
7.157 kB
react-badge
CounterBadge
23.397 kB
7.449 kB
react-badge
PresenceBadge
23.947 kB
7.022 kB
react-button
Button
36.396 kB
9.575 kB
react-button
CompoundButton
43.469 kB
10.812 kB
react-button
MenuButton
39.014 kB
10.456 kB
react-button
SplitButton
46.506 kB
11.827 kB
react-button
ToggleButton
51.912 kB
11.004 kB
react-card
Card - All
67.42 kB
19.249 kB
react-card
Card
63.102 kB
18.167 kB
react-card
CardFooter
8.461 kB
3.555 kB
react-card
CardHeader
9.504 kB
3.896 kB
react-card
CardPreview
8.562 kB
3.61 kB
react-combobox
Combobox (including child components)
75.081 kB
24.145 kB
react-combobox
Dropdown (including child components)
74.594 kB
24.134 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
192.699 kB
52.786 kB
react-components
react-components: FluentProvider & webLightTheme
32.688 kB
10.736 kB
react-dialog
Dialog (including children components)
85.049 kB
25.293 kB
react-divider
Divider
16.321 kB
5.837 kB
react-image
Image
10.68 kB
4.215 kB
react-input
Input
23.554 kB
7.644 kB
react-label
Label
9.238 kB
3.815 kB
react-link
Link
12.197 kB
4.912 kB
react-menu
Menu (including children components)
118.866 kB
36.006 kB
react-menu
Menu (including selectable components)
122.065 kB
36.499 kB
react-overflow
hooks only
10.839 kB
4.146 kB
react-popover
Popover
106.133 kB
32.244 kB
react-portal
Portal
10.49 kB
3.845 kB
react-positioning
usePositioning
23.854 kB
8.299 kB
react-provider
FluentProvider
15.565 kB
5.818 kB
react-radio
Radio
36.329 kB
12.024 kB
react-radio
RadioGroup
14.319 kB
5.711 kB
react-select
Select
20.746 kB
7.299 kB
react-slider
Slider
31.988 kB
10.019 kB
react-spinbutton
SpinButton
44.227 kB
12.492 kB
react-spinner
Spinner
19.932 kB
6.363 kB
react-switch
Switch
32.781 kB
10.348 kB
react-text
Text - Default
11.572 kB
4.537 kB
react-text
Text - Wrappers
14.882 kB
4.977 kB
react-textarea
Textarea
23.078 kB
7.707 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
28.995 kB
6.215 kB
react-theme
Teams: Light theme
16.973 kB
4.86 kB
react-tooltip
Tooltip
45.509 kB
15.537 kB
react-utilities
SSRProvider
189 B
161 B
🤖 This report was generated against f1bb447bb76b4bbc15cb9c377f7543cd06f83887

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 172 164 1.05:1
HeaderMinimalPerf.default 330 315 1.05:1
ReactionMinimalPerf.default 337 321 1.05:1
AttachmentSlotsPerf.default 880 847 1.04:1
ChatWithPopoverPerf.default 317 306 1.04:1
SegmentMinimalPerf.default 314 303 1.04:1
TextMinimalPerf.default 309 297 1.04:1
TreeWith60ListItems.default 140 135 1.04:1
DropdownManyItemsPerf.default 565 551 1.03:1
ImageMinimalPerf.default 336 326 1.03:1
ProviderMinimalPerf.default 322 314 1.03:1
RadioGroupMinimalPerf.default 412 399 1.03:1
TextAreaMinimalPerf.default 433 420 1.03:1
AccordionMinimalPerf.default 133 130 1.02:1
AlertMinimalPerf.default 230 225 1.02:1
CarouselMinimalPerf.default 375 367 1.02:1
LayoutMinimalPerf.default 325 318 1.02:1
RefMinimalPerf.default 207 203 1.02:1
VideoMinimalPerf.default 586 575 1.02:1
BoxMinimalPerf.default 304 300 1.01:1
ButtonMinimalPerf.default 139 137 1.01:1
ChatDuplicateMessagesPerf.default 234 231 1.01:1
DialogMinimalPerf.default 694 686 1.01:1
DropdownMinimalPerf.default 2607 2576 1.01:1
EmbedMinimalPerf.default 3001 2982 1.01:1
ItemLayoutMinimalPerf.default 990 985 1.01:1
LabelMinimalPerf.default 342 338 1.01:1
LoaderMinimalPerf.default 536 529 1.01:1
MenuMinimalPerf.default 749 741 1.01:1
RosterPerf.default 845 839 1.01:1
PopupMinimalPerf.default 562 555 1.01:1
IconMinimalPerf.default 543 536 1.01:1
ToolbarMinimalPerf.default 829 819 1.01:1
AttachmentMinimalPerf.default 131 131 1:1
ButtonOverridesMissPerf.default 1183 1179 1:1
ChatMinimalPerf.default 648 646 1:1
CheckboxMinimalPerf.default 1939 1948 1:1
FlexMinimalPerf.default 253 252 1:1
ListMinimalPerf.default 464 465 1:1
ListWith60ListItems.default 498 500 1:1
MenuButtonMinimalPerf.default 1366 1365 1:1
PortalMinimalPerf.default 145 145 1:1
ProviderMergeThemesPerf.default 984 983 1:1
SliderMinimalPerf.default 1328 1328 1:1
SplitButtonMinimalPerf.default 3350 3346 1:1
StatusMinimalPerf.default 612 611 1:1
TableManyItemsPerf.default 1634 1632 1:1
TableMinimalPerf.default 363 363 1:1
CustomToolbarPrototype.default 2201 2193 1:1
AnimationMinimalPerf.default 483 487 0.99:1
CardMinimalPerf.default 492 497 0.99:1
DatepickerMinimalPerf.default 4721 4746 0.99:1
DividerMinimalPerf.default 318 320 0.99:1
FormMinimalPerf.default 355 357 0.99:1
GridMinimalPerf.default 290 293 0.99:1
InputMinimalPerf.default 980 993 0.99:1
TooltipMinimalPerf.default 974 980 0.99:1
ButtonSlotsPerf.default 420 430 0.98:1
HeaderSlotsPerf.default 674 690 0.98:1
ListNestedPerf.default 467 475 0.98:1
SkeletonMinimalPerf.default 297 304 0.98:1
TreeMinimalPerf.default 703 716 0.98:1
ListCommonPerf.default 523 544 0.96:1

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 804 806 5000
Breadcrumb mount 2281 2278 1000
Checkbox mount 2249 2248 5000
CheckboxBase mount 1963 1944 5000
ChoiceGroup mount 3901 3980 5000
ComboBox mount 764 780 1000
CommandBar mount 8864 8847 1000
ContextualMenu mount 9237 9217 1000
DefaultButton mount 976 961 5000
DetailsRow mount 3023 3035 5000
DetailsRowFast mount 3054 3040 5000
DetailsRowNoStyles mount 2909 2907 5000
Dialog mount 2269 2287 1000
DocumentCardTitle mount 141 136 1000
Dropdown mount 2759 2792 5000
FocusTrapZone mount 1556 1579 5000
FocusZone mount 1537 1530 5000
IconButton mount 1396 1426 5000
Label mount 326 306 5000
Layer mount 2680 2699 5000
Link mount 431 435 5000
MenuButton mount 1194 1221 5000
MessageBar mount 1880 1823 5000
Nav mount 2673 2669 1000
OverflowSet mount 964 977 5000
Panel mount 1822 1817 1000
Persona mount 836 836 1000
Pivot mount 1143 1145 1000
PrimaryButton mount 1088 1090 5000
Rating mount 6678 6709 5000
SearchBox mount 1113 1126 5000
Shimmer mount 2213 2246 5000
Slider mount 1683 1667 5000
SpinButton mount 4195 4242 5000
Spinner mount 414 399 5000
SplitButton mount 2505 2533 5000
Stack mount 488 483 5000
StackWithIntrinsicChildren mount 1901 1883 5000
StackWithTextChildren mount 4669 4637 5000
SwatchColorPicker mount 9022 9040 5000
TagPicker mount 2069 2012 5000
TeachingBubble mount 70305 70784 5000
Text mount 388 397 5000
TextField mount 1132 1147 5000
ThemeProvider mount 960 975 5000
ThemeProvider virtual-rerender 628 639 5000
ThemeProvider virtual-rerender-with-unmount 1388 1387 5000
Toggle mount 711 721 5000
buttonNative mount 91 100 5000

@sopranopillow sopranopillow merged commit a087499 into microsoft:master Aug 3, 2022
@sopranopillow sopranopillow deleted the persona-scaffold branch August 3, 2022 22:08
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.

4 participants