Skip to content

react-radio: Radio item implementation#20626

Merged
tringakrasniqi merged 15 commits into
microsoft:masterfrom
tringakrasniqi:radio-item-implementation
Nov 29, 2021
Merged

react-radio: Radio item implementation#20626
tringakrasniqi merged 15 commits into
microsoft:masterfrom
tringakrasniqi:radio-item-implementation

Conversation

@tringakrasniqi

@tringakrasniqi tringakrasniqi commented Nov 16, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor

Pull request checklist

  • Addresses an existing issue: Fixes partially Radio Convergence #19953
    - [ ] Include a change request file using $ yarn change (private package)

Description of changes

Adding implementation for RadioItem based on design spec.

@tringakrasniqi tringakrasniqi requested review from a team November 16, 2021 16:14
@fabricteam

fabricteam commented Nov 16, 2021 •
edited
Loading

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

🤖 This report was generated against 5a49512b8e33d5a588212069a1f2827b806d584c

@codesandbox-ci

codesandbox-ci Bot commented Nov 16, 2021 •
edited
Loading

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

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

@size-auditor

size-auditor Bot commented Nov 16, 2021 •
edited
Loading

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: ecdea9fb8c041b82997e1b6f6b8be49882dbd9f2 (build)

@fabricteam

fabricteam commented Nov 16, 2021 •
edited
Loading

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 1003 987 5000
BaseButton mount 1052 1026 5000
Breadcrumb mount 2792 2768 1000
ButtonNext mount 638 650 5000
Checkbox mount 1658 1644 5000
CheckboxBase mount 1402 1460 5000
ChoiceGroup mount 4914 5094 5000
ComboBox mount 1063 1071 1000
CommandBar mount 10293 10390 1000
ContextualMenu mount 8743 8587 1000
DefaultButton mount 1285 1264 5000
DetailsRow mount 3999 4019 5000
DetailsRowFast mount 3977 3909 5000
DetailsRowNoStyles mount 3763 3740 5000
Dialog mount 2728 2664 1000
DocumentCardTitle mount 275 280 1000
Dropdown mount 3484 3402 5000
FluentProviderNext mount 4233 4351 5000
FluentProviderWithTheme mount 353 345 10
FluentProviderWithTheme virtual-rerender 207 220 10
FluentProviderWithTheme virtual-rerender-with-unmount 399 383 10
FocusTrapZone mount 1925 2026 5000
FocusZone mount 2018 1934 5000
IconButton mount 1879 1864 5000
Label mount 470 469 5000
Layer mount 3094 3139 5000
Link mount 597 622 5000
MakeStyles mount 1894 1984 50000
MenuButton mount 1633 1659 5000
MessageBar mount 2106 2088 5000
Nav mount 3558 3474 1000
OverflowSet mount 1229 1266 5000
Panel mount 2673 2605 1000
Persona mount 920 975 1000
Pivot mount 1562 1569 1000
PrimaryButton mount 1438 1407 5000
Rating mount 7812 7916 5000
SearchBox mount 1468 1478 5000
Shimmer mount 2650 2667 5000
Slider mount 2109 2092 5000
SpinButton mount 5307 5189 5000
Spinner mount 569 560 5000
SplitButton mount 3277 3309 5000
Stack mount 654 614 5000
StackWithIntrinsicChildren mount 1859 1867 5000
StackWithTextChildren mount 4826 4733 5000
SwatchColorPicker mount 10719 10734 5000
TagPicker mount 2774 2703 5000
TeachingBubble mount 13528 13299 5000
Text mount 544 539 5000
TextField mount 1487 1491 5000
ThemeProvider mount 1308 1327 5000
ThemeProvider virtual-rerender 759 751 5000
ThemeProvider virtual-rerender-with-unmount 2091 2032 5000
Toggle mount 968 954 5000
buttonNative mount 250 262 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ListNestedPerf.default 599 533 1.12:1
IconMinimalPerf.default 624 572 1.09:1
ButtonSlotsPerf.default 587 550 1.07:1
TreeWith60ListItems.default 188 175 1.07:1
AttachmentMinimalPerf.default 161 152 1.06:1
ListMinimalPerf.default 529 497 1.06:1
TooltipMinimalPerf.default 1051 995 1.06:1
AnimationMinimalPerf.default 440 421 1.05:1
ChatDuplicateMessagesPerf.default 309 293 1.05:1
DropdownMinimalPerf.default 3133 2980 1.05:1
LabelMinimalPerf.default 398 379 1.05:1
TextMinimalPerf.default 349 333 1.05:1
VideoMinimalPerf.default 635 613 1.04:1
DividerMinimalPerf.default 369 357 1.03:1
FormMinimalPerf.default 402 389 1.03:1
ListCommonPerf.default 642 624 1.03:1
ListWith60ListItems.default 662 642 1.03:1
MenuMinimalPerf.default 874 847 1.03:1
RadioGroupMinimalPerf.default 447 434 1.03:1
TreeMinimalPerf.default 835 811 1.03:1
AvatarMinimalPerf.default 201 198 1.02:1
ImageMinimalPerf.default 387 381 1.02:1
LoaderMinimalPerf.default 694 680 1.02:1
SegmentMinimalPerf.default 341 333 1.02:1
SliderMinimalPerf.default 1680 1651 1.02:1
StatusMinimalPerf.default 664 652 1.02:1
TextAreaMinimalPerf.default 494 486 1.02:1
ButtonOverridesMissPerf.default 1675 1653 1.01:1
CardMinimalPerf.default 567 561 1.01:1
DropdownManyItemsPerf.default 686 680 1.01:1
GridMinimalPerf.default 339 334 1.01:1
LayoutMinimalPerf.default 364 362 1.01:1
RefMinimalPerf.default 244 242 1.01:1
ToolbarMinimalPerf.default 964 955 1.01:1
EmbedMinimalPerf.default 4195 4196 1:1
HeaderMinimalPerf.default 350 351 1:1
MenuButtonMinimalPerf.default 1658 1660 1:1
SplitButtonMinimalPerf.default 4213 4209 1:1
CustomToolbarPrototype.default 4037 4056 1:1
BoxMinimalPerf.default 340 342 0.99:1
ChatMinimalPerf.default 681 685 0.99:1
CheckboxMinimalPerf.default 2678 2705 0.99:1
DatepickerMinimalPerf.default 5437 5510 0.99:1
HeaderSlotsPerf.default 764 769 0.99:1
InputMinimalPerf.default 1296 1312 0.99:1
ItemLayoutMinimalPerf.default 1201 1211 0.99:1
RosterPerf.default 1191 1208 0.99:1
ProviderMergeThemesPerf.default 1718 1729 0.99:1
ProviderMinimalPerf.default 1111 1122 0.99:1
SkeletonMinimalPerf.default 345 350 0.99:1
TableMinimalPerf.default 392 396 0.99:1
DialogMinimalPerf.default 782 798 0.98:1
FlexMinimalPerf.default 288 295 0.98:1
TableManyItemsPerf.default 1839 1874 0.98:1
AlertMinimalPerf.default 274 282 0.97:1
ChatWithPopoverPerf.default 365 377 0.97:1
PortalMinimalPerf.default 171 176 0.97:1
CarouselMinimalPerf.default 469 489 0.96:1
ReactionMinimalPerf.default 362 378 0.96:1
ButtonMinimalPerf.default 169 178 0.95:1
PopupMinimalPerf.default 595 629 0.95:1
AccordionMinimalPerf.default 161 172 0.94:1
AttachmentSlotsPerf.default 1044 1109 0.94:1

@tringakrasniqi tringakrasniqi marked this pull request as ready for review November 19, 2021 10:50
@tringakrasniqi tringakrasniqi mentioned this pull request Nov 19, 2021
Closed
33 tasks
@azure-pipelines

azure-pipelines Bot commented Nov 25, 2021

Copy link
Copy Markdown
Azure Pipelines successfully started running 3 pipeline(s).

behowell
behowell approved these changes Nov 25, 2021
View reviewed changes

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

Looks good for the initial implementation of RadioItem, thanks @tringakrasniqi!

After this PR, we'll need to update it to have input be its primary slot, similar to the change in Checkbox from PR #20617 I just merged.

Comment thread packages/react-radio/src/components/RadioItem/useRadioItemStyles.ts Outdated
@tringakrasniqi tringakrasniqi merged commit b88f287 into microsoft:master Nov 29, 2021
@tringakrasniqi tringakrasniqi deleted the radio-item-implementation branch November 29, 2021 10:26
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
@tringakrasniqi @varholak-peter @behowell
react-radio: Radio item implementation (microsoft#20626)
936218e 
* Picked (wip: radio implementation) from radio-spec

Co-authored-by: Peter Varholak <[email protected]>

* Added id for radio-item

* Added classnames and styles for label

* Added styles for label position

* Added subtext slot

* Fix, removed props from label slot

* Fix, removed props from label slot

* Reverting fix

* Updated dependencies

* Updated RadioItem description

* Updating to if-statement instead of ternary operator for readability

Co-authored-by: Ben Howell <[email protected]>

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

Reviewers

2 more reviewers
@theerebuss theerebuss theerebuss approved these changes
@behowell behowell behowell approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Component: Radio Fluent UI react-components (v9)

Projects

None yet

Milestone

November Project Cycle Q4 2021

Development

Successfully merging this pull request may close these issues.

4 participants

@tringakrasniqi @fabricteam @theerebuss @behowell