Skip to content

Conversation

@marcosmoura
Copy link
Contributor

This PR only creates a blank @fluentui/react-motion-preview package.
More updates will be present in separate PRs

@marcosmoura marcosmoura changed the title feat: create react-motion-preview package scaffolding feat(react-motion): create react-motion-preview package scaffolding Aug 22, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 22, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
priority-overflow
createOverflowManager
4.162 kB
1.735 kB
react-accordion
Accordion (including children components)
88.592 kB
26.885 kB
react-alert
Alert
81.836 kB
22.031 kB
react-avatar
Avatar
47.01 kB
14.502 kB
react-avatar
AvatarGroup
16.116 kB
6.431 kB
react-avatar
AvatarGroupItem
61.789 kB
18.912 kB
react-badge
Badge
23.183 kB
7.254 kB
react-badge
CounterBadge
24.084 kB
7.553 kB
react-badge
PresenceBadge
22.14 kB
7.867 kB
react-button
Button
37.078 kB
9.751 kB
react-button
CompoundButton
44.427 kB
11.234 kB
react-button
MenuButton
41.464 kB
11.001 kB
react-button
SplitButton
49.499 kB
12.555 kB
react-button
ToggleButton
54.124 kB
11.65 kB
react-card
Card - All
88.335 kB
25.271 kB
react-card
Card
83.177 kB
23.742 kB
react-card
CardFooter
9.338 kB
3.932 kB
react-card
CardHeader
11.59 kB
4.716 kB
react-card
CardPreview
10.297 kB
4.317 kB
react-checkbox
Checkbox
32.872 kB
10.652 kB
react-combobox
Combobox (including child components)
87.101 kB
28.273 kB
react-combobox
Dropdown (including child components)
85.461 kB
27.912 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.614 kB
18.512 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.471 kB
57.83 kB
react-components
react-components: FluentProvider & webLightTheme
37.787 kB
12.387 kB
react-datepicker-compat
DatePicker Compat
207.157 kB
57.399 kB
react-dialog
Dialog (including children components)
86.738 kB
26.341 kB
react-divider
Divider
17.098 kB
6.303 kB
react-field
Field
18.295 kB
6.978 kB
react-image
Image
12.029 kB
4.783 kB
react-infobutton
InfoButton
125.301 kB
39.269 kB
react-infobutton
InfoLabel
128.971 kB
40.446 kB
react-input
Input
23.237 kB
7.688 kB
react-label
Label
10.423 kB
4.31 kB
react-link
Link
13.254 kB
5.397 kB
react-menu
Menu (including children components)
135.523 kB
41.576 kB
react-menu
Menu (including selectable components)
138.209 kB
42.078 kB
react-overflow
hooks only
12.419 kB
4.687 kB
react-persona
Persona
53.905 kB
16.371 kB
react-popover
Popover
114.603 kB
35.934 kB
react-portal
Portal
12.255 kB
4.504 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-positioning
usePositioning
25.137 kB
9.109 kB
react-progress
ProgressBar
13.718 kB
5.476 kB
react-provider
FluentProvider
18.332 kB
6.817 kB
react-radio
Radio
26.617 kB
8.601 kB
react-radio
RadioGroup
11.622 kB
4.833 kB
react-select
Select
24.599 kB
8.651 kB
react-slider
Slider
34.134 kB
11.039 kB
react-spinbutton
SpinButton
32.681 kB
10.209 kB
react-spinner
Spinner
19.577 kB
7.008 kB
react-switch
Switch
29.092 kB
9.217 kB
react-table
DataGrid
152.77 kB
42.242 kB
react-table
Table (Primitives only)
39.638 kB
12.129 kB
react-table
Table as DataGrid
126.224 kB
33.612 kB
react-table
Table (Selection only)
71.594 kB
18.91 kB
react-table
Table (Sort only)
70.213 kB
18.511 kB
react-tags-preview
InteractionTag
11.031 kB
4.528 kB
react-tags-preview
Tag
25.398 kB
8.396 kB
react-tags-preview
TagGroup
69.607 kB
20.482 kB
react-text
Text - Default
13.043 kB
5.129 kB
react-text
Text - Wrappers
16.215 kB
5.447 kB
react-textarea
Textarea
27.302 kB
9.047 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.611 kB
7.295 kB
react-theme
Teams: Light theme
19.282 kB
5.486 kB
react-toast
Toast (including Toaster)
87.69 kB
26.037 kB
react-tooltip
Tooltip
47.942 kB
16.845 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against bf1049c8e38e7b11f6f042fdccf0f16746b4b6b7

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 22, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 72 73 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 617 637 5000
Button mount 326 321 5000
Field mount 1073 1083 5000
FluentProvider mount 702 683 5000
FluentProviderWithTheme mount 84 86 10
FluentProviderWithTheme virtual-rerender 69 65 10
FluentProviderWithTheme virtual-rerender-with-unmount 72 73 10 Possible regression
InfoButton mount 8 12 5000
MakeStyles mount 852 872 50000
Persona mount 1747 1692 5000
SpinButton mount 1321 1351 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 22, 2023

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 6a27ef0:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 22, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 22, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 95 86 1.1:1
AlertMinimalPerf.default 161 148 1.09:1
AvatarMinimalPerf.default 111 103 1.08:1
LoaderMinimalPerf.default 195 182 1.07:1
TextMinimalPerf.default 196 185 1.06:1
RadioGroupMinimalPerf.default 270 258 1.05:1
AccordionMinimalPerf.default 82 79 1.04:1
ChatMinimalPerf.default 443 428 1.04:1
FlexMinimalPerf.default 165 159 1.04:1
RosterPerf.default 1589 1522 1.04:1
RefMinimalPerf.default 112 108 1.04:1
GridMinimalPerf.default 194 189 1.03:1
HeaderMinimalPerf.default 212 205 1.03:1
ListNestedPerf.default 332 323 1.03:1
ReactionMinimalPerf.default 221 215 1.03:1
SplitButtonMinimalPerf.default 2302 2244 1.03:1
IconMinimalPerf.default 385 375 1.03:1
TableMinimalPerf.default 230 223 1.03:1
VideoMinimalPerf.default 438 426 1.03:1
AttachmentSlotsPerf.default 644 630 1.02:1
CarouselMinimalPerf.default 263 259 1.02:1
EmbedMinimalPerf.default 1913 1870 1.02:1
LabelMinimalPerf.default 219 215 1.02:1
ProviderMergeThemesPerf.default 669 659 1.02:1
BoxMinimalPerf.default 189 187 1.01:1
ButtonOverridesMissPerf.default 647 638 1.01:1
DatepickerMinimalPerf.default 3713 3663 1.01:1
MenuButtonMinimalPerf.default 955 942 1.01:1
TableManyItemsPerf.default 1128 1118 1.01:1
TextAreaMinimalPerf.default 285 281 1.01:1
CustomToolbarPrototype.default 1507 1489 1.01:1
TooltipMinimalPerf.default 1280 1270 1.01:1
AnimationMinimalPerf.default 302 301 1:1
DialogMinimalPerf.default 445 446 1:1
DropdownManyItemsPerf.default 391 391 1:1
DropdownMinimalPerf.default 1442 1442 1:1
ItemLayoutMinimalPerf.default 706 703 1:1
MenuMinimalPerf.default 496 498 1:1
ToolbarMinimalPerf.default 526 525 1:1
CardMinimalPerf.default 301 304 0.99:1
CheckboxMinimalPerf.default 1111 1125 0.99:1
ListMinimalPerf.default 303 306 0.99:1
ListWith60ListItems.default 360 362 0.99:1
PopupMinimalPerf.default 349 353 0.99:1
ProviderMinimalPerf.default 206 209 0.99:1
SegmentMinimalPerf.default 201 204 0.99:1
TreeMinimalPerf.default 479 482 0.99:1
TreeWith60ListItems.default 86 87 0.99:1
ButtonSlotsPerf.default 312 320 0.98:1
ChatDuplicateMessagesPerf.default 149 152 0.98:1
HeaderSlotsPerf.default 457 467 0.98:1
LayoutMinimalPerf.default 195 200 0.98:1
PortalMinimalPerf.default 83 85 0.98:1
SliderMinimalPerf.default 737 752 0.98:1
FormMinimalPerf.default 222 229 0.97:1
ImageMinimalPerf.default 214 221 0.97:1
SkeletonMinimalPerf.default 193 198 0.97:1
AttachmentMinimalPerf.default 77 80 0.96:1
InputMinimalPerf.default 541 562 0.96:1
DividerMinimalPerf.default 201 211 0.95:1
ChatWithPopoverPerf.default 191 203 0.94:1
ListCommonPerf.default 383 407 0.94:1
StatusMinimalPerf.default 377 414 0.91:1

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 22, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 22, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 22, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 608 627 5000
Breadcrumb mount 1643 1665 1000
Checkbox mount 1656 1741 5000
CheckboxBase mount 1484 1492 5000
ChoiceGroup mount 2933 2979 5000
ComboBox mount 653 651 1000
CommandBar mount 6145 6250 1000
ContextualMenu mount 11916 11995 1000
DefaultButton mount 737 722 5000
DetailsRow mount 2199 2116 5000
DetailsRowFast mount 2140 2144 5000
DetailsRowNoStyles mount 2032 2009 5000
Dialog mount 2625 2770 1000
DocumentCardTitle mount 220 244 1000
Dropdown mount 1958 1986 5000
FocusTrapZone mount 1084 1122 5000
FocusZone mount 1067 1032 5000
GroupedList mount 41543 41368 2
GroupedList virtual-rerender 19709 19726 2
GroupedList virtual-rerender-with-unmount 49827 50379 2
GroupedListV2 mount 215 225 2
GroupedListV2 virtual-rerender 194 196 2
GroupedListV2 virtual-rerender-with-unmount 222 219 2
IconButton mount 1034 1081 5000
Label mount 334 322 5000
Layer mount 2666 2697 5000
Link mount 388 390 5000
MenuButton mount 925 908 5000
MessageBar mount 21266 21200 5000
Nav mount 1929 1935 1000
OverflowSet mount 780 787 5000
Panel mount 1772 1775 1000
Persona mount 743 747 1000
Pivot mount 870 883 1000
PrimaryButton mount 860 829 5000
Rating mount 4588 4666 5000
SearchBox mount 912 890 5000
Shimmer mount 1923 1877 5000
Slider mount 1298 1310 5000
SpinButton mount 2862 2853 5000
Spinner mount 376 384 5000
SplitButton mount 1870 1826 5000
Stack mount 405 413 5000
StackWithIntrinsicChildren mount 869 852 5000
StackWithTextChildren mount 2604 2600 5000
SwatchColorPicker mount 6167 6159 5000
TagPicker mount 1429 1417 5000
Text mount 378 368 5000
TextField mount 914 924 5000
ThemeProvider mount 826 840 5000
ThemeProvider virtual-rerender 584 590 5000
ThemeProvider virtual-rerender-with-unmount 1287 1290 5000
Toggle mount 608 610 5000
buttonNative mount 185 186 5000

@size-auditor
Copy link

size-auditor bot commented Aug 22, 2023

Asset size changes

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

Baseline commit: bf1049c8e38e7b11f6f042fdccf0f16746b4b6b7 (build)

@marcosmoura marcosmoura enabled auto-merge (squash) August 22, 2023 15:26
@marcosmoura marcosmoura self-assigned this Aug 22, 2023
@marcosmoura marcosmoura merged commit 5079ade into microsoft:master Aug 22, 2023
@marcosmoura marcosmoura deleted the feat/create-react-motion-package-scaffolding branch August 22, 2023 16:39
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 22, 2023
* master:
  Accordion : updated styles for accordion header cursor (microsoft#28850)
  Additional VR tests Charting Library (microsoft#28777)
  feat(react-motion): create react-motion-preview package scaffolding (microsoft#28947)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 23, 2023
* master: (27 commits)
  feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape (microsoft#28951)
  RFC: Component CSS Transitions/Animations on mount/unmount (microsoft#27328)
  8.0 Azure Theme: Details list row focus contrast a11y bug fix  (microsoft#28966)
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  applying package updates
  bugfix: ensure interop between assertSlots and old API (microsoft#28957)
  chore: rename imports from react-tree to react-components (microsoft#28946)
  applying package updates
  fix: Autofill queries the inputElement ownerDocument instead of document (microsoft#27312)
  Accordion : updated styles for accordion header cursor (microsoft#28850)
  Additional VR tests Charting Library (microsoft#28777)
  feat(react-motion): create react-motion-preview package scaffolding (microsoft#28947)
  chore: updates generator to use new slot API (microsoft#28916)
  chore: bumps version of esbuild-loader to v3.2.0 (microsoft#28878)
  ...
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.

3 participants