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(Header): Convert to RFC #13253

Merged
merged 8 commits into from
May 21, 2020

Conversation

assuncaocharles
Copy link
Contributor

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

BREAKING CHANGES

This PR converts Header component to be functional. Restricting props set that will be passed to styles functions.

Related to #12237

Prop sets

Header
color
align
hasDescription

Focus areas to test

(optional)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 20, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 837 820 5000
Checkbox 1610 1596 5000
CheckboxBase 1294 1303 5000
CheckboxNext 1615 1537 5000
ChoiceGroup 5024 5021 5000
ComboBox 925 966 1000
CommandBar 7897 7895 1000
ContextualMenu 13767 13579 1000
DefaultButton 1077 1048 5000
DetailsRow 3507 3496 5000
DetailsRow (fast icons) 3506 3526 5000
DetailsRow without styles 3294 3327 5000
Dialog 1507 1489 1000
DocumentCardTitle with truncation 1950 1980 1000
Dropdown 2497 2398 5000
FocusZone 1753 1758 5000
IconButton 1785 1886 5000
Label 328 321 5000
Link 477 470 5000
LinkNext 453 457 5000
MenuButton 1423 1453 5000
Nav 3212 3244 1000
Panel 1493 1454 1000
Persona 865 843 1000
Pivot 1385 1413 1000
PrimaryButton 1253 1228 5000
SearchBox 1242 1274 5000
Slider 1498 1540 5000
SliderNext 1531 1517 5000
Spinner 410 396 5000
SplitButton 3145 3093 5000
Stack 484 495 5000
Stack with Intrinsic children 1898 1871 5000
Stack with Text children 4964 4967 5000
TagPicker 2757 2828 5000
Text 394 394 5000
TextField 1424 1380 5000
Toggle 878 900 5000
ToggleNext 879 887 5000
button 87 85 5000

Perf Analysis (Fluent)

⚠️ 2 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
HeaderSlotsPerf.default 1285 1958 0.66:1 analysis
HeaderMinimalPerf.default 365 673 0.54:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.7 0.49 1.43:1 2000 1404
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 543
🔧 Checkbox.Fluent 1.12 0.36 3.11:1 1000 1117
🔧 Dialog.Fluent 0.58 0.22 2.64:1 5000 2912
🔧 Dropdown.Fluent 6.49 0.46 14.11:1 1000 6486
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 699
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 360
🔧 Slider.Fluent 2.92 0.35 8.34:1 1000 2924
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 341
🦄 Tooltip.Fluent 0.1 17.9 0.01:1 5000 514

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 331 308 1.07:1
HierarchicalTreeMinimalPerf.default 413 385 1.07:1
ButtonMinimalPerf.default 183 172 1.06:1
MenuMinimalPerf.default 703 666 1.06:1
ChatDuplicateMessagesPerf.default 547 521 1.05:1
ListMinimalPerf.default 485 463 1.05:1
AttachmentSlotsPerf.default 1276 1222 1.04:1
AvatarMinimalPerf.default 737 711 1.04:1
EmbedMinimalPerf.default 3506 3367 1.04:1
ListNestedPerf.default 1123 1079 1.04:1
ButtonSlotsPerf.default 757 736 1.03:1
CarouselMinimalPerf.default 536 522 1.03:1
ChatMinimalPerf.default 606 589 1.03:1
ImageMinimalPerf.default 366 357 1.03:1
PopupMinimalPerf.default 277 269 1.03:1
PortalMinimalPerf.default 128 124 1.03:1
TreeMinimalPerf.default 1315 1273 1.03:1
ListWith60ListItems.default 1590 1558 1.02:1
Dialog.Fluent 2912 2846 1.02:1
BoxMinimalPerf.default 356 351 1.01:1
DropdownMinimalPerf.default 6506 6439 1.01:1
LabelMinimalPerf.default 396 392 1.01:1
MenuButtonMinimalPerf.default 1707 1685 1.01:1
ProviderMinimalPerf.default 826 818 1.01:1
SplitButtonMinimalPerf.default 3718 3675 1.01:1
StatusMinimalPerf.default 666 660 1.01:1
Dropdown.Fluent 6486 6405 1.01:1
Image.Fluent 360 356 1.01:1
Tooltip.Fluent 514 510 1.01:1
AnimationMinimalPerf.default 717 716 1:1
CardMinimalPerf.default 554 552 1:1
CheckboxMinimalPerf.default 5201 5203 1:1
DropdownManyItemsPerf.default 2192 2200 1:1
FormMinimalPerf.default 383 382 1:1
ItemLayoutMinimalPerf.default 2677 2671 1:1
ProviderMergeThemesPerf.default 1817 1821 1:1
RadioGroupMinimalPerf.default 589 591 1:1
SliderMinimalPerf.default 2931 2932 1:1
TableMinimalPerf.default 366 365 1:1
TooltipMinimalPerf.default 743 743 1:1
Icon.Fluent 699 697 1:1
Slider.Fluent 2924 2910 1:1
Text.Fluent 341 341 1:1
ChatWithPopoverPerf.default 683 687 0.99:1
DialogMinimalPerf.default 2841 2869 0.99:1
DividerMinimalPerf.default 333 336 0.99:1
InputMinimalPerf.default 1629 1645 0.99:1
ListCommonPerf.default 1141 1155 0.99:1
IconMinimalPerf.default 664 673 0.99:1
CustomToolbarPrototype.default 4876 4901 0.99:1
ToolbarMinimalPerf.default 774 781 0.99:1
VideoMinimalPerf.default 596 599 0.99:1
Avatar.Fluent 1404 1422 0.99:1
Checkbox.Fluent 1117 1127 0.99:1
LayoutMinimalPerf.default 835 856 0.98:1
Button.Fluent 543 552 0.98:1
FlexMinimalPerf.default 280 288 0.97:1
LoaderMinimalPerf.default 1205 1248 0.97:1
SegmentMinimalPerf.default 321 331 0.97:1
ReactionMinimalPerf.default 351 364 0.96:1
TextAreaMinimalPerf.default 434 454 0.96:1
TreeWith60ListItems.default 286 299 0.96:1
GridMinimalPerf.default 1284 1352 0.95:1
TextMinimalPerf.default 331 348 0.95:1
RefMinimalPerf.default 199 218 0.91:1
AccordionMinimalPerf.default 129 147 0.88:1
AttachmentMinimalPerf.default 148 168 0.88:1

@size-auditor
Copy link

size-auditor bot commented May 20, 2020

Asset size changes

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

Baseline commit: 73cbfd0c0d41af4839d32070f2b6134cc4b3f471 (build)

….tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
….tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
assuncaocharles and others added 2 commits May 21, 2020 15:40
….tsx

Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com>
@msft-github-bot
Copy link
Contributor

Hello @assuncaocharles!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@assuncaocharles assuncaocharles merged commit 00da8a5 into microsoft:master May 21, 2020
@assuncaocharles assuncaocharles deleted the feat/header-rfc branch May 21, 2020 15:11
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
* chore(Header): Convert to RFC

* chore(Header): Type accessibility and add changelog

* chore(Header): Conditional variables access

* Update packages/fluentui/react-northstar/src/components/Header/Header.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-northstar/src/components/Header/Header.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-northstar/src/components/Header/Header.tsx

Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com>

* chore(Header): fix prop

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants