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

fix(react-examples): Add tooltip to icons in OverflowSet example #16495

Merged
merged 8 commits into from
Jan 26, 2021
Merged

fix(react-examples): Add tooltip to icons in OverflowSet example #16495

merged 8 commits into from
Jan 26, 2021

Conversation

andrefcdias
Copy link
Contributor

Pull request checklist

  • Addresses an existing issue: Fixes microsoftdesign/fluentui#10284
  • Include a change request file using $ yarn change: No change files are needed

Description of changes

Add tooltip to items in the Overflow Set Vertical example.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 15, 2021 •
edited
Loading

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 710a21a:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 15, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 798 818 5000
BaseButtonCompat mount 887 863 5000
Breadcrumb mount 42437 42475 5000
Checkbox mount 1445 1452 5000
CheckboxBase mount 1196 1182 5000
ChoiceGroup mount 4565 4552 5000
ComboBox mount 933 1002 1000
CommandBar mount 9812 9747 1000
ContextualMenu mount 5936 5859 1000
DefaultButtonCompat mount 1084 1086 5000
DetailsRow mount 3521 3465 5000
DetailsRowFast mount 3489 3535 5000
DetailsRowNoStyles mount 3327 3291 5000
Dialog mount 1387 1384 1000
DocumentCardTitle mount 1770 1792 1000
Dropdown mount 3221 3240 5000
FocusTrapZone mount 1719 1717 5000
FocusZone mount 1830 1803 5000
IconButtonCompat mount 1668 1674 5000
Label mount 319 320 5000
Layer mount 1708 1665 5000
Link mount 439 445 5000
MakeStyles mount 1882 1893 50000
MenuButtonCompat mount 1397 1398 5000
MessageBar mount 1941 1940 5000
Nav mount 3228 3118 1000
OverflowSet mount 998 988 5000
Panel mount 1362 1366 1000
Persona mount 823 810 1000
Pivot mount 1344 1345 1000
PrimaryButtonCompat mount 1221 1258 5000
Rating mount 7282 7196 5000
SearchBox mount 1255 1269 5000
Shimmer mount 2497 2525 5000
Slider mount 1853 1901 5000
SpinButton mount 4828 4735 5000
Spinner mount 395 403 5000
SplitButtonCompat mount 2977 3029 5000
Stack mount 476 483 5000
StackWithIntrinsicChildren mount 1436 1444 5000
StackWithTextChildren mount 4276 4249 5000
SwatchColorPicker mount 9899 9817 5000
Tabs mount 1316 1354 1000
TagPicker mount 2712 2697 5000
TeachingBubble mount 11163 11187 5000
Text mount 403 395 5000
TextField mount 1314 1344 5000
ThemeProvider mount 2059 2071 5000
ThemeProvider virtual-rerender 611 616 5000
Toggle mount 761 757 5000
button mount 658 659 5000
buttonNative mount 112 102 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.16 0.49 0.33:1 2000 329
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 555
🔧 Checkbox.Fluent 0.61 0.33 1.85:1 1000 613
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 799
🔧 Dropdown.Fluent 2.97 0.39 7.62:1 1000 2970
🔧 Icon.Fluent 0.13 0.06 2.17:1 5000 669
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 377
🔧 Slider.Fluent 1.55 0.42 3.69:1 1000 1545
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 358
🦄 Tooltip.Fluent 0.11 0.86 0.13:1 5000 566

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 360 341 1.06:1
TreeWith60ListItems.default 174 164 1.06:1
ButtonSlotsPerf.default 594 564 1.05:1
LayoutMinimalPerf.default 427 408 1.05:1
PortalMinimalPerf.default 170 162 1.05:1
SegmentMinimalPerf.default 369 353 1.05:1
AvatarMinimalPerf.default 203 196 1.04:1
RefMinimalPerf.default 245 236 1.04:1
TableMinimalPerf.default 428 413 1.04:1
Dialog.Fluent 799 768 1.04:1
AttachmentSlotsPerf.default 1197 1161 1.03:1
BoxMinimalPerf.default 372 362 1.03:1
DividerMinimalPerf.default 375 365 1.03:1
FormMinimalPerf.default 416 405 1.03:1
InputMinimalPerf.default 1278 1240 1.03:1
ListNestedPerf.default 565 551 1.03:1
SliderMinimalPerf.default 1577 1536 1.03:1
SplitButtonMinimalPerf.default 3734 3642 1.03:1
Tooltip.Fluent 566 549 1.03:1
CardMinimalPerf.default 549 537 1.02:1
ChatWithPopoverPerf.default 457 446 1.02:1
DropdownManyItemsPerf.default 712 698 1.02:1
LabelMinimalPerf.default 418 409 1.02:1
MenuButtonMinimalPerf.default 1548 1523 1.02:1
StatusMinimalPerf.default 715 699 1.02:1
IconMinimalPerf.default 677 666 1.02:1
TextMinimalPerf.default 366 359 1.02:1
TextAreaMinimalPerf.default 487 479 1.02:1
ToolbarMinimalPerf.default 932 917 1.02:1
Avatar.Fluent 329 324 1.02:1
AnimationMinimalPerf.default 408 404 1.01:1
ButtonOverridesMissPerf.default 1656 1637 1.01:1
CheckboxMinimalPerf.default 2799 2763 1.01:1
DropdownMinimalPerf.default 2900 2882 1.01:1
ListCommonPerf.default 635 631 1.01:1
ReactionMinimalPerf.default 406 400 1.01:1
SkeletonMinimalPerf.default 366 364 1.01:1
VideoMinimalPerf.default 611 607 1.01:1
Checkbox.Fluent 613 607 1.01:1
Dropdown.Fluent 2970 2947 1.01:1
Slider.Fluent 1545 1526 1.01:1
Text.Fluent 358 354 1.01:1
AlertMinimalPerf.default 294 295 1:1
CarouselMinimalPerf.default 462 460 1:1
ChatMinimalPerf.default 616 616 1:1
DialogMinimalPerf.default 774 774 1:1
EmbedMinimalPerf.default 4013 4028 1:1
HeaderSlotsPerf.default 768 771 1:1
LoaderMinimalPerf.default 710 710 1:1
ProviderMergeThemesPerf.default 1574 1571 1:1
ProviderMinimalPerf.default 929 925 1:1
CustomToolbarPrototype.default 3610 3621 1:1
TreeMinimalPerf.default 766 766 1:1
Button.Fluent 555 555 1:1
Icon.Fluent 669 672 1:1
ButtonUseCssPerf.default 782 790 0.99:1
DatepickerMinimalPerf.default 44374 44836 0.99:1
FlexMinimalPerf.default 299 301 0.99:1
ItemLayoutMinimalPerf.default 1184 1193 0.99:1
MenuMinimalPerf.default 842 852 0.99:1
PopupMinimalPerf.default 690 695 0.99:1
RadioGroupMinimalPerf.default 432 438 0.99:1
TableManyItemsPerf.default 1950 1969 0.99:1
TooltipMinimalPerf.default 792 796 0.99:1
Image.Fluent 377 380 0.99:1
ButtonUseCssNestingPerf.default 1035 1052 0.98:1
ImageMinimalPerf.default 389 397 0.98:1
ListMinimalPerf.default 467 478 0.98:1
GridMinimalPerf.default 335 347 0.97:1
HeaderMinimalPerf.default 361 373 0.97:1
ButtonMinimalPerf.default 177 185 0.96:1
ListWith60ListItems.default 594 617 0.96:1
AttachmentMinimalPerf.default 163 171 0.95:1
RosterPerf.default 1145 1199 0.95:1
AccordionMinimalPerf.default 151 161 0.94:1

@size-auditor
Copy link

size-auditor bot commented Jan 15, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: d9da9b1d25a15cfa2de3ee8c6a9aa9426f86763b (build)

khmakoto
khmakoto requested changes Jan 19, 2021
View reviewed changes
Copy link
Member

@khmakoto khmakoto left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Thanks for doing this! I have a suggestion below that I think we should make before this one can go in.

@andrefcdias andrefcdias requested a review from khmakoto January 20, 2021 12:05
@andrefcdias
fix(react-examples): Add title prop to icons in OverflowSet example
45494ff 
(microsoftdesign/fluentui#10284)
@andrefcdias
Replace title prop for TooltipHost
6694416
@andrefcdias
fix(react-examples): Change item names to match icon in OverflowSet e…
b05f3cc 
…xample (#16494)

- [x] Addresses an existing issue: Fixes microsoftdesign/fluentui#10282
- [x] Include a change request file using `$ yarn change`: No change files are needed

Add descriptive names for the icons used in the OverflowSet Vertical example.
Removed unused `icon` props for the `overflowItems`
@andrefcdias
Update snapshots
38073c6
@ecraig12345 ecraig12345 changed the title fix(react-examples): Add title prop to icons in OverflowSet example fix(react-examples): Add tooltip to icons in OverflowSet example Jan 21, 2021
ecraig12345
ecraig12345 reviewed Jan 21, 2021
View reviewed changes
Copy link
Member

@ecraig12345 ecraig12345 left a comment •
edited
Loading

Choose a reason for hiding this comment

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

This is on the right track once the snapshot issues are fixed, but I have a few more suggestions.

@andrefcdias
Copy link
Contributor Author

Applied suggestions.

@andrefcdias andrefcdias merged commit b2b68a1 into microsoft:master Jan 26, 2021
@andrefcdias andrefcdias mentioned this pull request Jan 27, 2021
Merged
10 tasks
msft-fluent-ui-bot pushed a commit that referenced this pull request Feb 2, 2021
@andrefcdias
Batch cherry-pick of react-example fixes (#16677)
e404ed7 
#### Pull request checklist

- [x] Include a change request file using `$ yarn change`

#### Description of changes

Aggregate cherry-picking for all my contributions for the `react-examples` package

#### Focus areas to test

- [x] #16497
- [x] #16496
- [x] #16494
- [x] #16479
- [x] #16430
- [x] #16475
- [x] #16463
- [x] #16495
- [x] #16481
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khmakoto khmakoto khmakoto approved these changes

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

Assignees

@layershifter layershifter

Labels
Area: Website
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@andrefcdias @fabricteam @ecraig12345 @khmakoto @layershifter @msft-fluent-ui-bot