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

[DRAFT]FloatingSuggestionsComposite: Making the overflow scrollable for the callout to see more suggestions #15325

Closed
wants to merge 1 commit into from
Closed

[DRAFT]FloatingSuggestionsComposite: Making the overflow scrollable for the callout to see more suggestions #15325

wants to merge 1 commit into from

Conversation

nebhatna
Copy link
Contributor

Pull request checklist

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

Description of changes

Updating the floating suggestion css to allow for showing a scroll bar when suggestions are long list
Updated example to show the same.
Will not be checking this in till the freeze is over

Focus areas to test

(optional)

@msft-github-bot
Copy link
Contributor

Thanks for submitting this change, but due to work currently in progress to prepare master for our version 8 beta release, we're asking contributors to either wait a couple weeks to submit changes (if it's not urgent) or submit to the new 7.0 branch (if it's urgent). See #15222 for more details. Thank you for your contribution and understanding!

@codesandbox-ci
Copy link

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 eec46f9:

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

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 828 855 5000
BaseButton mount 924 882 5000
Breadcrumb mount 40778 40704 5000
BreadcrumbNext mount 156681 156349 5000
ButtonNext mount 569 541 5000
Checkbox mount 1492 1531 5000
CheckboxBase mount 1236 1249 5000
CheckboxNext mount 1500 1502 5000
ChoiceGroup mount 4872 4840 5000
ChoiceGroupNext mount 9428 9456 5000
ComboBox mount 906 893 1000
CommandBar mount 7490 7604 1000
ContextualMenu mount 13302 13271 1000
DefaultButton mount 1116 1098 5000
DetailsRow mount 3614 3564 5000
DetailsRowFast mount 3598 3653 5000
DetailsRowNoStyles mount 3331 3327 5000
Dialog mount 1533 1472 1000
DocumentCardTitle mount 1832 1783 1000
Dropdown mount 2527 2483 5000
FocusTrapZone mount 1670 1658 5000
FocusTrapZoneNext mount 1758 1721 5000
FocusZone mount 1708 1778 5000
IconButton mount 1708 1706 5000
Label mount 334 338 5000
Layer mount 1895 1879 5000
LayerNext mount 1810 1810 5000
Link mount 423 447 5000
LinkNext mount 440 471 5000
MenuButton mount 1460 1439 5000
MessageBar mount 1982 2058 5000
MessageBarNext mount 1976 2004 5000
Nav mount 3233 3176 1000
OverflowSet mount 1348 1361 5000
OverflowSetNext mount 1044 1011 5000
Panel mount 1403 1431 1000
Persona mount 804 826 1000
Pivot mount 1421 1389 1000
PivotNext mount 1415 1383 1000
PrimaryButton mount 1250 1269 5000
Rating mount 7517 7458 5000
RatingNext mount 7318 7367 5000
SearchBox mount 1228 1258 5000
SearchBoxNext mount 1304 1309 5000
Shimmer mount 2533 2524 5000
ShimmerNext mount 2487 2497 5000
Slider mount 1516 1462 5000
SliderNext mount 1955 1898 5000
SpinButton mount 4941 4913 5000
SpinButtonNext mount 4966 5077 5000
Spinner mount 412 395 5000
SplitButton mount 3135 3110 5000
Stack mount 504 506 5000
StackWithIntrinsicChildren mount 1853 1857 5000
StackWithTextChildren mount 4862 4830 5000
SwatchColorPicker mount 10138 10057 5000
SwatchColorPickerNext mount 10039 10122 5000
TagPicker mount 2732 2681 5000
TeachingBubble mount 49402 49702 5000
TeachingBubbleNext mount 11418 11314 5000
Text mount 415 416 5000
TextField mount 1327 1326 5000
ThemeProvider mount 3121 3126 5000
ThemeProvider virtual-rerender 603 583 5000
Toggle mount 818 829 5000
ToggleNext mount 817 781 5000
button mount 119 108 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.43 0.47 0.91:1 2000 856
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 567
🔧 Checkbox.Fluent 0.64 0.34 1.88:1 1000 636
🦄 Dialog.Fluent 0.15 0.23 0.65:1 5000 767
🔧 Dropdown.Fluent 2.94 0.49 6:1 1000 2941
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 734
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 382
🔧 Slider.Fluent 1.55 0.4 3.88:1 1000 1548
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 377
🦄 Tooltip.Fluent 0.11 16.26 0.01:1 5000 571

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 428 383 1.12:1
ButtonMinimalPerf.default 195 177 1.1:1
DividerMinimalPerf.default 410 376 1.09:1
PortalMinimalPerf.default 179 164 1.09:1
RadioGroupMinimalPerf.default 474 438 1.08:1
RefMinimalPerf.default 256 239 1.07:1
SegmentMinimalPerf.default 394 367 1.07:1
TableMinimalPerf.default 431 403 1.07:1
TextMinimalPerf.default 377 353 1.07:1
Text.Fluent 377 353 1.07:1
LabelMinimalPerf.default 447 422 1.06:1
TreeWith60ListItems.default 208 196 1.06:1
ButtonOverridesMissPerf.default 1780 1701 1.05:1
MenuMinimalPerf.default 900 859 1.05:1
Tooltip.Fluent 571 546 1.05:1
AvatarMinimalPerf.default 487 470 1.04:1
InputMinimalPerf.default 1355 1301 1.04:1
ListWith60ListItems.default 963 928 1.04:1
TooltipMinimalPerf.default 854 820 1.04:1
AnimationMinimalPerf.default 426 414 1.03:1
DropdownManyItemsPerf.default 774 750 1.03:1
ItemLayoutMinimalPerf.default 1302 1262 1.03:1
ListNestedPerf.default 595 575 1.03:1
Checkbox.Fluent 636 620 1.03:1
CarouselMinimalPerf.default 457 447 1.02:1
HeaderSlotsPerf.default 800 784 1.02:1
ImageMinimalPerf.default 406 397 1.02:1
ListMinimalPerf.default 505 493 1.02:1
MenuButtonMinimalPerf.default 1607 1577 1.02:1
StatusMinimalPerf.default 742 726 1.02:1
IconMinimalPerf.default 678 662 1.02:1
TextAreaMinimalPerf.default 485 476 1.02:1
ToolbarMinimalPerf.default 938 923 1.02:1
Dropdown.Fluent 2941 2890 1.02:1
AlertMinimalPerf.default 301 298 1.01:1
GridMinimalPerf.default 362 359 1.01:1
LoaderMinimalPerf.default 739 734 1.01:1
SplitButtonMinimalPerf.default 3733 3702 1.01:1
ChatDuplicateMessagesPerf.default 420 420 1:1
ChatMinimalPerf.default 641 643 1:1
DialogMinimalPerf.default 807 803 1:1
DropdownMinimalPerf.default 2990 2987 1:1
PopupMinimalPerf.default 720 718 1:1
ProviderMergeThemesPerf.default 2116 2109 1:1
ProviderMinimalPerf.default 1045 1048 1:1
CustomToolbarPrototype.default 3898 3882 1:1
Button.Fluent 567 566 1:1
Icon.Fluent 734 731 1:1
Image.Fluent 382 381 1:1
Slider.Fluent 1548 1546 1:1
AccordionMinimalPerf.default 160 161 0.99:1
BoxMinimalPerf.default 375 378 0.99:1
ButtonUseCssPerf.default 835 840 0.99:1
ChatWithPopoverPerf.default 480 483 0.99:1
CheckboxMinimalPerf.default 2883 2902 0.99:1
EmbedMinimalPerf.default 1927 1941 0.99:1
FormMinimalPerf.default 423 427 0.99:1
ListCommonPerf.default 654 663 0.99:1
SkeletonMinimalPerf.default 420 424 0.99:1
SliderMinimalPerf.default 1564 1578 0.99:1
TableManyItemsPerf.default 2156 2182 0.99:1
TreeMinimalPerf.default 858 870 0.99:1
VideoMinimalPerf.default 620 629 0.99:1
ButtonUseCssNestingPerf.default 1088 1115 0.98:1
CardMinimalPerf.default 564 575 0.98:1
LayoutMinimalPerf.default 422 434 0.97:1
ReactionMinimalPerf.default 417 432 0.97:1
AttachmentSlotsPerf.default 1143 1189 0.96:1
ButtonSlotsPerf.default 586 613 0.96:1
FlexMinimalPerf.default 301 312 0.96:1
Dialog.Fluent 767 797 0.96:1
AttachmentMinimalPerf.default 171 180 0.95:1
Avatar.Fluent 856 902 0.95:1

@size-auditor
Copy link

size-auditor bot commented Sep 30, 2020

Asset size changes

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

Baseline commit: c6e8a4b4b6355e068a7f672a240da769c5dc8bd7 (build)

khmakoto
khmakoto requested changes Oct 1, 2020
View reviewed changes
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.

Thanks for submitting this fix, but due to work we're currently doing to prepare master for our version 8 beta release, we're asking contributors to either wait a couple weeks to submit fixes (if it's not urgent) or submit to the new 7.0 branch (if it's urgent). See #15222 for more details.

@nebhatna
Copy link
Contributor Author

nebhatna commented Oct 5, 2020

Thanks this is just for tracking purpose. I will only complete this PR once the fluent freeze is over.

@nebhatna nebhatna closed this Oct 19, 2020
@ecraig12345 ecraig12345 deleted the u/nebhatna/expandableFloatingSuggestion branch March 3, 2021 00:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khmakoto khmakoto khmakoto requested changes

@elisabethcvs elisabethcvs elisabethcvs approved these changes

Assignees

@khmakoto khmakoto

@miroslavstastny miroslavstastny

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@nebhatna @msft-github-bot @khmakoto @elisabethcvs @miroslavstastny