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

feat: add tooltip and anchor region web component #16399

Merged
merged 13 commits into from
Mar 18, 2021
Merged

feat: add tooltip and anchor region web component #16399

merged 13 commits into from
Mar 18, 2021

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Jan 6, 2021 •
edited
Loading

Pull request checklist

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

Description of changes

Added index, styles, stories and fixture files for tooltip and anchor-region.
Using the ::after selector, I added a triangle(tail) to the tooltip, to match fluentui design.

Focus areas to test

image

image

@khamudom khamudom requested a review from chrisdholt as a code owner January 6, 2021 23:13
@khamudom khamudom force-pushed the users/khamu/add-tooltip branch from 6468528 to 95d1c98 Compare January 6, 2021 23:42
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 6, 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 2ae4779:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 7, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1062 1075 5000
BaseButton mount 832 839 5000
Breadcrumb mount 40760 40792 5000
ButtonNext mount 1190 1161 5000
Checkbox mount 1428 1417 5000
CheckboxBase mount 1217 1225 5000
ChoiceGroup mount 4367 4405 5000
ComboBox mount 914 898 1000
CommandBar mount 9569 9559 1000
ContextualMenu mount 5742 5719 1000
DefaultButton mount 1080 1061 5000
DetailsRow mount 3420 3392 5000
DetailsRowFast mount 3370 3455 5000
DetailsRowNoStyles mount 3271 3214 5000
Dialog mount 1368 1397 1000
DocumentCardTitle mount 1737 1745 1000
Dropdown mount 3081 3073 5000
FocusTrapZone mount 1715 1699 5000
FocusZone mount 1796 1736 5000
IconButton mount 1606 1647 5000
Label mount 320 320 5000
Layer mount 1710 1667 5000
Link mount 441 441 5000
MakeStyles mount 1835 1833 50000
MenuButton mount 1359 1365 5000
MessageBar mount 1877 1975 5000
Nav mount 3110 3053 1000
OverflowSet mount 965 978 5000
Panel mount 1343 1352 1000
Persona mount 789 782 1000
Pivot mount 1361 1319 1000
PrimaryButton mount 1232 1207 5000
Rating mount 7134 7130 5000
SearchBox mount 1220 1240 5000
Shimmer mount 2402 2307 5000
Slider mount 1835 1837 5000
SpinButton mount 4753 4650 5000
Spinner mount 410 396 5000
SplitButton mount 3024 2934 5000
Stack mount 475 473 5000
StackWithIntrinsicChildren mount 1553 1479 5000
StackWithTextChildren mount 4480 4325 5000
SwatchColorPicker mount 9677 10114 5000
Tabs mount 1344 1336 1000
TagPicker mount 2667 2676 5000
TeachingBubble mount 11036 10990 5000
Text mount 405 390 5000
TextField mount 1299 1277 5000
ThemeProvider mount 1101 1118 5000
ThemeProvider virtual-rerender 563 564 5000
ThemeProviderNext mount 15525 15347 5000
Toggle mount 741 761 5000
buttonNative mount 110 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.45 0.38:1 2000 336
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 539
🔧 Checkbox.Fluent 0.63 0.32 1.97:1 1000 626
🎯 Dialog.Fluent 0.15 0.2 0.75:1 5000 760
🔧 Dropdown.Fluent 2.95 0.38 7.76:1 1000 2954
🔧 Icon.Fluent 0.13 0.06 2.17:1 5000 648
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 388
🔧 Slider.Fluent 1.54 0.43 3.58:1 1000 1544
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 348
🦄 Tooltip.Fluent 0.13 0.84 0.15:1 5000 668

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 175 157 1.11:1
ChatDuplicateMessagesPerf.default 292 273 1.07:1
LayoutMinimalPerf.default 412 388 1.06:1
Icon.Fluent 648 614 1.06:1
FlexMinimalPerf.default 308 294 1.05:1
TextAreaMinimalPerf.default 487 466 1.05:1
Checkbox.Fluent 626 598 1.05:1
AvatarMinimalPerf.default 205 198 1.04:1
CardMinimalPerf.default 558 537 1.04:1
TreeWith60ListItems.default 191 183 1.04:1
AccordionMinimalPerf.default 162 157 1.03:1
AnimationMinimalPerf.default 414 402 1.03:1
CarouselMinimalPerf.default 487 473 1.03:1
ListNestedPerf.default 559 543 1.03:1
RefMinimalPerf.default 232 226 1.03:1
Avatar.Fluent 336 325 1.03:1
ButtonMinimalPerf.default 179 175 1.02:1
ButtonOverridesMissPerf.default 1654 1629 1.02:1
ButtonUseCssPerf.default 808 789 1.02:1
DropdownMinimalPerf.default 3014 2957 1.02:1
LabelMinimalPerf.default 415 407 1.02:1
ListMinimalPerf.default 492 483 1.02:1
LoaderMinimalPerf.default 715 701 1.02:1
MenuMinimalPerf.default 864 846 1.02:1
SliderMinimalPerf.default 1565 1531 1.02:1
StatusMinimalPerf.default 703 690 1.02:1
TableManyItemsPerf.default 1935 1902 1.02:1
TooltipMinimalPerf.default 924 902 1.02:1
VideoMinimalPerf.default 613 600 1.02:1
AttachmentMinimalPerf.default 167 165 1.01:1
ChatWithPopoverPerf.default 369 365 1.01:1
DialogMinimalPerf.default 757 752 1.01:1
HeaderMinimalPerf.default 370 368 1.01:1
ProviderMinimalPerf.default 937 929 1.01:1
SegmentMinimalPerf.default 354 352 1.01:1
SplitButtonMinimalPerf.default 3652 3610 1.01:1
TextMinimalPerf.default 348 344 1.01:1
Text.Fluent 348 344 1.01:1
AlertMinimalPerf.default 299 299 1:1
BoxMinimalPerf.default 350 349 1:1
ButtonSlotsPerf.default 550 552 1:1
ButtonUseCssNestingPerf.default 1038 1035 1:1
ChatMinimalPerf.default 602 603 1:1
CheckboxMinimalPerf.default 2678 2685 1:1
DatepickerMinimalPerf.default 42540 42638 1:1
EmbedMinimalPerf.default 4077 4065 1:1
ImageMinimalPerf.default 384 384 1:1
ItemLayoutMinimalPerf.default 1174 1171 1:1
ListWith60ListItems.default 608 611 1:1
RosterPerf.default 1124 1122 1:1
PopupMinimalPerf.default 677 680 1:1
ProviderMergeThemesPerf.default 1560 1565 1:1
SkeletonMinimalPerf.default 355 355 1:1
CustomToolbarPrototype.default 3628 3622 1:1
Dialog.Fluent 760 761 1:1
Tooltip.Fluent 668 666 1:1
DropdownManyItemsPerf.default 695 699 0.99:1
HeaderSlotsPerf.default 755 762 0.99:1
InputMinimalPerf.default 1255 1274 0.99:1
MenuButtonMinimalPerf.default 1517 1525 0.99:1
ReactionMinimalPerf.default 384 389 0.99:1
IconMinimalPerf.default 641 650 0.99:1
TableMinimalPerf.default 402 406 0.99:1
TreeMinimalPerf.default 756 760 0.99:1
Button.Fluent 539 544 0.99:1
Dropdown.Fluent 2954 2975 0.99:1
DividerMinimalPerf.default 361 367 0.98:1
FormMinimalPerf.default 408 415 0.98:1
ListCommonPerf.default 644 659 0.98:1
Slider.Fluent 1544 1569 0.98:1
AttachmentSlotsPerf.default 1143 1182 0.97:1
RadioGroupMinimalPerf.default 418 433 0.97:1
ToolbarMinimalPerf.default 908 936 0.97:1
Image.Fluent 388 398 0.97:1
GridMinimalPerf.default 340 361 0.94:1

@size-auditor
Copy link

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

Asset size changes

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

Baseline commit: 165259181dd79866dc7ae5fa57c10a0f209d668f (build)

SethDonohue
SethDonohue approved these changes Jan 7, 2021
View reviewed changes
Copy link
Contributor

@SethDonohue SethDonohue left a comment

Choose a reason for hiding this comment

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

smoked, looks good in HC too

@khamudom khamudom force-pushed the users/khamu/add-tooltip branch from be7a5b4 to 17365e8 Compare January 25, 2021 17:12
scomea
scomea approved these changes Jan 25, 2021
View reviewed changes
Copy link

@scomea scomea left a comment

Choose a reason for hiding this comment

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

Smoked, seems good.

@khamudom khamudom force-pushed the users/khamu/add-tooltip branch from 4b1fd3d to dc0169c Compare February 8, 2021 19:33
@khamudom khamudom force-pushed the users/khamu/add-tooltip branch from dc0169c to 26cfc88 Compare March 18, 2021 17:33
ecraig12345
ecraig12345 approved these changes Mar 18, 2021
View reviewed changes
Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Approved for package.json and yarn.lock changes (@chrisdholt should approve the rest)

chrisdholt
chrisdholt approved these changes Mar 18, 2021
View reviewed changes
Copy link
Member

@chrisdholt chrisdholt left a comment

Choose a reason for hiding this comment

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

Thanks @khamudom!

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

🎉@fluentui/web-components@v0.17.0 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
@khamudom @joshualamusga1
feat: add tooltip and anchor region web component (microsoft#16399)
700b1d3 
* add tail on top and bottom tooltip

* update fixture, storybook and styles for tooltip and anchor region

* Change files

* fixed import order in stories

* export anchor region and removed TODO comment

* update anchor region example

* updated the fixture base file to use fluent components

* combined selector creating the the bubble tail

* generate and add api report

* added elevation

* update background and color to use neutral contrast recipe

* update FAST to Fluent and bump fast-foundation version to 1.16.1

* revert version and opt into semver on fast-foundation
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@khamudom @miroslavstastny
feat: add tooltip and anchor region web component (microsoft#16399)
7eb32f5 
* add tail on top and bottom tooltip

* update fixture, storybook and styles for tooltip and anchor region

* Change files

* fixed import order in stories

* export anchor region and removed TODO comment

* update anchor region example

* updated the fixture base file to use fluent components

* combined selector creating the the bubble tail

* generate and add api report

* added elevation

* update background and color to use neutral contrast recipe

* update FAST to Fluent and bump fast-foundation version to 1.16.1

* revert version and opt into semver on fast-foundation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@SethDonohue SethDonohue SethDonohue approved these changes

@chrisdholt chrisdholt chrisdholt approved these changes

@scomea scomea scomea approved these changes

@ecraig12345 ecraig12345 ecraig12345 approved these changes

@EisenbergEffect EisenbergEffect Awaiting requested review from EisenbergEffect

@Hotell Hotell Awaiting requested review from Hotell

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
8 participants
@khamudom @fabricteam @msft-fluent-ui-bot @ecraig12345 @scomea @chrisdholt @SethDonohue @layershifter