Skip to content

Conversation

@sopranopillow
Copy link
Contributor

Current Behavior

The component-has-static-classnames-object test, specifically the has static classnames in rendered component portion, doesn't handle internal portal elements. An example could be a popover that is only rendered when the trigger is clicked.

New Behavior

The has-static-classnames options now have a getPortalElement to allow the user to find the element and check for the classnames inside the portal element.

Related Issue(s)

#23549

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 21, 2022

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 5606d1c:

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

@size-auditor
Copy link

size-auditor bot commented Jun 22, 2022

Asset size changes

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

Baseline commit: 24ee79da3c6501507c1ab3a8feab0e5f173b0e8b (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 22, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1704 1648 5000
Button mount 1247 1248 5000
FluentProvider mount 2285 2248 5000
FluentProviderWithTheme mount 929 934 10
FluentProviderWithTheme virtual-rerender 878 878 10
FluentProviderWithTheme virtual-rerender-with-unmount 911 907 10
MakeStyles mount 2487 2533 50000

@sopranopillow sopranopillow requested review from a team, behowell and khmakoto as code owners June 22, 2022 16:13
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 22, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
76.07 kB
23.149 kB
react-avatar
Avatar
46.757 kB
13.737 kB
react-badge
Badge
21.653 kB
6.862 kB
react-badge
CounterBadge
22.557 kB
7.172 kB
react-badge
PresenceBadge
23.357 kB
7.099 kB
react-button
Button
35.704 kB
9.499 kB
react-button
CompoundButton
42.777 kB
10.733 kB
react-button
MenuButton
38.279 kB
10.365 kB
react-button
SplitButton
45.612 kB
11.71 kB
react-button
ToggleButton
50.929 kB
10.919 kB
react-card
Card - All
66.861 kB
18.981 kB
react-card
Card
62.017 kB
17.849 kB
react-card
CardFooter
8.461 kB
3.555 kB
react-card
CardHeader
10.026 kB
4.067 kB
react-card
CardPreview
8.562 kB
3.61 kB
react-combobox
Combobox
62.291 kB
21.341 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
187.299 kB
51.651 kB
react-components
react-components: FluentProvider & webLightTheme
31.883 kB
10.516 kB
react-divider
Divider
16.321 kB
5.837 kB
react-image
Image
10.68 kB
4.215 kB
react-input
Input
22.861 kB
7.512 kB
react-label
Label
9.238 kB
3.815 kB
react-link
Link
12.082 kB
4.88 kB
react-menu
Menu (including children components)
114.804 kB
34.885 kB
react-menu
Menu (including selectable components)
117.979 kB
35.372 kB
react-popover
Popover
104.777 kB
31.889 kB
react-portal
Portal
10.033 kB
3.753 kB
react-provider
FluentProvider
14.76 kB
5.596 kB
react-radio
Radio
30.438 kB
10.41 kB
react-radio
RadioGroup
14.319 kB
5.711 kB
react-select
Select
20.002 kB
7.171 kB
react-slider
Slider
26.136 kB
8.387 kB
react-spinbutton
SpinButton
43.35 kB
12.273 kB
react-spinner
Spinner
19.073 kB
6.308 kB
react-switch
Switch
26.58 kB
8.602 kB
react-text
Text - Default
11.572 kB
4.537 kB
react-text
Text - Wrappers
14.882 kB
4.977 kB
react-textarea
Textarea
22.228 kB
7.523 kB
react-tooltip
Tooltip
44.55 kB
15.386 kB
🤖 This report was generated against 24ee79da3c6501507c1ab3a8feab0e5f173b0e8b

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 22, 2022

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 776 765 5000
Breadcrumb mount 2182 2352 1000
Checkbox mount 1294 1280 5000
CheckboxBase mount 1099 1024 5000
ChoiceGroup mount 3902 3845 5000
ComboBox mount 748 810 1000
CommandBar mount 8874 9044 1000
ContextualMenu mount 9944 9858 1000
DefaultButton mount 992 970 5000
DetailsRow mount 3288 3203 5000
DetailsRowFast mount 3096 3107 5000
DetailsRowNoStyles mount 3100 3124 5000
Dialog mount 2324 2394 1000
DocumentCardTitle mount 157 149 1000
Dropdown mount 2776 2757 5000
FocusTrapZone mount 1592 1450 5000
FocusZone mount 1560 1480 5000
IconButton mount 1438 1494 5000
Label mount 286 267 5000
Layer mount 2348 2548 5000
Link mount 407 405 5000
MenuButton mount 1265 1289 5000
MessageBar mount 1733 1734 5000
Nav mount 2737 2733 1000
OverflowSet mount 942 920 5000
Panel mount 1796 1717 1000
Persona mount 847 868 1000
Pivot mount 1171 1211 1000
PrimaryButton mount 1123 1031 5000
Rating mount 6248 6229 5000
SearchBox mount 1068 1065 5000
Shimmer mount 2076 2112 5000
Slider mount 1643 1658 5000
SpinButton mount 4192 4205 5000
Spinner mount 355 364 5000
SplitButton mount 2694 2586 5000
Stack mount 391 438 5000
StackWithIntrinsicChildren mount 1901 1945 5000
StackWithTextChildren mount 4403 4286 5000
SwatchColorPicker mount 9548 10008 5000
TagPicker mount 2173 2251 5000
TeachingBubble mount 89865 91516 5000
Text mount 330 365 5000
TextField mount 1222 1206 5000
ThemeProvider mount 966 1007 5000
ThemeProvider virtual-rerender 560 537 5000
ThemeProvider virtual-rerender-with-unmount 1539 1586 5000
Toggle mount 637 702 5000
buttonNative mount 108 106 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 22, 2022

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TextMinimalPerf.default 289 244 1.18:1
DropdownManyItemsPerf.default 569 492 1.16:1
SegmentMinimalPerf.default 290 251 1.16:1
IconMinimalPerf.default 542 484 1.12:1
ProviderMergeThemesPerf.default 1049 946 1.11:1
CardMinimalPerf.default 444 405 1.1:1
LoaderMinimalPerf.default 555 507 1.09:1
HeaderMinimalPerf.default 303 281 1.08:1
AvatarMinimalPerf.default 162 152 1.07:1
PortalMinimalPerf.default 131 123 1.07:1
ButtonMinimalPerf.default 139 131 1.06:1
GridMinimalPerf.default 286 270 1.06:1
TooltipMinimalPerf.default 945 891 1.06:1
ChatMinimalPerf.default 614 586 1.05:1
AttachmentMinimalPerf.default 126 121 1.04:1
FlexMinimalPerf.default 242 233 1.04:1
ListWith60ListItems.default 515 500 1.03:1
SplitButtonMinimalPerf.default 3624 3528 1.03:1
TableMinimalPerf.default 342 331 1.03:1
ImageMinimalPerf.default 304 298 1.02:1
ListNestedPerf.default 466 456 1.02:1
SliderMinimalPerf.default 1431 1398 1.02:1
StatusMinimalPerf.default 567 554 1.02:1
AlertMinimalPerf.default 223 221 1.01:1
CarouselMinimalPerf.default 396 394 1.01:1
DialogMinimalPerf.default 643 637 1.01:1
EmbedMinimalPerf.default 3451 3407 1.01:1
MenuMinimalPerf.default 714 706 1.01:1
MenuButtonMinimalPerf.default 1416 1401 1.01:1
ReactionMinimalPerf.default 300 297 1.01:1
TableManyItemsPerf.default 1615 1604 1.01:1
AnimationMinimalPerf.default 450 450 1:1
ButtonSlotsPerf.default 458 458 1:1
ChatWithPopoverPerf.default 313 312 1:1
DividerMinimalPerf.default 290 290 1:1
InputMinimalPerf.default 1079 1083 1:1
ListMinimalPerf.default 421 423 1:1
RadioGroupMinimalPerf.default 370 369 1:1
SkeletonMinimalPerf.default 281 282 1:1
CustomToolbarPrototype.default 2225 2227 1:1
TreeMinimalPerf.default 680 677 1:1
DropdownMinimalPerf.default 2622 2657 0.99:1
ItemLayoutMinimalPerf.default 975 980 0.99:1
ListCommonPerf.default 526 531 0.99:1
TreeWith60ListItems.default 128 129 0.99:1
AttachmentSlotsPerf.default 876 891 0.98:1
HeaderSlotsPerf.default 607 622 0.98:1
LayoutMinimalPerf.default 285 290 0.98:1
ProviderMinimalPerf.default 327 333 0.98:1
ToolbarMinimalPerf.default 773 792 0.98:1
VideoMinimalPerf.default 523 533 0.98:1
DatepickerMinimalPerf.default 4710 4832 0.97:1
RosterPerf.default 888 917 0.97:1
PopupMinimalPerf.default 505 519 0.97:1
RefMinimalPerf.default 187 192 0.97:1
ChatDuplicateMessagesPerf.default 232 242 0.96:1
TextAreaMinimalPerf.default 377 394 0.96:1
CheckboxMinimalPerf.default 2153 2258 0.95:1
ButtonOverridesMissPerf.default 1156 1249 0.93:1
FormMinimalPerf.default 299 326 0.92:1
LabelMinimalPerf.default 286 312 0.92:1
BoxMinimalPerf.default 247 274 0.9:1
AccordionMinimalPerf.default 104 119 0.87:1

@sopranopillow sopranopillow removed request for a team and behowell June 22, 2022 17:14
@sopranopillow sopranopillow requested a review from spmonahan June 23, 2022 17:38
@sopranopillow sopranopillow merged commit 52f6f9d into microsoft:master Jun 23, 2022
@sopranopillow sopranopillow deleted the react-conformance-portal branch June 23, 2022 19:39
rohitpagariya pushed a commit to rohitpagariya/fluentui that referenced this pull request Jun 28, 2022
…ject test (microsoft#23631)

* feat: Adding getPortalElement option to static classnames object test.

* change files

* reverting lock file

* restoring files

* reverting yarn.lock

* adding requested feedback

* Update packages/react-conformance/src/defaultTests.tsx

Co-authored-by: Sean Monahan <[email protected]>

Co-authored-by: Sean Monahan <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Development

Successfully merging this pull request may close these issues.

4 participants