Skip to content

Component Template: Remove className export#24045

Merged
behowell merged 3 commits into
microsoft:masterfrom
behowell:template/remove-classname-export
Jul 28, 2022
Merged

Component Template: Remove className export#24045
behowell merged 3 commits into
microsoft:masterfrom
behowell:template/remove-classname-export

Conversation

@behowell

Copy link
Copy Markdown
Contributor

Current Behavior

The {{component}}ClassName export was removed from all components, but still exists in the template.

New Behavior

Components created with the template will no longer export the single {{component}}ClassName

Related Issue(s)

The export was removed from all existing components by this issue and PR:

@behowell
behowell requested review from a team, khmakoto and sopranopillow July 22, 2022 21:38
@behowell
behowell requested a review from a team as a code owner July 22, 2022 21:38
@behowell behowell self-assigned this Jul 22, 2022
@github-actions github-actions Bot added this to the July Project Cycle Q3 2022 milestone Jul 22, 2022
@codesandbox-ci

codesandbox-ci Bot commented Jul 22, 2022

Copy link
Copy Markdown

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 5695e51:

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

@size-auditor

size-auditor Bot commented Jul 22, 2022

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 2d157ff271bddd250ea34d4c8c1ef8220d1a83cc (build)

@fabricteam

fabricteam commented Jul 22, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1337 1339 5000
Button mount 930 940 5000
FluentProvider mount 1640 1614 5000
FluentProviderWithTheme mount 643 649 10
FluentProviderWithTheme virtual-rerender 587 594 10
FluentProviderWithTheme virtual-rerender-with-unmount 639 611 10
MakeStyles mount 1934 1968 50000
SpinButton mount 2681 2689 5000

@fabricteam

fabricteam commented Jul 22, 2022

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
554 B
348 B
priority-overflow
createOverflowManager
2.936 kB
1.212 kB
react-accordion
Accordion (including children components)
78.982 kB
23.998 kB
react-alert
Alert
82.111 kB
20.492 kB
react-avatar
Avatar
48.533 kB
13.78 kB
react-avatar
AvatarGroup
137.702 kB
40.925 kB
react-avatar
AvatarGroupItem
68.248 kB
19.109 kB
react-badge
Badge
22.494 kB
7.157 kB
react-badge
CounterBadge
23.397 kB
7.449 kB
react-badge
PresenceBadge
23.947 kB
7.022 kB
react-button
Button
35.704 kB
9.499 kB
react-button
CompoundButton
42.777 kB
10.733 kB
react-button
MenuButton
38.322 kB
10.363 kB
react-button
SplitButton
45.655 kB
11.71 kB
react-button
ToggleButton
50.929 kB
10.919 kB
react-card
Card - All
67.014 kB
19.206 kB
react-card
Card
62.696 kB
18.126 kB
react-card
CardFooter
8.461 kB
3.555 kB
react-card
CardHeader
9.504 kB
3.896 kB
react-card
CardPreview
8.562 kB
3.61 kB
react-combobox
Combobox (including child components)
74.38 kB
23.979 kB
react-combobox
Dropdown (including child components)
73.893 kB
23.971 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
190.202 kB
52.42 kB
react-components
react-components: FluentProvider & webLightTheme
32.036 kB
10.577 kB
react-dialog
Dialog (including children components)
83.684 kB
25.01 kB
react-divider
Divider
16.321 kB
5.837 kB
react-image
Image
10.68 kB
4.215 kB
react-input
Input
23.554 kB
7.644 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)
117.781 kB
35.767 kB
react-menu
Menu (including selectable components)
120.98 kB
36.252 kB
react-overflow
hooks only
10.839 kB
4.146 kB
react-popover
Popover
105.177 kB
32.045 kB
react-portal
Portal
9.844 kB
3.677 kB
react-positioning
usePositioning
23.854 kB
8.299 kB
react-provider
FluentProvider
14.913 kB
5.658 kB
react-radio
Radio
30.481 kB
10.406 kB
react-radio
RadioGroup
14.319 kB
5.711 kB
react-select
Select
20.746 kB
7.299 kB
react-slider
Slider
26.136 kB
8.387 kB
react-spinbutton
SpinButton
44.227 kB
12.492 kB
react-spinner
Spinner
19.932 kB
6.363 kB
react-switch
Switch
26.951 kB
8.688 kB
react-text
Text - Default
11.572 kB
4.537 kB
react-text
Text - Wrappers
14.882 kB
4.977 kB
react-textarea
Textarea
23.078 kB
7.707 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
28.995 kB
6.215 kB
react-theme
Teams: Light theme
16.973 kB
4.86 kB
react-tooltip
Tooltip
44.547 kB
15.376 kB
react-utilities
SSRProvider
189 B
161 B
🤖 This report was generated against 2d157ff271bddd250ea34d4c8c1ef8220d1a83cc

@fabricteam

fabricteam commented Jul 22, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 236 217 1.09:1
AttachmentSlotsPerf.default 876 838 1.05:1
LabelMinimalPerf.default 347 331 1.05:1
DividerMinimalPerf.default 321 310 1.04:1
FormMinimalPerf.default 365 351 1.04:1
ListWith60ListItems.default 522 501 1.04:1
TextAreaMinimalPerf.default 442 425 1.04:1
AttachmentMinimalPerf.default 129 125 1.03:1
GridMinimalPerf.default 293 285 1.03:1
ListMinimalPerf.default 468 454 1.03:1
TextMinimalPerf.default 314 305 1.03:1
AnimationMinimalPerf.default 493 485 1.02:1
ImageMinimalPerf.default 332 324 1.02:1
LayoutMinimalPerf.default 316 309 1.02:1
RadioGroupMinimalPerf.default 406 398 1.02:1
SliderMinimalPerf.default 1342 1317 1.02:1
IconMinimalPerf.default 541 531 1.02:1
TableMinimalPerf.default 366 360 1.02:1
TreeMinimalPerf.default 710 698 1.02:1
VideoMinimalPerf.default 573 563 1.02:1
AvatarMinimalPerf.default 160 159 1.01:1
CarouselMinimalPerf.default 360 357 1.01:1
ChatWithPopoverPerf.default 313 309 1.01:1
DialogMinimalPerf.default 696 691 1.01:1
DropdownMinimalPerf.default 2600 2568 1.01:1
InputMinimalPerf.default 993 987 1.01:1
ItemLayoutMinimalPerf.default 997 990 1.01:1
RosterPerf.default 845 833 1.01:1
PopupMinimalPerf.default 555 548 1.01:1
PortalMinimalPerf.default 145 143 1.01:1
ProviderMergeThemesPerf.default 997 990 1.01:1
ProviderMinimalPerf.default 319 316 1.01:1
ReactionMinimalPerf.default 330 326 1.01:1
SegmentMinimalPerf.default 314 312 1.01:1
ToolbarMinimalPerf.default 836 829 1.01:1
BoxMinimalPerf.default 298 297 1:1
ButtonSlotsPerf.default 419 418 1:1
CardMinimalPerf.default 496 497 1:1
ChatMinimalPerf.default 658 659 1:1
CheckboxMinimalPerf.default 1958 1956 1:1
DatepickerMinimalPerf.default 4703 4680 1:1
DropdownManyItemsPerf.default 556 556 1:1
EmbedMinimalPerf.default 2997 2998 1:1
ListNestedPerf.default 471 472 1:1
MenuMinimalPerf.default 754 752 1:1
MenuButtonMinimalPerf.default 1362 1360 1:1
RefMinimalPerf.default 202 201 1:1
SkeletonMinimalPerf.default 308 307 1:1
SplitButtonMinimalPerf.default 3319 3319 1:1
TableManyItemsPerf.default 1617 1611 1:1
CustomToolbarPrototype.default 2197 2203 1:1
TooltipMinimalPerf.default 962 965 1:1
ButtonMinimalPerf.default 138 140 0.99:1
FlexMinimalPerf.default 247 250 0.99:1
HeaderMinimalPerf.default 319 323 0.99:1
HeaderSlotsPerf.default 678 686 0.99:1
ListCommonPerf.default 515 520 0.99:1
StatusMinimalPerf.default 607 613 0.99:1
AlertMinimalPerf.default 225 230 0.98:1
ButtonOverridesMissPerf.default 1149 1168 0.98:1
LoaderMinimalPerf.default 526 536 0.98:1
TreeWith60ListItems.default 127 129 0.98:1
AccordionMinimalPerf.default 124 129 0.96:1

@fabricteam

fabricteam commented Jul 22, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 801 801 5000
Breadcrumb mount 2344 2367 1000
Checkbox mount 2239 2250 5000
CheckboxBase mount 1950 1961 5000
ChoiceGroup mount 4077 4038 5000
ComboBox mount 825 861 1000
CommandBar mount 9227 9173 1000
ContextualMenu mount 10437 10437 1000
DefaultButton mount 1012 1012 5000
DetailsRow mount 3310 3351 5000
DetailsRowFast mount 3340 3302 5000
DetailsRowNoStyles mount 3210 3098 5000
Dialog mount 2462 2446 1000
DocumentCardTitle mount 147 156 1000
Dropdown mount 2887 2899 5000
FocusTrapZone mount 1651 1633 5000
FocusZone mount 1550 1604 5000
IconButton mount 1530 1509 5000
Label mount 295 301 5000
Layer mount 2690 2689 5000
Link mount 402 410 5000
MenuButton mount 1275 1272 5000
MessageBar mount 1907 1817 5000
Nav mount 2839 2879 1000
OverflowSet mount 951 945 5000
Panel mount 1922 1877 1000
Persona mount 870 875 1000
Pivot mount 1241 1271 1000
PrimaryButton mount 1128 1117 5000
Rating mount 6615 6681 5000
SearchBox mount 1143 1129 5000
Shimmer mount 2188 2170 5000
Slider mount 1668 1672 5000
SpinButton mount 4427 4371 5000
Spinner mount 370 377 5000
SplitButton mount 2782 2772 5000
Stack mount 463 446 5000
StackWithIntrinsicChildren mount 1919 1971 5000
StackWithTextChildren mount 4507 4497 5000
SwatchColorPicker mount 10110 10185 5000
TagPicker mount 2312 2318 5000
TeachingBubble mount 84948 86793 5000
Text mount 380 370 5000
TextField mount 1199 1230 5000
ThemeProvider mount 1035 1034 5000
ThemeProvider virtual-rerender 580 587 5000
ThemeProvider virtual-rerender-with-unmount 1565 1543 5000
Toggle mount 712 715 5000
buttonNative mount 114 111 5000

@spmonahan spmonahan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Change looks good but something really blew up on Northstar's Screener setup
northstar_screener

import type { SlotClassNames } from '@fluentui/react-utilities';


export const {{componentNames.propertyName}}ClassName = 'fui-{{componentName}}'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

You should update the conformance tests so that this does not fail for folks creating new packages

expect(indexFile[exportName]).toBe(componentClassName);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@tomi-msft just picked up the issue to remove the tests 😁

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I'll wait for @tomi-msft's PR to be merged before merging this one:

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@ling1726 The PR to remove the test is now merged

@behowell
behowell requested a review from ling1726 July 27, 2022 19:59
@behowell
behowell merged commit 80fab2a into microsoft:master Jul 28, 2022
@behowell
behowell deleted the template/remove-classname-export branch July 28, 2022 19:51
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.

7 participants