X Tutup
The Wayback Machine - https://web.archive.org/web/20230327235655/https://github.com/microsoft/fluentui/pull/15941
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

Jump to bottom

Fix Callout example targets and simplify styling #15941

Merged
merged 7 commits into from Nov 24, 2020
Merged

Fix Callout example targets and simplify styling #15941

merged 7 commits into from Nov 24, 2020

Conversation

ecraig12345
Copy link
Member

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

While investigating Callout screener issues, we noticed that the examples on the doc site were not targeting the correct element due to an overly general selector. Fix that issue and simplify some of the styling of the example callout contents.

I also started looking at the Callout docs while trying to understand some things about the examples and fixed a couple minor issues there, as well as adding an explicit interface for onRestoreFocus's parameters since the signature is reused several places.

One other issue I noticed and fixed (while seeing if I could use ThemeProvider in an example) was a missing bracket in a code example in the react-theme-provider readme.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 14, 2020 •
edited

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 28ba25e:

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

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 847 842 5000
BaseButtonCompat mount 913 906 5000
Breadcrumb mount 44651 44811 5000
Checkbox mount 1494 1548 5000
CheckboxBase mount 1276 1291 5000
ChoiceGroup mount 4791 4852 5000
ComboBox mount 991 1057 1000
CommandBar mount 10453 10436 1000
ContextualMenu mount 6332 6372 1000
DefaultButtonCompat mount 1132 1105 5000
DetailsRow mount 3640 3760 5000
DetailsRowFast mount 3697 3725 5000
DetailsRowNoStyles mount 3474 3545 5000
Dialog mount 1485 1426 1000
DocumentCardTitle mount 1879 1889 1000
Dropdown mount 3360 3392 5000
FocusTrapZone mount 1812 1830 5000
FocusZone mount 1878 1881 5000
IconButtonCompat mount 1747 1769 5000
Label mount 330 339 5000
Layer mount 1801 1823 5000
Link mount 459 486 5000
MenuButtonCompat mount 1467 1488 5000
MessageBar mount 2048 2058 5000
Nav mount 3285 3267 1000
OverflowSet mount 1072 1062 5000
Panel mount 1434 1447 1000
Persona mount 878 873 1000
Pivot mount 1399 1414 1000
PrimaryButtonCompat mount 1310 1301 5000
Rating mount 7568 7543 5000
SearchBox mount 1295 1325 5000
Shimmer mount 2497 2553 5000
Slider mount 1933 1902 5000
SpinButton mount 5044 5023 5000
Spinner mount 427 439 5000
SplitButtonCompat mount 3218 3208 5000
Stack mount 521 505 5000
StackWithIntrinsicChildren mount 1487 1515 5000
StackWithTextChildren mount 4465 4537 5000
SwatchColorPicker mount 10310 10256 5000
Tabs mount 1427 1406 1000
TagPicker mount 2778 2859 5000
TeachingBubble mount 11684 11743 5000
Text mount 420 400 5000
TextField mount 1411 1400 5000
ThemeProvider mount 2223 2198 5000
ThemeProvider virtual-rerender 652 654 5000
Toggle mount 782 802 5000
button mount 661 674 5000
buttonNative mount 115 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.52 0.87:1 2000 909
🦄 Button.Fluent 0.12 0.23 0.52:1 5000 587
🔧 Checkbox.Fluent 0.66 0.35 1.89:1 1000 656
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 810
🔧 Dropdown.Fluent 2.98 0.4 7.45:1 1000 2983
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 722
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 415
🔧 Slider.Fluent 1.61 0.44 3.66:1 1000 1613
🔧 Text.Fluent 0.08 0.04 2:1 5000 381
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 586

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TextAreaMinimalPerf.default 543 487 1.11:1
TreeMinimalPerf.default 945 879 1.08:1
DropdownManyItemsPerf.default 785 740 1.06:1
HeaderMinimalPerf.default 408 385 1.06:1
LayoutMinimalPerf.default 445 420 1.06:1
ImageMinimalPerf.default 404 385 1.05:1
VideoMinimalPerf.default 677 644 1.05:1
RefMinimalPerf.default 258 247 1.04:1
Avatar.Fluent 909 878 1.04:1
Image.Fluent 415 400 1.04:1
BoxMinimalPerf.default 392 379 1.03:1
ChatDuplicateMessagesPerf.default 438 425 1.03:1
FlexMinimalPerf.default 321 312 1.03:1
ItemLayoutMinimalPerf.default 1338 1296 1.03:1
ListNestedPerf.default 602 585 1.03:1
ListWith60ListItems.default 975 947 1.03:1
MenuMinimalPerf.default 927 898 1.03:1
PortalMinimalPerf.default 173 168 1.03:1
RadioGroupMinimalPerf.default 464 450 1.03:1
ReactionMinimalPerf.default 438 424 1.03:1
SliderMinimalPerf.default 1651 1600 1.03:1
TextMinimalPerf.default 381 371 1.03:1
TooltipMinimalPerf.default 848 825 1.03:1
Text.Fluent 381 370 1.03:1
ButtonSlotsPerf.default 620 606 1.02:1
CardMinimalPerf.default 586 573 1.02:1
CheckboxMinimalPerf.default 2928 2869 1.02:1
EmbedMinimalPerf.default 4270 4191 1.02:1
FormMinimalPerf.default 439 432 1.02:1
GridMinimalPerf.default 380 371 1.02:1
LoaderMinimalPerf.default 760 748 1.02:1
StatusMinimalPerf.default 749 735 1.02:1
TableManyItemsPerf.default 2242 2207 1.02:1
TreeWith60ListItems.default 214 210 1.02:1
Tooltip.Fluent 586 574 1.02:1
AvatarMinimalPerf.default 485 478 1.01:1
CarouselMinimalPerf.default 470 465 1.01:1
DialogMinimalPerf.default 816 809 1.01:1
DropdownMinimalPerf.default 3021 2984 1.01:1
InputMinimalPerf.default 1319 1306 1.01:1
MenuButtonMinimalPerf.default 1621 1599 1.01:1
SegmentMinimalPerf.default 377 372 1.01:1
SplitButtonMinimalPerf.default 3832 3807 1.01:1
Button.Fluent 587 582 1.01:1
Slider.Fluent 1613 1595 1.01:1
AlertMinimalPerf.default 317 317 1:1
ButtonOverridesMissPerf.default 1744 1746 1:1
DatepickerMinimalPerf.default 49691 49760 1:1
ListCommonPerf.default 679 681 1:1
ListMinimalPerf.default 515 517 1:1
ProviderMergeThemesPerf.default 2162 2155 1:1
SkeletonMinimalPerf.default 443 442 1:1
TableMinimalPerf.default 438 440 1:1
Dropdown.Fluent 2983 2978 1:1
AttachmentMinimalPerf.default 168 169 0.99:1
AttachmentSlotsPerf.default 1160 1169 0.99:1
ButtonMinimalPerf.default 190 191 0.99:1
ButtonUseCssNestingPerf.default 1107 1115 0.99:1
DividerMinimalPerf.default 392 395 0.99:1
PopupMinimalPerf.default 720 727 0.99:1
ProviderMinimalPerf.default 1037 1047 0.99:1
CustomToolbarPrototype.default 4001 4029 0.99:1
ToolbarMinimalPerf.default 985 991 0.99:1
Checkbox.Fluent 656 664 0.99:1
AnimationMinimalPerf.default 434 443 0.98:1
ButtonUseCssPerf.default 836 853 0.98:1
ChatWithPopoverPerf.default 490 501 0.98:1
HeaderSlotsPerf.default 796 811 0.98:1
AccordionMinimalPerf.default 175 180 0.97:1
LabelMinimalPerf.default 421 436 0.97:1
IconMinimalPerf.default 662 689 0.96:1
Icon.Fluent 722 751 0.96:1
ChatMinimalPerf.default 629 660 0.95:1
Dialog.Fluent 810 862 0.94:1

@size-auditor
Copy link

size-auditor bot commented Nov 24, 2020

Asset size changes

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

Baseline commit: ca4ec134424fbd53ecc726b965d6dbff1fc12bf6 (build)

@ecraig12345 ecraig12345 merged commit 5adfeff into microsoft:master Nov 24, 2020
6 checks passed
@ecraig12345 ecraig12345 deleted the callout-position branch November 24, 2020 02:14
@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-internal@v8.0.0-beta.18 has been released which incorporates this pull request.🎉

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joschect joschect joschect approved these changes

@dzearing dzearing

@xugao xugao

Assignees

@behowell behowell

Labels
Component: Callout Component: Popover
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@ecraig12345 @msft-github-bot @joschect @behowell
X Tutup