Skip to content

Conversation

@khmakoto
Copy link
Member

@khmakoto khmakoto commented Mar 17, 2021

Pull request checklist

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

Description of changes

Cherrypick of #17467

This PR adds the ability to pass a Rectangle as one of the possible targets of a popup element (i.e. Callout, TeachingBubble, etc.). This is done by accounting for the fact that Rectangles and Points have a similar shape so we check for the existence of top and bottom to determine if the target is a Rectangle and, if not, we default to treating the target as a Point.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 17, 2021

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 c416851:

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

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 the hooks changes

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 17, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
BaseButton mount 1139 1093 5000
Breadcrumb mount 47899 47739 5000
Checkbox mount 1863 1922 5000
CheckboxBase mount 1484 1506 5000
ChoiceGroup mount 6194 6111 5000
ComboBox mount 1179 1095 1000
CommandBar mount 8819 8772 1000
ContextualMenu mount 16209 16420 1000
DefaultButton mount 1375 1372 5000
DetailsRow mount 4755 4315 5000
DetailsRowFast mount 4543 4609 5000
DetailsRowNoStyles mount 4278 4102 5000
Dialog mount 2108 2027 1000
DocumentCardTitle mount 2062 2167 1000
Dropdown mount 3014 2987 5000
FocusTrapZone mount 1938 2013 5000
FocusZone mount 2066 2021 5000
IconButton mount 2293 2238 5000
Label mount 364 367 5000
Layer mount 2356 2320 5000
Link mount 555 564 5000
MenuButton mount 1728 1758 5000
MessageBar mount 2567 2446 5000
Nav mount 4686 3953 1000
OverflowSet mount 1661 1690 5000
Panel mount 1712 1939 1000
Persona mount 956 919 1000
Pivot mount 1651 1735 1000
PrimaryButton mount 1527 1883 5000
Rating mount 8858 9526 5000
SearchBox mount 1722 1426 5000
Shimmer mount 3105 3208 5000
Slider mount 1735 1811 5000
SpinButton mount 6053 5904 5000
Spinner mount 443 483 5000
SplitButton mount 3732 4386 5000
Stack mount 612 651 5000
StackWithIntrinsicChildren mount 1766 1821 5000
StackWithTextChildren mount 6276 5341 5000
SwatchColorPicker mount 11773 11863 5000
TagPicker mount 3439 3273 5000
TeachingBubble mount 58106 57479 5000
Text mount 563 533 5000
TextField mount 2107 1589 5000
Toggle mount 1260 989 5000
button mount 134 130 5000

@size-auditor
Copy link

size-auditor bot commented Mar 17, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-HoverCard 97.004 kB 97.058 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-ComboBox 240.28 kB 240.334 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-ContextualMenu 152.878 kB 152.932 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-DatePicker 205.051 kB 205.105 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Grid 175.402 kB 175.456 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Positioning 19.217 kB 19.271 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Pivot 180.635 kB 180.689 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Pickers 278.386 kB 278.44 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-PersonaCoin 112.338 kB 112.392 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Persona 112.338 kB 112.392 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Panel 195.396 kB 195.45 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Dialog 205.021 kB 205.075 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Nav 182.907 kB 182.961 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-DocumentCard 210.183 kB 210.237 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-MessageBar 184.143 kB 184.197 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Dropdown 227.61 kB 227.664 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Facepile 204.725 kB 204.779 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Keytips 102.663 kB 102.717 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-KeytipLayer 99.515 kB 99.569 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-FloatingPicker 234.978 kB 235.032 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Keytip 78.852 kB 78.906 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-CommandBar 196.429 kB 196.483 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-PositioningContainer 71.238 kB 71.292 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-SearchBox 181.917 kB 181.971 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-SpinButton 187.988 kB 188.042 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Tooltip 84.196 kB 84.25 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Breadcrumb 194.145 kB 194.199 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Button 189.007 kB 189.061 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-TeachingBubble 200.323 kB 200.377 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-SwatchColorPicker 185.762 kB 185.816 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Callout 84.368 kB 84.422 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-ButtonGrid 175.402 kB 175.456 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-SelectedItemsList 224.054 kB 224.108 kB ExceedsBaseline     54 bytes
office-ui-fabric-react office-ui-fabric-react-Coachmark 92.77 kB 92.824 kB ExceedsBaseline     54 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: e4c63bbce6a94d8c250b7e53ceb7d13c20c85840 (build)

Copy link
Collaborator

@JustSlone JustSlone left a comment

Choose a reason for hiding this comment

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

Can you add a quick test to cover this behavior?
(In this particular case, because it's a hotfix, if you want to follow up with a subsequent PR that's fine, just don't forget)

Also, should we add an example showing how to use rectangle and point?

@khmakoto
Copy link
Member Author

@msft-fluent-ui-bot merge in 1 minute

@msft-fluent-ui-bot
Copy link
Collaborator

Hello @khmakoto!

Because you've given me some instructions on how to help merge this pull request, I'll be modifying my merge approach. Here's how I understand your requirements for merging this pull request:

  • I won't merge this pull request until after the UTC date Thu, 18 Mar 2021 01:37:50 GMT, which is in 1 minute

If this doesn't seem right to you, you can tell me to cancel these instructions and use the auto-merge policy that has been configured for this repository. Try telling me "forget everything I just told you".

@msft-fluent-ui-bot msft-fluent-ui-bot merged commit 9de191c into microsoft:7.0 Mar 18, 2021
@khmakoto khmakoto deleted the rectangleAsTarget7.0 branch March 18, 2021 01:51
@msft-fluent-ui-bot
Copy link
Collaborator

🎉office-ui-fabric-react@v7.165.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/tsx-editor@v0.14.26 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/theme-samples@v7.2.25 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/react-hooks@v7.14.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/mdl2-theme@v0.4.25 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/fluent-theme@v7.4.25 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/example-app-base@v7.18.1 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/date-time@v7.19.29 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/charting@v4.15.9 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/api-docs@v7.6.28 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v7.165.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-theme-provider@v0.18.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-button@v0.19.8 has been released which incorporates this pull request.:tada:

Handy links:

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.

5 participants