fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

Published 20 hours ago • verified publisher icon microsoft

fix(react-conformance): custom classname prefix test option now works

Open TristanWatanabe opened this issue 1 year ago • 9 comments

Previous Behavior

  • Passing in custom classname prefix like below does not do anything:
    testOptions: {
      'component-has-static-classname': {
        /** Prefix for the classname, if not `fui-` */
        prefix: 'fai',
      },
	}

New Behavior

  • Passing in custom classname prefix (like the one outlined above) now works:

image

TristanWatanabe avatar Jun 01 '23 22:06 TristanWatanabe

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

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

codesandbox-ci[bot] avatar Jun 01 '23 22:06 codesandbox-ci[bot]

Asset size changes

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

Baseline commit: 3d73007c50ca4008618498a998cdaed5675bbda6 (build)

size-auditor[bot] avatar Jun 01 '23 22:06 size-auditor[bot]

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 83 80 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 74 82 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 545 581 5000
Button mount 299 306 5000
Field mount 1006 1006 5000
FluentProvider mount 668 668 5000
FluentProviderWithTheme mount 83 80 10 Possible regression
FluentProviderWithTheme virtual-rerender 70 72 10
FluentProviderWithTheme virtual-rerender-with-unmount 74 82 10 Possible regression
InfoButton mount 11 14 5000
MakeStyles mount 854 869 50000
Persona mount 1590 1582 5000
SpinButton mount 1265 1266 5000

fabricteam avatar Jun 01 '23 22:06 fabricteam

Perf Analysis (@fluentui/react-northstar)

:warning: 2 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
PortalMinimalPerf.default 93 86 1.08:1 analysis
AccordionMinimalPerf.default 78 79 0.99:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 117 104 1.13:1
FlexMinimalPerf.default 164 146 1.12:1
TreeWith60ListItems.default 88 81 1.09:1
TableMinimalPerf.default 249 231 1.08:1
AttachmentMinimalPerf.default 81 76 1.07:1
LayoutMinimalPerf.default 214 201 1.06:1
RadioGroupMinimalPerf.default 274 258 1.06:1
AlertMinimalPerf.default 159 152 1.05:1
CarouselMinimalPerf.default 254 243 1.05:1
ChatMinimalPerf.default 442 422 1.05:1
RefMinimalPerf.default 111 106 1.05:1
IconMinimalPerf.default 394 375 1.05:1
TextAreaMinimalPerf.default 310 294 1.05:1
ButtonOverridesMissPerf.default 635 610 1.04:1
ChatDuplicateMessagesPerf.default 145 140 1.04:1
TooltipMinimalPerf.default 1271 1228 1.04:1
AttachmentSlotsPerf.default 644 624 1.03:1
ChatWithPopoverPerf.default 195 190 1.03:1
DropdownManyItemsPerf.default 402 389 1.03:1
HeaderMinimalPerf.default 207 201 1.03:1
ListCommonPerf.default 394 383 1.03:1
ReactionMinimalPerf.default 210 204 1.03:1
SegmentMinimalPerf.default 197 192 1.03:1
ToolbarMinimalPerf.default 536 521 1.03:1
TableManyItemsPerf.default 1122 1097 1.02:1
CustomToolbarPrototype.default 1458 1436 1.02:1
TreeMinimalPerf.default 469 458 1.02:1
CheckboxMinimalPerf.default 1137 1124 1.01:1
DatepickerMinimalPerf.default 3567 3531 1.01:1
DropdownMinimalPerf.default 1397 1388 1.01:1
MenuMinimalPerf.default 496 490 1.01:1
MenuButtonMinimalPerf.default 953 946 1.01:1
ProviderMinimalPerf.default 207 205 1.01:1
SkeletonMinimalPerf.default 200 199 1.01:1
SplitButtonMinimalPerf.default 2235 2218 1.01:1
StatusMinimalPerf.default 397 394 1.01:1
TextMinimalPerf.default 191 190 1.01:1
VideoMinimalPerf.default 436 432 1.01:1
DialogMinimalPerf.default 451 450 1:1
ListWith60ListItems.default 375 376 1:1
DividerMinimalPerf.default 205 208 0.99:1
EmbedMinimalPerf.default 1728 1745 0.99:1
RosterPerf.default 1533 1554 0.99:1
PopupMinimalPerf.default 348 350 0.99:1
ProviderMergeThemesPerf.default 656 661 0.99:1
ButtonMinimalPerf.default 84 86 0.98:1
CardMinimalPerf.default 306 313 0.98:1
HeaderSlotsPerf.default 456 466 0.98:1
ImageMinimalPerf.default 222 226 0.98:1
ListNestedPerf.default 320 325 0.98:1
BoxMinimalPerf.default 189 195 0.97:1
GridMinimalPerf.default 182 187 0.97:1
LoaderMinimalPerf.default 183 189 0.97:1
AnimationMinimalPerf.default 296 307 0.96:1
FormMinimalPerf.default 215 223 0.96:1
InputMinimalPerf.default 535 560 0.96:1
ItemLayoutMinimalPerf.default 694 724 0.96:1
ListMinimalPerf.default 291 303 0.96:1
SliderMinimalPerf.default 666 696 0.96:1
ButtonSlotsPerf.default 303 319 0.95:1
LabelMinimalPerf.default 209 222 0.94:1

fabricteam avatar Jun 01 '23 22:06 fabricteam

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam avatar Jun 01 '23 22:06 fabricteam

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)		 88.516 kB
26.795 kB
react-alert
Alert		 93.549 kB
22.537 kB
react-avatar
Avatar		 57.797 kB
15.091 kB
react-avatar
AvatarGroup		 15.646 kB
6.298 kB
react-avatar
AvatarGroupItem		 73.973 kB
19.582 kB
react-badge
Badge		 23.555 kB
7.256 kB
react-badge
CounterBadge		 24.457 kB
7.559 kB
react-badge
PresenceBadge		 32.135 kB
8.423 kB
react-button
Button		 36.742 kB
9.5 kB
react-button
CompoundButton		 43.896 kB
10.98 kB
react-button
MenuButton		 41.427 kB
10.836 kB
react-button
SplitButton		 49.649 kB
12.42 kB
react-button
ToggleButton		 55.024 kB
11.436 kB
react-card
Card - All		 88.716 kB
25.114 kB
react-card
Card		 83.651 kB
23.658 kB
react-card
CardFooter		 9.193 kB
3.892 kB
react-card
CardHeader		 11.089 kB
4.588 kB
react-card
CardPreview		 9.998 kB
4.24 kB
react-checkbox
Checkbox		 34.5 kB
10.878 kB
react-combobox
Combobox (including child components)		 87.735 kB
28.243 kB
react-combobox
Dropdown (including child components)		 86.074 kB
27.848 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 64.899 kB
17.91 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 206.425 kB
57.914 kB
react-components
react-components: FluentProvider & webLightTheme		 36.132 kB
11.954 kB
react-datepicker-compat
DatePicker Compat		 222.56 kB
59.204 kB
react-dialog
Dialog (including children components)		 92.076 kB
27.492 kB
react-divider
Divider		 17.441 kB
6.349 kB
react-field
Field		 18.9 kB
7.083 kB
react-image
Image		 11.514 kB
4.619 kB
react-infobutton
InfoButton		 130.121 kB
39.785 kB
react-infobutton
InfoLabel		 133.586 kB
40.852 kB
react-input
Input		 24.183 kB
7.772 kB
react-label
Label		 10.139 kB
4.231 kB
react-link
Link		 12.339 kB
5.105 kB
react-menu
Menu (including children components)		 130.848 kB
39.946 kB
react-menu
Menu (including selectable components)		 133.832 kB
40.479 kB
react-persona
Persona		 64.718 kB
17.012 kB
react-popover
Popover		 117.083 kB
36.122 kB
react-portal
Portal		 11.676 kB
4.31 kB
react-portal-compat
PortalCompatProvider		 6.473 kB
2.196 kB
react-progress
ProgressBar		 13.891 kB
5.482 kB
react-provider
FluentProvider		 18.079 kB
6.713 kB
react-radio
Radio		 27.404 kB
8.722 kB
react-radio
RadioGroup		 11.326 kB
4.743 kB
react-select
Select		 25.373 kB
8.826 kB
react-slider
Slider		 34.322 kB
11.099 kB
react-spinbutton
SpinButton		 34.121 kB
10.421 kB
react-spinner
Spinner		 21.327 kB
7.015 kB
react-switch
Switch		 29.924 kB
9.342 kB
react-table
DataGrid		 150.868 kB
41.518 kB
react-table
Table (Primitives only)		 45.111 kB
12.567 kB
react-table
Table as DataGrid		 133.356 kB
34.002 kB
react-table
Table (Selection only)		 79.125 kB
19.379 kB
react-table
Table (Sort only)		 78.455 kB
19.187 kB
react-tags
Tag		 22.004 kB
7.93 kB
react-text
Text - Default		 12.527 kB
4.963 kB
react-text
Text - Wrappers		 15.677 kB
5.284 kB
react-textarea
Textarea		 27.686 kB
9.126 kB
react-tooltip
Tooltip		 47.119 kB
16.528 kB
🤖 This report was generated against 3d73007c50ca4008618498a998cdaed5675bbda6

fabricteam avatar Jun 01 '23 22:06 fabricteam

🕵 FluentUI-v0 No visual regressions between this PR and main

fabricteam avatar Jun 01 '23 22:06 fabricteam

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam avatar Jun 01 '23 22:06 fabricteam

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 638 636 5000
Breadcrumb mount 1675 1663 1000
Checkbox mount 1666 1662 5000
CheckboxBase mount 1548 1497 5000
ChoiceGroup mount 2948 2888 5000
ComboBox mount 665 648 1000
CommandBar mount 6282 6238 1000
ContextualMenu mount 13137 13043 1000
DefaultButton mount 763 761 5000
DetailsRow mount 2180 2209 5000
DetailsRowFast mount 2202 2218 5000
DetailsRowNoStyles mount 1998 2015 5000
Dialog mount 2800 2699 1000
DocumentCardTitle mount 234 232 1000
Dropdown mount 1989 2007 5000
FocusTrapZone mount 1129 1142 5000
FocusZone mount 1099 1068 5000
GroupedList mount 37249 41682 2
GroupedList virtual-rerender 20021 19962 2
GroupedList virtual-rerender-with-unmount 50485 50852 2
GroupedListV2 mount 228 222 2
GroupedListV2 virtual-rerender 218 210 2
GroupedListV2 virtual-rerender-with-unmount 229 223 2
IconButton mount 1078 1101 5000
Label mount 340 340 5000
Layer mount 2768 2764 5000
Link mount 394 394 5000
MenuButton mount 972 972 5000
MessageBar mount 21703 21725 5000
Nav mount 1933 1955 1000
OverflowSet mount 769 771 5000
Panel mount 1762 1778 1000
Persona mount 755 743 1000
Pivot mount 889 872 1000
PrimaryButton mount 849 857 5000
Rating mount 4734 4660 5000
SearchBox mount 925 937 5000
Shimmer mount 1890 1825 5000
Slider mount 1321 1336 5000
SpinButton mount 2897 2911 5000
Spinner mount 394 397 5000
SplitButton mount 1872 1871 5000
Stack mount 401 419 5000
StackWithIntrinsicChildren mount 858 873 5000
StackWithTextChildren mount 2642 2663 5000
SwatchColorPicker mount 6149 6175 5000
TagPicker mount 1460 1448 5000
Text mount 379 380 5000
TextField mount 955 921 5000
ThemeProvider mount 841 849 5000
ThemeProvider virtual-rerender 587 596 5000
ThemeProvider virtual-rerender-with-unmount 1284 1315 5000
Toggle mount 618 629 5000
buttonNative mount 190 190 5000

fabricteam avatar Jun 01 '23 22:06 fabricteam

:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot avatar Jun 05 '23 07:06 msft-fluent-ui-bot