search

microsoft / fluent-ui-react

An ecosystem for building highly customizable enterprise class user interfaces.
https://aka.ms/fluent-ui
MIT License
433 stars 54 forks source link

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

Closed layershifter closed 4 years ago

layershifter commented 4 years ago

Fixes #2365.

This PR:

DustyTheBot commented 4 years ago

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

Generated by :no_entry_sign: dangerJS