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

Adding horizontal scroll component #17460

Merged
merged 4 commits into from
Mar 17, 2021
Merged

Adding horizontal scroll component #17460

merged 4 commits into from
Mar 17, 2021

Conversation

robarbms
Copy link
Contributor

@robarbms robarbms commented Mar 17, 2021 •
edited

Pull request checklist

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

Description of changes

Adds a component for scrolling content cards.

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 17, 2021 •
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.

Latest deployment of this branch, based on commit 6d8203b:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 17, 2021 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1132 1151 5000
BaseButton mount 938 895 5000
Breadcrumb mount 41249 41289 5000
ButtonNext mount 1296 1291 5000
Checkbox mount 1572 1584 5000
CheckboxBase mount 1390 1385 5000
ChoiceGroup mount 5050 5135 5000
ComboBox mount 1022 992 1000
CommandBar mount 10441 10248 1000
ContextualMenu mount 6368 6101 1000
DefaultButton mount 1185 1159 5000
DetailsRow mount 3802 3750 5000
DetailsRowFast mount 3775 3899 5000
DetailsRowNoStyles mount 3672 3563 5000
Dialog mount 1550 1501 1000
DocumentCardTitle mount 1888 1854 1000
Dropdown mount 3705 3601 5000
FocusTrapZone mount 1889 1920 5000
FocusZone mount 1924 1873 5000
IconButton mount 1912 1918 5000
Label mount 363 341 5000
Layer mount 1931 1897 5000
Link mount 489 486 5000
MakeStyles mount 1993 2009 50000
MenuButton mount 1573 1620 5000
MessageBar mount 2056 2028 5000
Nav mount 3493 3489 1000
OverflowSet mount 1079 1075 5000
Panel mount 1474 1510 1000
Persona mount 883 866 1000
Pivot mount 1497 1644 1000
PrimaryButton mount 1411 1372 5000
Rating mount 8210 8349 5000
SearchBox mount 1403 1423 5000
Shimmer mount 2801 2738 5000
Slider mount 2098 2095 5000
SpinButton mount 5275 5193 5000
Spinner mount 419 419 5000
SplitButton mount 3315 3404 5000
Stack mount 523 524 5000
StackWithIntrinsicChildren mount 1599 1561 5000
StackWithTextChildren mount 4879 4924 5000
SwatchColorPicker mount 10658 10747 5000
Tabs mount 1457 1466 1000
TagPicker mount 2981 2944 5000
TeachingBubble mount 11875 11969 5000
Text mount 449 440 5000
TextField mount 1424 1473 5000
ThemeProvider mount 1222 1204 5000
ThemeProvider virtual-rerender 610 618 5000
ThemeProviderNext mount 15829 15964 5000
Toggle mount 868 884 5000
buttonNative mount 109 116 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.47 0.4:1 2000 376
🦄 Button.Fluent 0.13 0.2 0.65:1 5000 652
🔧 Checkbox.Fluent 0.66 0.36 1.83:1 1000 663
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 844
🔧 Dropdown.Fluent 3.07 0.42 7.31:1 1000 3071
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 719
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 445
🔧 Slider.Fluent 1.55 0.47 3.3:1 1000 1547
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 410
🦄 Tooltip.Fluent 0.14 0.88 0.16:1 5000 718

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 189 166 1.14:1
RefMinimalPerf.default 257 234 1.1:1
BoxMinimalPerf.default 428 391 1.09:1
TableMinimalPerf.default 479 441 1.09:1
AvatarMinimalPerf.default 226 210 1.08:1
IconMinimalPerf.default 774 716 1.08:1
ChatDuplicateMessagesPerf.default 324 303 1.07:1
HeaderMinimalPerf.default 434 406 1.07:1
SkeletonMinimalPerf.default 436 409 1.07:1
AccordionMinimalPerf.default 184 176 1.05:1
DividerMinimalPerf.default 429 409 1.05:1
ListNestedPerf.default 651 619 1.05:1
ListWith60ListItems.default 690 660 1.05:1
AttachmentSlotsPerf.default 1296 1241 1.04:1
ButtonSlotsPerf.default 617 595 1.04:1
CardMinimalPerf.default 637 612 1.04:1
ImageMinimalPerf.default 451 434 1.04:1
PopupMinimalPerf.default 748 716 1.04:1
TreeMinimalPerf.default 883 845 1.04:1
AttachmentMinimalPerf.default 184 178 1.03:1
FormMinimalPerf.default 492 478 1.03:1
ListMinimalPerf.default 573 554 1.03:1
ReactionMinimalPerf.default 463 450 1.03:1
ToolbarMinimalPerf.default 1057 1030 1.03:1
TooltipMinimalPerf.default 1019 989 1.03:1
Avatar.Fluent 376 365 1.03:1
ButtonUseCssNestingPerf.default 1127 1108 1.02:1
CarouselMinimalPerf.default 513 505 1.02:1
ChatWithPopoverPerf.default 406 399 1.02:1
CheckboxMinimalPerf.default 2936 2888 1.02:1
DialogMinimalPerf.default 850 836 1.02:1
EmbedMinimalPerf.default 4399 4318 1.02:1
ItemLayoutMinimalPerf.default 1374 1348 1.02:1
RadioGroupMinimalPerf.default 509 501 1.02:1
SplitButtonMinimalPerf.default 3963 3904 1.02:1
TableManyItemsPerf.default 2262 2212 1.02:1
Image.Fluent 445 436 1.02:1
Text.Fluent 410 400 1.02:1
ChatMinimalPerf.default 688 683 1.01:1
DatepickerMinimalPerf.default 47232 46877 1.01:1
DropdownManyItemsPerf.default 793 785 1.01:1
LabelMinimalPerf.default 475 468 1.01:1
MenuMinimalPerf.default 973 962 1.01:1
MenuButtonMinimalPerf.default 1706 1692 1.01:1
ProviderMergeThemesPerf.default 1546 1524 1.01:1
TextMinimalPerf.default 409 403 1.01:1
TreeWith60ListItems.default 190 189 1.01:1
VideoMinimalPerf.default 712 707 1.01:1
Button.Fluent 652 646 1.01:1
Dropdown.Fluent 3071 3052 1.01:1
Tooltip.Fluent 718 714 1.01:1
ButtonMinimalPerf.default 202 201 1:1
DropdownMinimalPerf.default 3069 3077 1:1
FlexMinimalPerf.default 332 333 1:1
GridMinimalPerf.default 408 410 1:1
SegmentMinimalPerf.default 406 408 1:1
StatusMinimalPerf.default 810 807 1:1
CustomToolbarPrototype.default 3657 3666 1:1
Checkbox.Fluent 663 660 1:1
Dialog.Fluent 844 841 1:1
AlertMinimalPerf.default 339 343 0.99:1
ButtonOverridesMissPerf.default 1722 1747 0.99:1
ButtonUseCssPerf.default 862 868 0.99:1
HeaderSlotsPerf.default 873 878 0.99:1
TextAreaMinimalPerf.default 560 568 0.99:1
Icon.Fluent 719 726 0.99:1
InputMinimalPerf.default 1304 1326 0.98:1
ListCommonPerf.default 719 737 0.98:1
LoaderMinimalPerf.default 746 758 0.98:1
AnimationMinimalPerf.default 439 452 0.97:1
LayoutMinimalPerf.default 434 447 0.97:1
ProviderMinimalPerf.default 889 919 0.97:1
SliderMinimalPerf.default 1554 1607 0.97:1
Slider.Fluent 1547 1591 0.97:1
RosterPerf.default 1214 1285 0.94:1

@size-auditor
Copy link

size-auditor bot commented Mar 17, 2021 •
edited

Asset size changes

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

Baseline commit: aac67c9c9e6c702c9ce9ab0140c20ffed381a474 (build)

@chrisdholt chrisdholt merged commit a1d4584 into microsoft:master Mar 17, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.16.2 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@robarbms @joshualamusga1
Adding horizontal scroll as a new web component (microsoft#17460)
5ef71c6 
* Adding horizontal scroll component

* Change files

* Updating spacing to match fluent

* Fixing linter errors
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@robarbms @miroslavstastny
Adding horizontal scroll as a new web component (microsoft#17460)
74ef554 
* Adding horizontal scroll component

* Change files

* Updating spacing to match fluent

* Fixing linter errors
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.21.1 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

@chrisdholt chrisdholt chrisdholt approved these changes

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

@Hotell Hotell Awaiting requested review from Hotell

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@khmakoto khmakoto

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@robarbms @fabricteam @msft-fluent-ui-bot @EisenbergEffect @chrisdholt @khmakoto