Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ChoiceGroup: fills visible small dot in middle for checked selected item #18069

Merged
merged 4 commits into from
May 5, 2021

Conversation

TristanWatanabe
Copy link
Member

Pull request checklist

Description of changes

  • adds background css property to fill small dot for checked item. Also added for hover selector.
    ChoiceGroup-1
    ChoiceGroup-2

@size-auditor
Copy link

size-auditor bot commented May 5, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-ChoiceGroup 56.654 kB 56.68 kB ExceedsBaseline     26 bytes
office-ui-fabric-react fluentui-react-ChoiceGroupOption 52.459 kB 52.485 kB ExceedsBaseline     26 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 55eaf9bccd4116c8134b0daf22fa15dc52661f0b (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 5, 2021

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 6356aeb:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 843 830 5000
BaseButton mount 883 883 5000
Breadcrumb mount 2565 2551 1000
ButtonNext mount 492 492 5000
Checkbox mount 1493 1495 5000
CheckboxBase mount 1246 1260 5000
ChoiceGroup mount 4667 4563 5000
ComboBox mount 957 933 1000
CommandBar mount 9915 9849 1000
ContextualMenu mount 5898 5955 1000
DefaultButton mount 1076 1094 5000
DetailsRow mount 3650 3672 5000
DetailsRowFast mount 3576 3659 5000
DetailsRowNoStyles mount 3415 3417 5000
Dialog mount 2168 2119 1000
DocumentCardTitle mount 130 143 1000
Dropdown mount 3151 3117 5000
FocusTrapZone mount 1791 1776 5000
FocusZone mount 1775 1769 5000
IconButton mount 1691 1725 5000
Label mount 326 316 5000
Layer mount 1735 1735 5000
Link mount 464 471 5000
MakeStyles mount 1795 1759 50000
MenuButton mount 1411 1425 5000
MessageBar mount 1958 1995 5000
Nav mount 3202 3182 1000
OverflowSet mount 1022 994 5000
Panel mount 2047 2033 1000
Persona mount 789 792 1000
Pivot mount 1376 1353 1000
PrimaryButton mount 1255 1227 5000
Rating mount 7466 7424 5000
SearchBox mount 1261 1235 5000
Shimmer mount 2430 2468 5000
Slider mount 1939 1875 5000
SpinButton mount 4802 4839 5000
Spinner mount 402 421 5000
SplitButton mount 3141 3085 5000
Stack mount 488 487 5000
StackWithIntrinsicChildren mount 1498 1515 5000
StackWithTextChildren mount 4428 4447 5000
SwatchColorPicker mount 9926 10006 5000
Tabs mount 1390 1380 1000
TagPicker mount 2334 2306 5000
TeachingBubble mount 11556 11604 5000
Text mount 406 407 5000
TextField mount 1327 1338 5000
ThemeProvider mount 1163 1138 5000
ThemeProvider virtual-rerender 578 581 5000
ThemeProviderNext mount 9001 8997 5000
Toggle mount 783 777 5000
buttonNative mount 106 109 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 158 145 1.09:1
TreeWith60ListItems.default 177 163 1.09:1
CarouselMinimalPerf.default 464 433 1.07:1
HeaderSlotsPerf.default 766 717 1.07:1
ButtonMinimalPerf.default 161 152 1.06:1
VideoMinimalPerf.default 613 578 1.06:1
DividerMinimalPerf.default 366 350 1.05:1
MenuMinimalPerf.default 832 794 1.05:1
TextAreaMinimalPerf.default 482 460 1.05:1
ImageMinimalPerf.default 375 359 1.04:1
MenuButtonMinimalPerf.default 1550 1497 1.04:1
AnimationMinimalPerf.default 412 400 1.03:1
CardMinimalPerf.default 568 550 1.03:1
FlexMinimalPerf.default 283 276 1.03:1
ListCommonPerf.default 606 590 1.03:1
AccordionMinimalPerf.default 145 142 1.02:1
AvatarMinimalPerf.default 194 190 1.02:1
ButtonSlotsPerf.default 538 526 1.02:1
ButtonUseCssPerf.default 790 773 1.02:1
LabelMinimalPerf.default 387 379 1.02:1
PopupMinimalPerf.default 565 555 1.02:1
FormMinimalPerf.default 394 390 1.01:1
LayoutMinimalPerf.default 366 362 1.01:1
ProviderMinimalPerf.default 990 980 1.01:1
StatusMinimalPerf.default 657 652 1.01:1
TreeMinimalPerf.default 763 758 1.01:1
ChatDuplicateMessagesPerf.default 278 279 1:1
ChatMinimalPerf.default 596 595 1:1
ChatWithPopoverPerf.default 345 346 1:1
CheckboxMinimalPerf.default 2689 2699 1:1
DatepickerMinimalPerf.default 5322 5314 1:1
DropdownMinimalPerf.default 3044 3043 1:1
EmbedMinimalPerf.default 4065 4056 1:1
LoaderMinimalPerf.default 686 685 1:1
PortalMinimalPerf.default 170 170 1:1
ProviderMergeThemesPerf.default 1655 1656 1:1
ReactionMinimalPerf.default 362 361 1:1
SegmentMinimalPerf.default 340 340 1:1
SplitButtonMinimalPerf.default 3674 3674 1:1
TableManyItemsPerf.default 1848 1853 1:1
TableMinimalPerf.default 394 394 1:1
TextMinimalPerf.default 347 346 1:1
CustomToolbarPrototype.default 3770 3780 1:1
TooltipMinimalPerf.default 939 937 1:1
BoxMinimalPerf.default 331 335 0.99:1
ButtonOverridesMissPerf.default 1651 1665 0.99:1
DialogMinimalPerf.default 723 733 0.99:1
DropdownManyItemsPerf.default 650 655 0.99:1
InputMinimalPerf.default 1245 1255 0.99:1
ItemLayoutMinimalPerf.default 1220 1230 0.99:1
ListNestedPerf.default 537 542 0.99:1
SkeletonMinimalPerf.default 340 345 0.99:1
AlertMinimalPerf.default 264 269 0.98:1
RadioGroupMinimalPerf.default 423 432 0.98:1
SliderMinimalPerf.default 1552 1583 0.98:1
ToolbarMinimalPerf.default 898 916 0.98:1
AttachmentSlotsPerf.default 1072 1106 0.97:1
ButtonUseCssNestingPerf.default 1004 1040 0.97:1
GridMinimalPerf.default 318 327 0.97:1
RosterPerf.default 1132 1163 0.97:1
RefMinimalPerf.default 230 238 0.97:1
IconMinimalPerf.default 582 597 0.97:1
HeaderMinimalPerf.default 353 367 0.96:1
ListMinimalPerf.default 481 504 0.95:1
ListWith60ListItems.default 608 640 0.95:1

@TristanWatanabe TristanWatanabe merged commit 8393089 into microsoft:master May 5, 2021
@TristanWatanabe TristanWatanabe deleted the 18004 branch May 5, 2021 22:13
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/theme-samples@v8.1.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tabs@v1.0.0-beta.90 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-monaco-editor@v1.1.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-toggle@v1.0.0-beta.88 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-slider@v1.0.0-beta.88 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-charting@v5.1.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-experiments@v8.1.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.22.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/public-docsite-resources@v8.1.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-docsite-components@v8.2.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/public-docsite@v8.2.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-date-time@v8.1.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/api-docs@v8.1.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/azure-themes@v8.1.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.14.3 has been released which incorporates this pull request.:tada:

Handy links:

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.

A small dot may appear in the middle of selected ChoiceGroup items
4 participants