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

chore(motion): add bundle size fixtures #31730

Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jun 17, 2024

New Behavior

Adds new bundle size fixtures for @fluentui/react-motion.

@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 17, 2024
@layershifter layershifter marked this pull request as ready for review June 17, 2024 13:36
@layershifter layershifter requested a review from a team as a code owner June 17, 2024 13:36
@layershifter layershifter force-pushed the chore/motion-bundle-size branch from eb05637 to 72bc3fc Compare June 17, 2024 13:41
@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 623 656 5000
Button mount 316 312 5000
Field mount 1124 1148 5000
FluentProvider mount 727 693 5000
FluentProviderWithTheme mount 95 93 10
FluentProviderWithTheme virtual-rerender 40 33 10
FluentProviderWithTheme virtual-rerender-with-unmount 88 81 10
MakeStyles mount 880 862 50000
Persona mount 1740 1748 5000
SpinButton mount 1415 1420 5000
SwatchPicker mount 1597 1671 5000

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-motion
@fluentui/react-motion - createMotionComponent()
0 B
0 B
4.1 kB
1.828 kB
🆕 New entry
react-motion
@fluentui/react-motion - createPresenceComponent()
0 B
0 B
4.767 kB
2.112 kB
🆕 New entry
react-motion
@fluentui/react-motion - PresenceGroup
0 B
0 B
1.714 kB
819 B
🆕 New entry
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
211.741 kB
60.957 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-components
react-components: entire library
1.093 MB
270.378 kB
react-dialog
Dialog (including children components)
98.908 kB
29.807 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
103.427 kB
34.598 kB
react-toast
Toast (including Toaster)
97.525 kB
29.326 kB
🤖 This report was generated against 13d0fd830955e529ac2e1f912fb829c8fd89ae7d

@layershifter layershifter merged commit 27ac4a0 into microsoft:master Jun 17, 2024
17 of 19 checks passed
@layershifter layershifter deleted the chore/motion-bundle-size branch June 17, 2024 14:08
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

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

🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots

Avatar Converged 3 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.badgeMask - RTL.normal.chromium.png 3 Changed
Avatar Converged.customSize+image.normal.chromium.png 0 Added
Avatar Converged.size+inactive+badge.normal.chromium.png 0 Added
Card Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged.appearance - Dark Mode.normal.chromium.png 0 Added
Card Converged - Interactive 6 screenshots
Image Name Diff(in Pixels) Image Type
Card Converged - Interactive.appearance interactive - Outline - High Contrast.click.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Outline - High Contrast.hover.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Outline - High Contrast.normal.chromium.png 0 Added
Card Converged - Interactive.appearance interactive - Outline - Dark Mode.click.chromium.png 0 Removed
Card Converged - Interactive.appearance interactive - Outline - Dark Mode.hover.chromium.png 0 Removed
Card Converged - Interactive.appearance interactive - Outline - Dark Mode.normal.chromium.png 0 Removed

EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Jun 17, 2024
EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 14, 2024
chore(motion): add bundle size fixtures (microsoft#31730)

fix(react-calendar-compat): fixed focus indicator cut off (microsoft#31596)

feat: use custom states for button and anchor button variants (microsoft#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (microsoft#31721)

fix:react-nav-preview: High contrast issues (microsoft#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token
EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 14, 2024
chore(motion): add bundle size fixtures (microsoft#31730)

fix(react-calendar-compat): fixed focus indicator cut off (microsoft#31596)

feat: use custom states for button and anchor button variants (microsoft#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (microsoft#31721)

fix:react-nav-preview: High contrast issues (microsoft#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token
EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 16, 2024
EdDaWord added a commit that referenced this pull request Aug 19, 2024
Change most tokens in useButtonStyles file

Give all the react-components a try

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

feat: update badge to use custom states (#31733)

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test
EdDaWord added a commit that referenced this pull request Aug 19, 2024
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake
EdDaWord added a commit that referenced this pull request Aug 19, 2024
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake

Fix Random YML File
EdDaWord added a commit that referenced this pull request Aug 20, 2024
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake

Fix Random YML File

Fix rebase mistake
EdDaWord added a commit that referenced this pull request Aug 23, 2024
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake

Fix Random YML File

Fix rebase mistake

Fix mistake on number of quotes

Fix any possible merge conflicts
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