Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

fix(Popup|Tooltip): fix wrong positioning of pointing beak on content edges #2364

Merged
merged 8 commits into from
Feb 21, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Feb 17, 2020

Fixes #2365.

This PR:

  • fixes reported issues via margins to have a gap between pointer and content edges
  • adds Screener tests to catch potential regressions

@layershifter layershifter added 🚧 WIP 🧰 fix Introduces fix for broken behavior. labels Feb 17, 2020
@layershifter layershifter changed the title fix(Popup): fix issues with pointer sizes fix(Popup|Tooltip): fix issues with pointer sizes Feb 17, 2020
@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Feb 17, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.51 0.49 1.04:1 2000 1021
🦄 Button.Fluent 0.11 0.22 0.5:1 1000 114
🔧 Checkbox.Fluent 0.8 0.29 2.76:1 1000 802
🔧 Dialog.Fluent 0.31 0.17 1.82:1 5000 1550
🔧 Dropdown.Fluent 3.37 0.41 8.22:1 1000 3371
🔧 Icon.Fluent 0.12 0.03 4:1 5000 597
🦄 Image.Fluent 0.05 0.08 0.63:1 5000 234
🔧 Slider.Fluent 1.38 0.3 4.6:1 1000 1378
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 270
🦄 Tooltip.Fluent 0.09 17.55 0.01:1 5000 440

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
StatusMinimalPerf.default 259 222 1.17:1
ReactionMinimalPerf.default 2599 2310 1.13:1
RefMinimalPerf.default 162 145 1.12:1
TextMinimalPerf.default 278 249 1.12:1
ButtonMinimalPerf.default 119 108 1.1:1
HeaderMinimalPerf.default 424 384 1.1:1
ProviderMinimalPerf.default 694 634 1.09:1
ImageMinimalPerf.default 230 213 1.08:1
ListNestedPerf.default 762 705 1.08:1
AlertMinimalPerf.default 543 508 1.07:1
VideoMinimalPerf.default 689 643 1.07:1
Checkbox.Fluent 802 748 1.07:1
Image.Fluent 234 218 1.07:1
Text.Fluent 270 252 1.07:1
BoxMinimalPerf.default 228 216 1.06:1
IconMinimalPerf.default 280 265 1.06:1
TreeWith60ListItems.default 266 251 1.06:1
AnimationMinimalPerf.default 464 448 1.04:1
GridMinimalPerf.default 728 701 1.04:1
MenuButtonMinimalPerf.default 1465 1405 1.04:1
Slider.Fluent 1378 1330 1.04:1
Tooltip.Fluent 440 422 1.04:1
CarouselMinimalPerf.default 1776 1727 1.03:1
ChatMinimalPerf.default 392 381 1.03:1
ChatWithPopoverPerf.default 486 471 1.03:1
FlexMinimalPerf.default 327 319 1.03:1
HierarchicalTreeMinimalPerf.default 728 710 1.03:1
TextAreaMinimalPerf.default 3032 2956 1.03:1
ChatDuplicateMessagesPerf.default 318 313 1.02:1
LoaderMinimalPerf.default 880 861 1.02:1
PortalMinimalPerf.default 208 204 1.02:1
TreeMinimalPerf.default 853 836 1.02:1
DropdownMinimalPerf.default 3076 3040 1.01:1
TooltipMinimalPerf.default 641 636 1.01:1
Icon.Fluent 597 593 1.01:1
AvatarMinimalPerf.default 458 460 1:1
DialogMinimalPerf.default 1441 1435 1:1
EmbedMinimalPerf.default 5458 5432 1:1
ListMinimalPerf.default 335 335 1:1
AttachmentMinimalPerf.default 797 807 0.99:1
InputMinimalPerf.default 837 856 0.98:1
ItemLayoutMinimalPerf.default 1534 1558 0.98:1
RadioGroupMinimalPerf.default 423 432 0.98:1
CheckboxMinimalPerf.default 3264 3359 0.97:1
FormMinimalPerf.default 654 675 0.97:1
ListCommonPerf.default 790 811 0.97:1
SliderMinimalPerf.default 1324 1358 0.97:1
ButtonSlotsPerf.default 532 554 0.96:1
DropdownManyItemsPerf.default 377 391 0.96:1
HeaderSlotsPerf.default 1164 1209 0.96:1
ListWith60ListItems.default 173 180 0.96:1
PopupMinimalPerf.default 320 332 0.96:1
SegmentMinimalPerf.default 1130 1178 0.96:1
TableMinimalPerf.default 521 544 0.96:1
Button.Fluent 114 120 0.95:1
Dialog.Fluent 1550 1636 0.95:1
Dropdown.Fluent 3371 3554 0.95:1
AttachmentSlotsPerf.default 2956 3155 0.94:1
MenuMinimalPerf.default 1798 1915 0.94:1
CustomToolbarPrototype.default 3354 3558 0.94:1
DividerMinimalPerf.default 768 824 0.93:1
SplitButtonMinimalPerf.default 10943 11706 0.93:1
Avatar.Fluent 1021 1097 0.93:1
ToolbarMinimalPerf.default 775 845 0.92:1
ProviderMergeThemesPerf.default 1014 1110 0.91:1
LabelMinimalPerf.default 759 873 0.87:1
LayoutMinimalPerf.default 495 579 0.85:1
AccordionMinimalPerf.default 179 212 0.84:1

Generated by 🚫 dangerJS

…com/stardust-ui/react into fix/pointer-min-gaps

� Conflicts:
�	packages/react/src/utils/positioner/Popper.tsx
transform: isSvg ? `rotate(${rtl ? 180 : 0}deg)` : 'rotate(135deg)',
},
bottom: {
top: `-${pointerOffset}`,
marginLeft: pointerGap,
marginRight: pointerGap,
Copy link
Member Author

Choose a reason for hiding this comment

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

pointerGap as variable name don't look intuitive, but I don't have better ideas

@layershifter layershifter changed the title fix(Popup|Tooltip): fix issues with pointer sizes fix(Popup|Tooltip): fix wrong positioning of pointing beak on content edges Feb 17, 2020
Copy link
Collaborator

@silviuaavram silviuaavram left a comment

Choose a reason for hiding this comment

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

Just had one question

position="before"
trigger={<Box styles={{ border: '2px solid green' }}>X</Box>}
/>
</Grid>
Copy link
Collaborator

Choose a reason for hiding this comment

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

no need for position="after" examples?

Copy link
Member Author

Choose a reason for hiding this comment

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

Reasonable, added 👍

@layershifter layershifter merged commit 760d69b into master Feb 21, 2020
@layershifter layershifter deleted the fix/pointer-min-gaps branch February 21, 2020 11:01
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🧰 fix Introduces fix for broken behavior. 🚀 ready for review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Popup: pointing beak is broken on edges
3 participants