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.

Sign up for GitHub

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

Jump to bottom

[do not merge] Rebase web-components-v3 branch #31254

Merged
merged 0 commits into from
May 6, 2024
Merged

[do not merge] Rebase web-components-v3 branch #31254

merged 0 commits into from
May 6, 2024

Conversation

radium-v
Copy link
Contributor

@radium-v radium-v commented May 2, 2024

Previous Behavior

The web-components-v3 branch is out of sync with the master branch.

New Behavior

This draft PR helps ensure that the rebase can go smoothly.

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented May 2, 2024 •
edited

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.

@radium-v radium-v force-pushed the users/radium-v/web-components-v3-rebase branch from 6be099f to b32ea06 Compare May 2, 2024 03:19
@radium-v radium-v changed the title Rebase web-components-v3 branch [do not merge] Rebase web-components-v3 branch May 2, 2024
@radium-v radium-v changed the base branch from web-components-v3 to master May 2, 2024 03:23
github-advanced-security[bot]
github-advanced-security bot found potential problems May 2, 2024
View reviewed changes
packages/web-components/scripts/run-benchmarks.js Outdated
for (const file of benchFiles) {
try {
// eslint-disable-next-line no-undef
execSync(`tensile --file ./${file} --config ${tensileConfig} ${process.argv[2]}`, { stdio: 'inherit' });

Check warning

Code scanning / CodeQL

Shell command built from environment values

This shell command depends on an uncontrolled [absolute path](1).
@fabricteam
Copy link
Collaborator

fabricteam commented May 2, 2024 •
edited

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 80 85 10 Possible regression
FluentProviderWithTheme virtual-rerender 35 35 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 68 83 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 647 632 5000
Button mount 318 312 5000
Field mount 1175 1126 5000
FluentProvider mount 697 719 5000
FluentProviderWithTheme mount 80 85 10 Possible regression
FluentProviderWithTheme virtual-rerender 35 35 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 68 83 10 Possible regression
MakeStyles mount 872 875 50000
Persona mount 1755 1743 5000
SpinButton mount 1351 1388 5000
SwatchPicker mount 1554 1524 5000

@fabricteam
Copy link
Collaborator

fabricteam commented May 2, 2024 •
edited

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 162 140 1.16:1
ChatWithPopoverPerf.default 205 179 1.15:1
TreeWith60ListItems.default 94 85 1.11:1
HeaderMinimalPerf.default 217 198 1.1:1
ListWith60ListItems.default 385 354 1.09:1
TextMinimalPerf.default 203 187 1.09:1
ProviderMinimalPerf.default 219 202 1.08:1
AttachmentMinimalPerf.default 87 81 1.07:1
RefMinimalPerf.default 118 110 1.07:1
BoxMinimalPerf.default 196 185 1.06:1
SkeletonMinimalPerf.default 207 195 1.06:1
AttachmentSlotsPerf.default 666 634 1.05:1
ListMinimalPerf.default 315 300 1.05:1
IconMinimalPerf.default 401 383 1.05:1
ButtonOverridesMissPerf.default 646 623 1.04:1
CardMinimalPerf.default 315 304 1.04:1
DropdownManyItemsPerf.default 396 382 1.04:1
GridMinimalPerf.default 191 184 1.04:1
AccordionMinimalPerf.default 80 78 1.03:1
AvatarMinimalPerf.default 114 111 1.03:1
CarouselMinimalPerf.default 265 258 1.03:1
ChatMinimalPerf.default 455 443 1.03:1
LayoutMinimalPerf.default 201 196 1.03:1
ListCommonPerf.default 393 381 1.03:1
ReactionMinimalPerf.default 215 208 1.03:1
TreeMinimalPerf.default 492 476 1.03:1
ButtonMinimalPerf.default 95 93 1.02:1
CheckboxMinimalPerf.default 1157 1130 1.02:1
DialogMinimalPerf.default 439 431 1.02:1
DividerMinimalPerf.default 203 199 1.02:1
EmbedMinimalPerf.default 1875 1840 1.02:1
HeaderSlotsPerf.default 472 464 1.02:1
ItemLayoutMinimalPerf.default 702 690 1.02:1
MenuMinimalPerf.default 499 488 1.02:1
PopupMinimalPerf.default 352 344 1.02:1
PortalMinimalPerf.default 90 88 1.02:1
ProviderMergeThemesPerf.default 658 645 1.02:1
StatusMinimalPerf.default 386 379 1.02:1
ToolbarMinimalPerf.default 545 534 1.02:1
TooltipMinimalPerf.default 1290 1261 1.02:1
RadioGroupMinimalPerf.default 268 265 1.01:1
SegmentMinimalPerf.default 191 189 1.01:1
TableManyItemsPerf.default 1103 1091 1.01:1
AnimationMinimalPerf.default 295 297 0.99:1
DatepickerMinimalPerf.default 3613 3636 0.99:1
DropdownMinimalPerf.default 1410 1419 0.99:1
MenuButtonMinimalPerf.default 943 953 0.99:1
SplitButtonMinimalPerf.default 2197 2225 0.99:1
CustomToolbarPrototype.default 1473 1489 0.99:1
VideoMinimalPerf.default 421 426 0.99:1
AlertMinimalPerf.default 159 162 0.98:1
TableMinimalPerf.default 226 231 0.98:1
ButtonSlotsPerf.default 304 315 0.97:1
FormMinimalPerf.default 216 223 0.97:1
ListNestedPerf.default 311 321 0.97:1
LoaderMinimalPerf.default 186 192 0.97:1
InputMinimalPerf.default 523 545 0.96:1
RosterPerf.default 1539 1608 0.96:1
TextAreaMinimalPerf.default 293 304 0.96:1
FlexMinimalPerf.default 150 158 0.95:1
LabelMinimalPerf.default 215 226 0.95:1
SliderMinimalPerf.default 716 755 0.95:1
ImageMinimalPerf.default 206 229 0.9:1

@fabricteam
Copy link
Collaborator

fabricteam commented May 2, 2024 •
edited

📊 Bundle size report

✅ No changes found

@fabricteam
Copy link
Collaborator

fabricteam commented May 2, 2024 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 631 621 5000
Breadcrumb mount 1720 1707 1000
Checkbox mount 1688 1716 5000
CheckboxBase mount 1497 1478 5000
ChoiceGroup mount 2999 3028 5000
ComboBox mount 661 673 1000
CommandBar mount 6518 6490 1000
ContextualMenu mount 12483 12594 1000
DefaultButton mount 776 797 5000
DetailsRow mount 2234 2234 5000
DetailsRowFast mount 2224 2231 5000
DetailsRowNoStyles mount 2045 2028 5000
Dialog mount 2783 2688 1000
DocumentCardTitle mount 233 240 1000
Dropdown mount 2006 2020 5000
FocusTrapZone mount 1153 1167 5000
FocusZone mount 1062 1069 5000
GroupedList mount 38105 42579 2
GroupedList virtual-rerender 18229 20257 2
GroupedList virtual-rerender-with-unmount 51637 51290 2
GroupedListV2 mount 230 228 2
GroupedListV2 virtual-rerender 207 223 2
GroupedListV2 virtual-rerender-with-unmount 226 233 2
IconButton mount 1123 1119 5000
Label mount 336 337 5000
Layer mount 2768 2724 5000
Link mount 411 393 5000
MenuButton mount 986 963 5000
MessageBar mount 21776 21766 5000
Nav mount 1968 2060 1000
OverflowSet mount 778 805 5000
Panel mount 1797 1777 1000
Persona mount 735 763 1000
Pivot mount 894 889 1000
PrimaryButton mount 927 916 5000
Rating mount 4683 4683 5000
SearchBox mount 918 928 5000
Shimmer mount 1941 1877 5000
Slider mount 1373 1362 5000
SpinButton mount 2924 2994 5000
Spinner mount 391 384 5000
SplitButton mount 1893 1868 5000
Stack mount 403 420 5000
StackWithIntrinsicChildren mount 872 878 5000
StackWithTextChildren mount 2720 2670 5000
SwatchColorPicker mount 6461 6324 5000
TagPicker mount 1451 1461 5000
Text mount 371 375 5000
TextField mount 960 948 5000
ThemeProvider mount 844 834 5000
ThemeProvider virtual-rerender 587 590 5000
ThemeProvider virtual-rerender-with-unmount 1286 1270 5000
Toggle mount 602 628 5000
buttonNative mount 193 191 5000

TristanWatanabe
TristanWatanabe reviewed May 2, 2024
View reviewed changes
azure-pipelines.vrt-pr.yml Outdated Show resolved Hide resolved
azure-pipelines.vrt-baseline.yml Outdated Show resolved Hide resolved
azure-pipelines.vrt-baseline-web-components.yml Outdated Show resolved Hide resolved
.github/workflows/check-packages.yml Outdated
Comment on lines 88 to 89
npx beachball@$BEACHBALL_VERSION check -b web-components-v3
node ./scripts/beachball/check-wc-3-changefiles
Copy link
Member

Choose a reason for hiding this comment

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

should remove these and favor whats currently on master branch

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Would these lines still be needed while web-components-v3 is being treated as a feature branch?

Copy link
Member

Choose a reason for hiding this comment

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

If this is being merged to master then they shouldn't be needed, it's even documented in the script itself

fluentui/scripts/beachball/check-wc-3-changefiles.js

Lines 22 to 28 in 3287714

* Utility for web-components-v3 development branch to double check we dont accidentally introduce chain of changes,
* which could result in releasing/bumping monorepo packages beside `@fluentui/web-components` !
*
* ⚠️ TODO:
* - This functionality NEEDS to be REMOVED prior merging to master
* - Usage needs to be removed from .github/workflows/check-packages.yml
*/

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good to know 👍 Since this particular rebase branch isn't actually going into master (it will be force-pushed over web-components-v3), I'll restore these commands in check-packages.yml here.

@radium-v radium-v force-pushed the users/radium-v/web-components-v3-rebase branch from b32ea06 to a762d24 Compare May 2, 2024 20:02
fabricteam
fabricteam reviewed May 2, 2024
View reviewed changes
.github/CODEOWNERS Outdated
@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
Copy link
Collaborator

@fabricteam fabricteam May 2, 2024 •
edited

Choose a reason for hiding this comment

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

🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots

Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
Badge.Appearance - Dark Mode.normal.chromium.png 15 Changed
Text 1 screenshots
Image Name Diff(in Pixels) Image Type
Text.Block.normal.chromium.png 995 Changed

@fabricteam
Copy link
Collaborator

fabricteam commented May 2, 2024 •
edited

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam
fabricteam reviewed May 2, 2024
View reviewed changes
.github/CODEOWNERS Outdated
@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
Copy link
Collaborator

@fabricteam fabricteam May 2, 2024 •
edited

Choose a reason for hiding this comment

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

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

Checkbox 4 screenshots
Image Name Diff(in Pixels) Image Type
Checkbox.Checkbox Example Checked.chromium.png 11 Changed
Checkbox.Checkbox Example Disabled.chromium.png 3 Changed
Checkbox.Checkbox Example.Focuses checkbox.chromium.png 14 Changed
Checkbox.Checkbox Example.Checks checkbox.chromium.png 14 Changed
Popup 1 screenshots
Image Name Diff(in Pixels) Image Type
Popup.Popup Example Auto Size.chromium.png 11 Changed
Tree 12 screenshots
Image Name Diff(in Pixels) Image Type
Tree.Tree Multiselect Example Teams.chromium.png 5 Changed
Tree.Tree Multiselect Example Teams Dark.default selected states.chromium.png 23 Changed
Tree.Tree Multiselect Example.default selected states.chromium.png 32 Changed
Tree.Tree Multiselect Example.chromium.png 5 Changed
Tree.Tree Multiselect Example Teams High Contrast.default selected states.chromium.png 40 Changed
Tree.Tree Multiselect Example Teams Dark.first expanded, not custom checkbox visible.chromium.png 7 Changed
Tree.Tree Multiselect Example Teams High Contrast.chromium.png 6 Changed
Tree.Tree Multiselect Example Teams Dark.chromium.png 3 Changed
Tree.Tree Multiselect Example Teams.first expanded, not custom checkbox visible.chromium.png 10 Changed
Tree.Tree Multiselect Example Teams High Contrast.first expanded, not custom checkbox visible.chromium.png 11 Changed
Tree.Tree Multiselect Example Teams.default selected states.chromium.png 32 Changed
Tree.Tree Multiselect Example.first expanded, not custom checkbox visible.chromium.png 10 Changed

fabricteam
fabricteam reviewed May 2, 2024
View reviewed changes
.github/CODEOWNERS Outdated
@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
Copy link
Collaborator

@fabricteam fabricteam May 2, 2024 •
edited

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

Positioning (no decorator) 2 screenshots
Image Name Diff(in Pixels) Image Type
Positioning (no decorator).scroll jumps (with context usage).chromium.png 1 Changed
Positioning (no decorator).scroll jumps (with context usage).positions without scroll jump.chromium.png 1 Changed
SwatchPicker Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
SwatchPicker Converged.Shape.default.chromium.png 0 Removed

@radium-v radium-v force-pushed the users/radium-v/web-components-v3-rebase branch 4 times, most recently from 22612ec to 3d89250 Compare May 6, 2024 21:54
@radium-v radium-v changed the base branch from master to web-components-v3 May 6, 2024 22:00
@radium-v radium-v merged commit 3d89250 into web-components-v3 May 6, 2024
9 of 24 checks passed
@radium-v radium-v deleted the users/radium-v/web-components-v3-rebase branch May 6, 2024 22:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TristanWatanabe TristanWatanabe TristanWatanabe left review comments

@fabricteam fabricteam fabricteam left review comments

Assignees
No one assigned
Labels
Area: Build System Area: Icons Area: Website Component: Avatar Component: Button Component: Checkbox Component: Link Component: Pickers Component: Pivot Component: Slider Component: Toggle Fluent UI react-northstar Package: charting Package: date-time Package: experiments Package: react-monaco-editor Package: styling web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@radium-v @fabricteam @TristanWatanabe