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

chore(CarouselNavigationItem): Convert to RFC #12920

Merged
merged 10 commits into from
Apr 30, 2020
Merged

chore(CarouselNavigationItem): Convert to RFC #12920

merged 10 commits into from
Apr 30, 2020

Conversation

assuncaocharles
Copy link
Contributor

@assuncaocharles assuncaocharles commented Apr 29, 2020 •
edited by msft-github-bot

Pull request checklist

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

BREAKING CHANGES

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

Related to #12237

Prop sets

CarouselNavigationItem
thumbnails
vertical
active
hasContent
iconOnly
primary
hasIndicator

Focus areas to test

(optional)

Microsoft Reviewers: Open in CodeFlow

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Apr 29, 2020
@size-auditor
Copy link

size-auditor bot commented Apr 29, 2020 •
edited

Asset size changes

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

Baseline commit: 85b2601ac3b81d101d7f488335be52251cb1c0bb (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 29, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 711 749 5000
Checkbox 1493 1482 5000
CheckboxBase 1200 1221 5000
ChoiceGroup 4608 4567 5000
ComboBox 863 883 1000
CommandBar 6997 7032 1000
ContextualMenu 13194 12875 1000
DefaultButton 977 1001 5000
DetailsRow 3121 3161 5000
DetailsRow (fast icons) 3101 3277 5000
DetailsRow without styles 2966 2868 5000
Dialog 1300 1339 1000
DocumentCardTitle with truncation 1551 1596 1000
Dropdown 2182 2188 5000
FocusZone 1482 1494 5000
IconButton 1535 1533 5000
Label 293 270 5000
Link 399 417 5000
MenuButton 1296 1260 5000
Nav 2819 2823 1000
Panel 1366 1325 1000
Persona 796 762 1000
Pivot 1197 1233 1000
PrimaryButton 1048 1085 5000
SearchBox 1125 1154 5000
Slider 1353 1331 5000
Spinner 345 357 5000
SplitButton 2727 2813 5000
Stack 423 425 5000
Stack with Intrinsic children 1044 1033 5000
Stack with Text children 3706 3664 5000
TagPicker 2521 2526 5000
Text 325 335 5000
TextField 1219 1233 5000
Toggle 790 784 5000
button 62 60 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.45 0.43 1.05:1 2000 890
🦄 Button.Fluent 0.09 0.17 0.53:1 5000 468
🔧 Checkbox.Fluent 0.59 0.31 1.9:1 1000 591
🔧 Dialog.Fluent 0.32 0.19 1.68:1 5000 1617
🔧 Dropdown.Fluent 3.06 0.4 7.65:1 1000 3057
🔧 Icon.Fluent 0.12 0.04 3:1 5000 614
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 354
🔧 Slider.Fluent 1.33 0.34 3.91:1 1000 1326
🔧 Text.Fluent 0.06 0.02 3:1 5000 288
🦄 Tooltip.Fluent 0.08 16.84 0:1 5000 424

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
Image.Fluent 354 318 1.11:1
AvatarMinimalPerf.default 517 469 1.1:1
HeaderSlotsPerf.default 1409 1310 1.08:1
GridMinimalPerf.default 600 562 1.07:1
TextMinimalPerf.default 328 307 1.07:1
PortalMinimalPerf.default 291 275 1.06:1
TreeMinimalPerf.default 1144 1079 1.06:1
HierarchicalTreeMinimalPerf.default 918 877 1.05:1
ListNestedPerf.default 859 825 1.04:1
AttachmentSlotsPerf.default 1078 1045 1.03:1
ButtonSlotsPerf.default 580 564 1.03:1
CarouselMinimalPerf.default 570 555 1.03:1
LoaderMinimalPerf.default 751 729 1.03:1
MenuMinimalPerf.default 1741 1697 1.03:1
ProviderMinimalPerf.default 634 614 1.03:1
Dialog.Fluent 1617 1572 1.03:1
AlertMinimalPerf.default 264 258 1.02:1
DropdownMinimalPerf.default 3214 3156 1.02:1
EmbedMinimalPerf.default 1896 1864 1.02:1
ItemLayoutMinimalPerf.default 1526 1496 1.02:1
ProviderMergeThemesPerf.default 1578 1552 1.02:1
RadioGroupMinimalPerf.default 508 496 1.02:1
TooltipMinimalPerf.default 699 687 1.02:1
Slider.Fluent 1326 1301 1.02:1
AccordionMinimalPerf.default 129 128 1.01:1
AnimationMinimalPerf.default 597 589 1.01:1
CardMinimalPerf.default 496 493 1.01:1
ImageMinimalPerf.default 320 318 1.01:1
ListWith60ListItems.default 1094 1086 1.01:1
SliderMinimalPerf.default 1335 1324 1.01:1
ToolbarMinimalPerf.default 949 944 1.01:1
Avatar.Fluent 890 880 1.01:1
ChatWithPopoverPerf.default 561 562 1:1
MenuButtonMinimalPerf.default 1449 1451 1:1
TextAreaMinimalPerf.default 408 410 1:1
CheckboxMinimalPerf.default 2748 2786 0.99:1
FormMinimalPerf.default 670 674 0.99:1
LayoutMinimalPerf.default 505 508 0.99:1
PopupMinimalPerf.default 235 237 0.99:1
SegmentMinimalPerf.default 836 844 0.99:1
SplitButtonMinimalPerf.default 3142 3163 0.99:1
CustomToolbarPrototype.default 3458 3486 0.99:1
Dropdown.Fluent 3057 3073 0.99:1
ChatDuplicateMessagesPerf.default 374 381 0.98:1
ChatMinimalPerf.default 550 564 0.98:1
ListCommonPerf.default 892 914 0.98:1
StatusMinimalPerf.default 590 599 0.98:1
TableMinimalPerf.default 332 339 0.98:1
Checkbox.Fluent 591 604 0.98:1
DialogMinimalPerf.default 1583 1636 0.97:1
DividerMinimalPerf.default 670 688 0.97:1
DropdownManyItemsPerf.default 1247 1281 0.97:1
InputMinimalPerf.default 905 937 0.97:1
VideoMinimalPerf.default 555 572 0.97:1
Icon.Fluent 614 638 0.96:1
AttachmentMinimalPerf.default 124 130 0.95:1
HeaderMinimalPerf.default 439 460 0.95:1
LabelMinimalPerf.default 352 370 0.95:1
ListMinimalPerf.default 416 436 0.95:1
ReactionMinimalPerf.default 1658 1746 0.95:1
RefMinimalPerf.default 192 203 0.95:1
IconMinimalPerf.default 571 602 0.95:1
TreeWith60ListItems.default 193 203 0.95:1
ButtonMinimalPerf.default 141 150 0.94:1
Tooltip.Fluent 424 450 0.94:1
Button.Fluent 468 501 0.93:1
FlexMinimalPerf.default 254 275 0.92:1
Text.Fluent 288 317 0.91:1
BoxMinimalPerf.default 278 317 0.88:1

assuncaocharles and others added 3 commits April 30, 2020 16:33
@assuncaocharles @mnajdova
Update packages/fluentui/react-northstar/src/components/Carousel/Caro…
b6a2c31 
…uselNavigationItem.tsx

Co-authored-by: Marija Najdova <mnajdova@gmail.com>
@assuncaocharles @mnajdova
Update packages/fluentui/react-northstar/src/components/Carousel/Caro…
f1d39a6 
…uselNavigationItem.tsx

Co-authored-by: Marija Najdova <mnajdova@gmail.com>
@assuncaocharles
Merge branch 'master' into chore/carousel-navigation-item-rfc
5450141
@assuncaocharles assuncaocharles merged commit 1c286ff into microsoft:master Apr 30, 2020
@assuncaocharles assuncaocharles deleted the chore/carousel-navigation-item-rfc branch May 4, 2020 08:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mnajdova mnajdova mnajdova approved these changes

@silviuaavram silviuaavram silviuaavram approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@layershifter layershifter Awaiting requested review from layershifter

@levithomason levithomason Awaiting requested review from levithomason

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@pompomon pompomon Awaiting requested review from pompomon

Assignees

@joschect joschect

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@assuncaocharles @msft-github-bot @mnajdova @silviuaavram @joschect