Skip to content

react-radio: creating package#20094

Merged
tringakrasniqi merged 9 commits into
microsoft:masterfrom
tringakrasniqi:radio-setup
Oct 5, 2021
Merged

react-radio: creating package#20094
tringakrasniqi merged 9 commits into
microsoft:masterfrom
tringakrasniqi:radio-setup

Conversation

@tringakrasniqi

@tringakrasniqi tringakrasniqi commented Oct 4, 2021

Copy link
Copy Markdown
Contributor

Pull request checklist

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

Description of changes

Created the react-radio (private) package.

@size-auditor

size-auditor Bot commented Oct 4, 2021

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 08c36cbc953d9ba82c0869b93028e4ece91b9c88 (build)

@codesandbox-ci

codesandbox-ci Bot commented Oct 4, 2021

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 4a65c07:

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

@fabricteam

fabricteam commented Oct 4, 2021

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
57.532 kB
18.112 kB
react-avatar
Avatar
54.953 kB
15.667 kB
react-badge
Badge
23.182 kB
6.986 kB
react-badge
CounterBadge
25.642 kB
7.682 kB
react-badge
PresenseBadge
237 B
177 B
react-button
Button
25.501 kB
7.738 kB
react-button
CompoundButton
30.758 kB
8.689 kB
react-button
MenuButton
27.526 kB
8.413 kB
react-button
SplitButton
33.637 kB
9.597 kB
react-button
ToggleButton
34.727 kB
8.39 kB
react-card
Card - All
13.471 kB
5.068 kB
react-card
Card
9.317 kB
3.925 kB
react-card
CardFooter
8.468 kB
3.557 kB
react-card
CardHeader
9.695 kB
3.99 kB
react-card
CardPreview
8.783 kB
3.741 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
169.173 kB
48.002 kB
react-components
react-components: FluentProvider & webLightTheme
32.188 kB
10.658 kB
react-divider
Divider
15.342 kB
5.585 kB
react-image
Image
9.771 kB
3.975 kB
react-input
Input
31.319 kB
11.305 kB
react-label
Label
8.952 kB
3.708 kB
react-link
Link
11.646 kB
4.699 kB
react-make-styles
makeStaticStyles (runtime)
7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)
22.175 kB
8.366 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.558 kB
1.204 kB
react-menu
Menu (including children components)
105.789 kB
32.202 kB
react-menu
Menu (including selectable components)
108.065 kB
32.575 kB
react-popover
Popover
101.153 kB
30.37 kB
react-portal
Portal
6.725 kB
2.237 kB
react-positioning
usePopper
23.145 kB
7.942 kB
react-provider
FluentProvider
15.147 kB
5.573 kB
react-slider
RangedSlider
41.41 kB
11.97 kB
react-slider
Slider
34.788 kB
10.855 kB
react-switch
Switch
26.606 kB
8.557 kB
react-text
Text - Default
11.338 kB
4.418 kB
react-text
Text - Wrappers
14.407 kB
4.724 kB
react-theme
Teams: all themes
25.712 kB
6.17 kB
react-theme
Teams: Light theme
17.215 kB
5.116 kB
react-tooltip
Tooltip
45.543 kB
15.541 kB
react-utilities
SSRProvider
213 B
170 B
🤖 This report was generated against 1b595efc686bb5ba705c70f441e517e2036613bf

@fabricteam

fabricteam commented Oct 4, 2021

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
Avatar mount 808 791 5000
BaseButton mount 781 772 5000
Breadcrumb mount 2265 2328 1000
ButtonNext mount 429 441 5000
Checkbox mount 1308 1331 5000
CheckboxBase mount 1107 1126 5000
ChoiceGroup mount 4046 4052 5000
ComboBox mount 842 837 1000
CommandBar mount 8892 8917 1000
ContextualMenu mount 5568 5623 1000
DefaultButton mount 965 967 5000
DetailsRow mount 3211 3241 5000
DetailsRowFast mount 3243 3241 5000
DetailsRowNoStyles mount 3110 3136 5000
Dialog mount 2095 2096 1000
DocumentCardTitle mount 155 147 1000
Dropdown mount 2758 2777 5000
FluentProviderNext mount 2905 2925 5000
FluentProviderWithTheme mount 180 177 10
FluentProviderWithTheme virtual-rerender 88 93 10
FluentProviderWithTheme virtual-rerender-with-unmount 209 214 10
FocusTrapZone mount 1579 1547 5000
FocusZone mount 1560 1581 5000
IconButton mount 1500 1517 5000
Label mount 313 316 5000
Layer mount 2581 2539 5000
Link mount 421 414 5000
MakeStyles mount 1575 1576 50000
MenuButton mount 1265 1248 5000
MessageBar mount 1728 1759 5000
Nav mount 2828 2775 1000
OverflowSet mount 953 952 5000
Panel mount 2025 2070 1000
Persona mount 717 717 1000
Pivot mount 1239 1233 1000
PrimaryButton mount 1111 1100 5000
Rating mount 6586 6622 5000
SearchBox mount 1140 1145 5000
Shimmer mount 2145 2178 5000
Slider mount 1671 1698 5000
SpinButton mount 4321 4320 5000
Spinner mount 372 379 5000
SplitButton mount 2693 2695 5000
Stack mount 441 454 5000
StackWithIntrinsicChildren mount 1481 1475 5000
StackWithTextChildren mount 3958 3953 5000
SwatchColorPicker mount 8870 8931 5000
Tabs mount 1296 1218 1000
TagPicker mount 2295 2251 5000
TeachingBubble mount 11147 11221 5000
Text mount 374 366 5000
TextField mount 1183 1205 5000
ThemeProvider mount 1029 1024 5000
ThemeProvider virtual-rerender 529 536 5000
ThemeProvider virtual-rerender-with-unmount 1607 1578 5000
Toggle mount 697 696 5000
buttonNative mount 119 122 5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 3 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ListCommonPerf.default 553 544 1.02:1 analysis
AlertMinimalPerf.default 239 244 0.98:1 analysis
AvatarMinimalPerf.default 166 169 0.98:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 250 235 1.06:1
TreeWith60ListItems.default 160 151 1.06:1
AttachmentMinimalPerf.default 141 134 1.05:1
IconMinimalPerf.default 553 526 1.05:1
AnimationMinimalPerf.default 358 344 1.04:1
FormMinimalPerf.default 354 340 1.04:1
HeaderSlotsPerf.default 645 623 1.04:1
ImageMinimalPerf.default 330 318 1.04:1
PortalMinimalPerf.default 159 153 1.04:1
VideoMinimalPerf.default 534 514 1.04:1
ButtonMinimalPerf.default 151 146 1.03:1
CarouselMinimalPerf.default 401 389 1.03:1
HeaderMinimalPerf.default 308 299 1.03:1
LabelMinimalPerf.default 323 315 1.03:1
ListMinimalPerf.default 440 428 1.03:1
ReactionMinimalPerf.default 320 312 1.03:1
TableMinimalPerf.default 350 339 1.03:1
ChatDuplicateMessagesPerf.default 261 255 1.02:1
DividerMinimalPerf.default 310 303 1.02:1
InputMinimalPerf.default 1126 1104 1.02:1
MenuMinimalPerf.default 726 714 1.02:1
MenuButtonMinimalPerf.default 1393 1372 1.02:1
RadioGroupMinimalPerf.default 375 367 1.02:1
TextAreaMinimalPerf.default 420 412 1.02:1
BoxMinimalPerf.default 296 293 1.01:1
ButtonOverridesMissPerf.default 1507 1494 1.01:1
ButtonSlotsPerf.default 473 468 1.01:1
ChatWithPopoverPerf.default 327 323 1.01:1
GridMinimalPerf.default 291 287 1.01:1
ItemLayoutMinimalPerf.default 1029 1019 1.01:1
LayoutMinimalPerf.default 317 313 1.01:1
ListWith60ListItems.default 557 551 1.01:1
ProviderMinimalPerf.default 972 966 1.01:1
SplitButtonMinimalPerf.default 3640 3618 1.01:1
TableManyItemsPerf.default 1620 1610 1.01:1
TooltipMinimalPerf.default 889 881 1.01:1
CardMinimalPerf.default 460 459 1:1
DatepickerMinimalPerf.default 4718 4711 1:1
DialogMinimalPerf.default 636 633 1:1
DropdownManyItemsPerf.default 582 581 1:1
DropdownMinimalPerf.default 2745 2732 1:1
EmbedMinimalPerf.default 3632 3649 1:1
ListNestedPerf.default 466 464 1:1
PopupMinimalPerf.default 506 504 1:1
ProviderMergeThemesPerf.default 1490 1489 1:1
SegmentMinimalPerf.default 294 294 1:1
SliderMinimalPerf.default 1463 1462 1:1
ToolbarMinimalPerf.default 801 799 1:1
TreeMinimalPerf.default 670 667 1:1
AttachmentSlotsPerf.default 912 918 0.99:1
CheckboxMinimalPerf.default 2306 2321 0.99:1
LoaderMinimalPerf.default 591 598 0.99:1
StatusMinimalPerf.default 571 575 0.99:1
TextMinimalPerf.default 293 295 0.99:1
CustomToolbarPrototype.default 3535 3559 0.99:1
ChatMinimalPerf.default 554 563 0.98:1
SkeletonMinimalPerf.default 298 303 0.98:1
RosterPerf.default 995 1029 0.97:1
RefMinimalPerf.default 197 206 0.96:1
AccordionMinimalPerf.default 127 134 0.95:1

Comment thread packages/react-radio/package.json Outdated
Comment thread packages/react-radio/Spec.md Outdated

@theerebuss theerebuss 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.

LGTM, don't forget to run the package migrator with the newly created component if you didn't already.

Comment thread packages/react-radio/src/components/Radio/Radio.tsx Outdated

@khmakoto khmakoto left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Seems like you need to update some dependencies but you are otherwise good to go

@tringakrasniqi tringakrasniqi merged commit 1c65efb into microsoft:master Oct 5, 2021
@tringakrasniqi tringakrasniqi deleted the radio-setup branch October 5, 2021 17:21
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
* Created ract-radio pkg

* Migration to nx

* Adding api md file

* Fixed versioning

* Added template Radio component

* Added description and removed Spec file

* Added the ForwardRefComponent

* Fixing dependencies versions
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.

6 participants