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.

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

Fix tooltip arrow's high contrast border in RTL #21354

Merged

Conversation

behowell
Copy link
Contributor

@behowell behowell commented Jan 20, 2022

Current Behavior

The high contrast arrow border for tooltip is wrong in RTL:
image

New Behavior

Don't flip the border's side for RTL, since RTL is already handled by popper.

image

@behowell behowell requested a review from a team as a code owner January 20, 2022 12:24
@behowell behowell self-assigned this Jan 20, 2022
@behowell behowell requested review from a team and GeoffCoxMSFT and removed request for a team and GeoffCoxMSFT January 20, 2022 12:24
@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 1948c5d:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
165.872 kB
46.984 kB
165.72 kB
46.951 kB
-152 B
-33 B
react-menu
Menu (including children components)
102.919 kB
31.787 kB
102.961 kB
31.798 kB
42 B
11 B
react-menu
Menu (including selectable components)
105.17 kB
32.144 kB
105.212 kB
32.153 kB
42 B
9 B
react-popover
Popover
95.459 kB
29.031 kB
95.265 kB
28.98 kB
-194 B
-51 B
react-tooltip
Tooltip
45.167 kB
15.671 kB
44.973 kB
15.628 kB
-194 B
-43 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: FluentProvider & webLightTheme
32.297 kB
10.592 kB
react-positioning
usePopper
22.808 kB
7.935 kB
🤖 This report was generated against 7c50f4d58b4ba834f667fd69ddee2701ad0745fb

@size-auditor
Copy link

size-auditor bot commented Jan 20, 2022

Asset size changes

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

Baseline commit: 4f22b6dad04ea37eb53e4af23c73d2de4db512a2 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 772 720 5000
BaseButton mount 799 787 5000
Breadcrumb mount 2311 2094 1000
ButtonNext mount 411 431 5000
Checkbox mount 1337 1346 5000
CheckboxBase mount 1158 1138 5000
ChoiceGroup mount 4087 4045 5000
ComboBox mount 854 799 1000
CommandBar mount 8779 9173 1000
ContextualMenu mount 14478 14517 1000
DefaultButton mount 981 1003 5000
DetailsRow mount 3339 3267 5000
DetailsRowFast mount 3196 3076 5000
DetailsRowNoStyles mount 3094 2932 5000
Dialog mount 2182 2263 1000
DocumentCardTitle mount 151 155 1000
Dropdown mount 2789 2783 5000
FluentProviderNext mount 1588 1578 5000
FluentProviderWithTheme mount 136 132 10
FluentProviderWithTheme virtual-rerender 99 103 10
FluentProviderWithTheme virtual-rerender-with-unmount 173 180 10
FocusTrapZone mount 1592 1595 5000
FocusZone mount 1568 1514 5000
IconButton mount 1540 1547 5000
Label mount 294 321 5000
Layer mount 2506 2525 5000
Link mount 420 418 5000
MakeStyles mount 1402 1408 50000
MenuButton mount 1282 1247 5000
MessageBar mount 1747 1727 5000
Nav mount 2825 2857 1000
OverflowSet mount 973 926 5000
Panel mount 2179 2016 1000
Persona mount 757 741 1000
Pivot mount 1222 1261 1000
PrimaryButton mount 1140 1130 5000
Rating mount 6624 6467 5000
SearchBox mount 1171 1202 5000
Shimmer mount 2142 2229 5000
Slider mount 1717 1653 5000
SpinButton mount 4360 4223 5000
Spinner mount 400 397 5000
SplitButton mount 2735 2697 5000
Stack mount 478 481 5000
StackWithIntrinsicChildren mount 1989 2008 5000
StackWithTextChildren mount 4513 4492 5000
SwatchColorPicker mount 9779 9828 5000
TagPicker mount 2241 2217 5000
TeachingBubble mount 11322 11086 5000
Text mount 388 383 5000
TextField mount 1199 1190 5000
ThemeProvider mount 964 1045 5000
ThemeProvider virtual-rerender 536 549 5000
ThemeProvider virtual-rerender-with-unmount 1609 1496 5000
Toggle mount 728 723 5000
buttonNative mount 129 132 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 148 132 1.12:1
HeaderMinimalPerf.default 312 283 1.1:1
PortalMinimalPerf.default 160 150 1.07:1
SkeletonMinimalPerf.default 309 289 1.07:1
TreeWith60ListItems.default 158 149 1.06:1
VideoMinimalPerf.default 555 523 1.06:1
ButtonMinimalPerf.default 155 148 1.05:1
DividerMinimalPerf.default 320 305 1.05:1
LabelMinimalPerf.default 338 322 1.05:1
ProviderMinimalPerf.default 993 948 1.05:1
AvatarMinimalPerf.default 170 164 1.04:1
RadioGroupMinimalPerf.default 391 376 1.04:1
RefMinimalPerf.default 206 199 1.04:1
AttachmentSlotsPerf.default 913 888 1.03:1
CardMinimalPerf.default 484 469 1.03:1
ChatMinimalPerf.default 637 618 1.03:1
DatepickerMinimalPerf.default 4723 4602 1.03:1
LayoutMinimalPerf.default 319 311 1.03:1
ListCommonPerf.default 530 514 1.03:1
ListNestedPerf.default 460 448 1.03:1
MenuButtonMinimalPerf.default 1398 1361 1.03:1
ReactionMinimalPerf.default 330 321 1.03:1
TextMinimalPerf.default 303 294 1.03:1
CustomToolbarPrototype.default 3440 3340 1.03:1
CarouselMinimalPerf.default 405 397 1.02:1
ChatDuplicateMessagesPerf.default 263 259 1.02:1
DialogMinimalPerf.default 655 643 1.02:1
HeaderSlotsPerf.default 657 643 1.02:1
LoaderMinimalPerf.default 587 577 1.02:1
SliderMinimalPerf.default 1433 1409 1.02:1
StatusMinimalPerf.default 591 579 1.02:1
ToolbarMinimalPerf.default 779 765 1.02:1
TooltipMinimalPerf.default 883 864 1.02:1
ButtonOverridesMissPerf.default 1446 1432 1.01:1
ButtonSlotsPerf.default 470 466 1.01:1
GridMinimalPerf.default 287 284 1.01:1
ItemLayoutMinimalPerf.default 1007 998 1.01:1
ListMinimalPerf.default 443 437 1.01:1
RosterPerf.default 1014 1001 1.01:1
PopupMinimalPerf.default 527 521 1.01:1
TableMinimalPerf.default 346 341 1.01:1
TreeMinimalPerf.default 673 666 1.01:1
BoxMinimalPerf.default 290 291 1:1
CheckboxMinimalPerf.default 2282 2271 1:1
DropdownMinimalPerf.default 2559 2557 1:1
EmbedMinimalPerf.default 3423 3432 1:1
FormMinimalPerf.default 352 352 1:1
InputMinimalPerf.default 1092 1089 1:1
ProviderMergeThemesPerf.default 1463 1457 1:1
TextAreaMinimalPerf.default 419 421 1:1
AlertMinimalPerf.default 232 235 0.99:1
ChatWithPopoverPerf.default 307 311 0.99:1
DropdownManyItemsPerf.default 567 571 0.99:1
ImageMinimalPerf.default 314 318 0.99:1
TableManyItemsPerf.default 1595 1614 0.99:1
MenuMinimalPerf.default 692 705 0.98:1
IconMinimalPerf.default 520 532 0.98:1
ListWith60ListItems.default 533 549 0.97:1
SegmentMinimalPerf.default 290 299 0.97:1
SplitButtonMinimalPerf.default 3576 3684 0.97:1
AnimationMinimalPerf.default 433 453 0.96:1
AccordionMinimalPerf.default 130 139 0.94:1
FlexMinimalPerf.default 242 259 0.93:1

@behowell behowell merged commit 2e34c02 into microsoft:master Jan 20, 2022
@behowell behowell deleted the tooltip-fix-high-contrast-rtl-arrow branch January 20, 2022 20:45
@behowell behowell mentioned this pull request Feb 7, 2022
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants