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

Add ie11 polyfill package and test with react-button package #14567

Merged
merged 37 commits into from
Sep 3, 2020

Conversation

tomi-msft
Copy link
Contributor

@tomi-msft tomi-msft commented Aug 17, 2020

Pull request checklist

Description of changes

(give an overview)

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 17, 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 99a0d92:

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 17, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 872 880 5000
ButtonNext mount 616 566 5000
Checkbox mount 1566 1561 5000
CheckboxBase mount 1357 1300 5000
CheckboxNext mount 1644 1687 5000
ChoiceGroup mount 4920 4946 5000
ChoiceGroupNext mount 4986 4920 5000
ComboBox mount 910 937 1000
CommandBar mount 7676 7731 1000
ContextualMenu mount 14441 14876 1000
DefaultButton mount 1079 1082 5000
DetailsRow mount 3567 3484 5000
DetailsRowFast mount 3528 3653 5000
DetailsRowNoStyles mount 3347 3307 5000
Dialog mount 1499 1469 1000
DocumentCardTitle mount 1867 1793 1000
Dropdown mount 2584 2597 5000
FocusZone mount 1821 1769 5000
IconButton mount 1741 1763 5000
Label mount 341 339 5000
Link mount 463 455 5000
LinkNext mount 469 464 5000
MenuButton mount 1459 1467 5000
MessageBar mount 2087 2122 5000
MessageBarNext mount 2081 2212 5000
Nav mount 3239 3210 1000
OverflowSet mount 1426 1400 5000
OverflowSetNext mount 1059 1081 5000
Panel mount 1463 1467 1000
Persona mount 825 893 1000
Pivot mount 1402 1439 1000
PivotNext mount 1388 1407 1000
PrimaryButton mount 1270 1278 5000
SearchBox mount 1270 1229 5000
SearchBoxNext mount 1376 1397 5000
Shimmer mount 2497 2523 5000
ShimmerNext mount 2533 2587 5000
Slider mount 1518 1523 5000
SliderNext mount 1947 1937 5000
SpinButton mount 5062 5039 5000
SpinButtonNext mount 4990 5077 5000
Spinner mount 455 413 5000
SplitButton mount 3064 3162 5000
Stack mount 522 555 5000
StackWithIntrinsicChildren mount 1916 1946 5000
StackWithTextChildren mount 5009 5005 5000
SwatchColorPicker mount 10138 10297 5000
SwatchColorPickerNext mount 10328 10196 5000
TagPicker mount 2742 2771 5000
TeachingBubble mount 51111 50940 5000
TeachingBubbleNext mount 51182 50741 5000
Text mount 415 457 5000
TextField mount 1354 1405 5000
ThemeProvider mount 4194 4251 5000
ThemeProvider virtual-rerender 457 459 5000
Toggle mount 836 868 5000
ToggleNext mount 810 805 5000
button mount 113 120 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 1756 44 39.91:1 analysis
ChatWithPopoverPerf.default 472 478 0.99:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.49 0.9:1 2000 873
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 543
🔧 Checkbox.Fluent 0.63 0.36 1.75:1 1000 627
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 765
🔧 Dropdown.Fluent 2.93 0.46 6.37:1 1000 2933
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 696
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 363
🔧 Slider.Fluent 1.6 0.36 4.44:1 1000 1596
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 335
🦄 Tooltip.Fluent 0.11 18.71 0.01:1 5000 543

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonUseCssPerf.default 62 46 1.35:1
PortalMinimalPerf.default 138 118 1.17:1
FormMinimalPerf.default 408 353 1.16:1
RefMinimalPerf.default 231 201 1.15:1
ButtonUseCssNestingPerf.default 52 46 1.13:1
TextMinimalPerf.default 351 317 1.11:1
HeaderMinimalPerf.default 370 337 1.1:1
ProviderMinimalPerf.default 1020 928 1.1:1
BoxMinimalPerf.default 341 314 1.09:1
SkeletonMinimalPerf.default 420 387 1.09:1
DividerMinimalPerf.default 360 333 1.08:1
AttachmentMinimalPerf.default 166 155 1.07:1
ProviderMergeThemesPerf.default 2023 1898 1.07:1
Button.Fluent 543 508 1.07:1
CarouselMinimalPerf.default 465 438 1.06:1
ImageMinimalPerf.default 369 347 1.06:1
LabelMinimalPerf.default 414 390 1.06:1
PopupMinimalPerf.default 688 652 1.06:1
Tooltip.Fluent 543 514 1.06:1
ChatDuplicateMessagesPerf.default 429 410 1.05:1
IconMinimalPerf.default 654 620 1.05:1
TreeMinimalPerf.default 883 842 1.05:1
Image.Fluent 363 345 1.05:1
DropdownManyItemsPerf.default 757 731 1.04:1
MenuMinimalPerf.default 840 807 1.04:1
ReactionMinimalPerf.default 381 366 1.04:1
SliderMinimalPerf.default 1677 1608 1.04:1
CustomToolbarPrototype.default 3936 3772 1.04:1
ButtonMinimalPerf.default 180 175 1.03:1
DropdownMinimalPerf.default 3104 3003 1.03:1
ToolbarMinimalPerf.default 987 954 1.03:1
VideoMinimalPerf.default 618 599 1.03:1
Icon.Fluent 696 679 1.03:1
AnimationMinimalPerf.default 393 387 1.02:1
ButtonSlotsPerf.default 596 583 1.02:1
CheckboxMinimalPerf.default 2860 2814 1.02:1
InputMinimalPerf.default 1313 1287 1.02:1
LayoutMinimalPerf.default 387 381 1.02:1
RadioGroupMinimalPerf.default 411 402 1.02:1
SplitButtonMinimalPerf.default 3802 3713 1.02:1
TableManyItemsPerf.default 2185 2148 1.02:1
Avatar.Fluent 873 857 1.02:1
AlertMinimalPerf.default 289 286 1.01:1
CardMinimalPerf.default 563 558 1.01:1
ItemLayoutMinimalPerf.default 1247 1232 1.01:1
MenuButtonMinimalPerf.default 1532 1513 1.01:1
SegmentMinimalPerf.default 354 352 1.01:1
Dialog.Fluent 765 757 1.01:1
ChatMinimalPerf.default 605 604 1:1
DialogMinimalPerf.default 768 771 1:1
FlexMinimalPerf.default 273 273 1:1
LoaderMinimalPerf.default 745 742 1:1
StatusMinimalPerf.default 646 649 1:1
TooltipMinimalPerf.default 786 786 1:1
Checkbox.Fluent 627 626 1:1
Text.Fluent 335 336 1:1
HeaderSlotsPerf.default 766 771 0.99:1
ListMinimalPerf.default 477 484 0.99:1
TextAreaMinimalPerf.default 448 453 0.99:1
TreeWith60ListItems.default 213 216 0.99:1
Dropdown.Fluent 2933 2962 0.99:1
Slider.Fluent 1596 1618 0.99:1
AccordionMinimalPerf.default 149 152 0.98:1
TableMinimalPerf.default 386 394 0.98:1
AttachmentSlotsPerf.default 1131 1162 0.97:1
AvatarMinimalPerf.default 459 473 0.97:1
EmbedMinimalPerf.default 1877 1942 0.97:1
GridMinimalPerf.default 316 325 0.97:1
ListWith60ListItems.default 942 1052 0.9:1
ListCommonPerf.default 661 929 0.71:1
ListNestedPerf.default 571 874 0.65:1

@size-auditor
Copy link

size-auditor bot commented Aug 17, 2020

Asset size changes

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

Baseline commit: 17e0cf28afe34918bce1d80454d3ee2c022f8467 (build)

Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

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

Approving from the Button legacy start perspective.

@khmakoto
Copy link
Member

Waiting until we figure out licensing to merge this PR.

@tomi-msft tomi-msft reopened this Aug 30, 2020
@dzearing dzearing mentioned this pull request Aug 31, 2020
@tomi-msft tomi-msft closed this Sep 3, 2020
@tomi-msft tomi-msft reopened this Sep 3, 2020
packages/ie11-polyfills/README.md Outdated Show resolved Hide resolved
packages/ie11-polyfills/README.md Outdated Show resolved Hide resolved
packages/ie11-polyfills/index.js Outdated Show resolved Hide resolved
packages/ie11-polyfills/just.config.ts Outdated Show resolved Hide resolved
packages/ie11-polyfills/package.json Outdated Show resolved Hide resolved
Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Looks good once you delete the extra change file.

@tomi-msft tomi-msft closed this Sep 3, 2020
@tomi-msft tomi-msft reopened this Sep 3, 2020
@tomi-msft tomi-msft merged commit bcf5ac2 into microsoft:master Sep 3, 2020
@msft-github-bot
Copy link
Contributor

🎉@uifabric/example-app-base@v7.15.4 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-button@v0.11.5 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/ie11-polyfills@v0.1.1 has been released which incorporates this pull request.:tada:

Handy links:

hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
…ft#14567)

* Add ie11 polyfill package and test with react-button package

* change package name and add typings file

* Fix getResolveAlias

* more getResolveAlias fixes

* update readme and get latest polyfill script version

* clean up script file

* Updating example-app-base version in react-button.

* Removing the need for a theme and wrapping legacy examples with ThemeProvider.

* Change files

* Change files

* Update version in react-button and README in polyfill package

* remove unused import

* Update packages/ie11-custom-properties/README.md

Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>

* update example-app-base version

* update package to use external polyfill as devDependency

* Change files

* update example-app-base package to latest version

* Exporting ie11-custom-properties from ie11-polyfills.

* update example-app-base version

* add more info to README & fix LICENSE

* Clean up README and change package to use JS

* delete redundant change file

Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>
Co-authored-by: KHMakoto <humbertomakotomorimoto@gmail.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
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.

IE 11 polyfill for CSS variables
4 participants