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

fix: centered the indeterminate indicator inside the checkbox component #14836

Merged

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Sep 1, 2020

Pull request checklist

Description of changes

Update to center the indicator by setting top and left to 50% and shifting it up and left by half of its own width and height, because the indicator is off by a pixel.

Focus areas to test

(optional)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 1, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 895 888 5000
Breadcrumb mount 41939 42302 5000
BreadcrumbNext mount 156155 157997 5000
ButtonNext mount 555 563 5000
Checkbox mount 1535 1526 5000
CheckboxBase mount 1289 1376 5000
CheckboxNext mount 1540 1473 5000
ChoiceGroup mount 4688 4813 5000
ChoiceGroupNext mount 9318 9243 5000
ComboBox mount 930 1014 1000
CommandBar mount 7613 7668 1000
ContextualMenu mount 13737 14130 1000
DefaultButton mount 1073 1109 5000
DetailsRow mount 3523 3562 5000
DetailsRowFast mount 3501 3594 5000
DetailsRowNoStyles mount 3412 3325 5000
Dialog mount 1509 1465 1000
DocumentCardTitle mount 1773 1872 1000
Dropdown mount 2595 2537 5000
FocusZone mount 1838 1861 5000
IconButton mount 1688 1753 5000
Label mount 359 360 5000
Layer mount 1966 1959 5000
LayerNext mount 1880 1872 5000
Link mount 475 449 5000
LinkNext mount 464 465 5000
MenuButton mount 1443 1453 5000
MessageBar mount 2071 2063 5000
MessageBarNext mount 2062 2093 5000
Nav mount 3226 3154 1000
OverflowSet mount 1384 1415 5000
OverflowSetNext mount 1034 1027 5000
Panel mount 1445 1417 1000
Persona mount 866 856 1000
Pivot mount 1439 1417 1000
PivotNext mount 1396 1387 1000
PrimaryButton mount 1268 1280 5000
Rating mount 7515 7715 5000
RatingNext mount 7426 7426 5000
SearchBox mount 1173 1219 5000
SearchBoxNext mount 1267 1258 5000
Shimmer mount 2525 2496 5000
ShimmerNext mount 2454 2483 5000
Slider mount 1483 1449 5000
SliderNext mount 1847 1828 5000
SpinButton mount 4851 4975 5000
SpinButtonNext mount 5070 4936 5000
Spinner mount 411 415 5000
SplitButton mount 3047 3052 5000
Stack mount 519 520 5000
StackWithIntrinsicChildren mount 1909 1840 5000
StackWithTextChildren mount 5007 4835 5000
SwatchColorPicker mount 9857 10095 5000
SwatchColorPickerNext mount 10049 10206 5000
TagPicker mount 2712 2754 5000
TeachingBubble mount 49505 51092 5000
TeachingBubbleNext mount 11477 11319 5000
Text mount 401 430 5000
TextField mount 1323 1402 5000
ThemeProvider mount 3137 3132 5000
ThemeProvider virtual-rerender 585 598 5000
Toggle mount 832 818 5000
ToggleNext mount 814 797 5000
button mount 108 120 5000

Perf Analysis (Fluent)

⚠️ 4 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1714 45 38.09:1 analysis
ButtonUseCssNestingPerf.default 1103 44 25.07:1 analysis
ButtonUseCssPerf.default 831 43 19.33:1 analysis
ChatWithPopoverPerf.default 487 485 1:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.49 0.92:1 2000 896
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 602
🔧 Checkbox.Fluent 0.67 0.35 1.91:1 1000 671
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 836
🔧 Dropdown.Fluent 3.04 0.48 6.33:1 1000 3040
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 752
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 414
🔧 Slider.Fluent 1.67 0.36 4.64:1 1000 1667
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 396
🦄 Tooltip.Fluent 0.12 17.57 0.01:1 5000 584

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 188 123 1.53:1
RefMinimalPerf.default 278 203 1.37:1
GridMinimalPerf.default 392 314 1.25:1
BoxMinimalPerf.default 393 319 1.23:1
FormMinimalPerf.default 440 361 1.22:1
Text.Fluent 396 329 1.2:1
FlexMinimalPerf.default 327 275 1.19:1
HeaderMinimalPerf.default 404 341 1.18:1
RadioGroupMinimalPerf.default 459 389 1.18:1
StatusMinimalPerf.default 755 645 1.17:1
Tooltip.Fluent 584 499 1.17:1
ImageMinimalPerf.default 412 355 1.16:1
SegmentMinimalPerf.default 365 316 1.16:1
AttachmentMinimalPerf.default 168 146 1.15:1
ButtonMinimalPerf.default 188 163 1.15:1
ListMinimalPerf.default 528 460 1.15:1
TextMinimalPerf.default 371 324 1.15:1
AnimationMinimalPerf.default 444 391 1.14:1
LabelMinimalPerf.default 457 401 1.14:1
ReactionMinimalPerf.default 432 379 1.14:1
SkeletonMinimalPerf.default 428 375 1.14:1
TableMinimalPerf.default 439 385 1.14:1
ToolbarMinimalPerf.default 1043 917 1.14:1
TextAreaMinimalPerf.default 510 452 1.13:1
VideoMinimalPerf.default 677 601 1.13:1
Image.Fluent 414 366 1.13:1
LayoutMinimalPerf.default 436 389 1.12:1
MenuMinimalPerf.default 909 811 1.12:1
PopupMinimalPerf.default 732 656 1.12:1
TreeMinimalPerf.default 967 871 1.11:1
AccordionMinimalPerf.default 163 148 1.1:1
CardMinimalPerf.default 578 530 1.09:1
Dialog.Fluent 836 769 1.09:1
CarouselMinimalPerf.default 463 429 1.08:1
DialogMinimalPerf.default 813 755 1.08:1
Checkbox.Fluent 671 627 1.07:1
Icon.Fluent 752 703 1.07:1
AvatarMinimalPerf.default 479 453 1.06:1
HeaderSlotsPerf.default 807 759 1.06:1
MenuButtonMinimalPerf.default 1607 1512 1.06:1
ProviderMergeThemesPerf.default 2039 1923 1.06:1
SplitButtonMinimalPerf.default 3942 3719 1.06:1
TooltipMinimalPerf.default 872 824 1.06:1
Button.Fluent 602 566 1.06:1
EmbedMinimalPerf.default 2005 1918 1.05:1
ProviderMinimalPerf.default 968 922 1.05:1
Avatar.Fluent 896 854 1.05:1
AttachmentSlotsPerf.default 1151 1112 1.04:1
CheckboxMinimalPerf.default 2943 2832 1.04:1
DividerMinimalPerf.default 383 368 1.04:1
InputMinimalPerf.default 1363 1309 1.04:1
ChatMinimalPerf.default 636 616 1.03:1
DropdownMinimalPerf.default 3043 2966 1.03:1
ItemLayoutMinimalPerf.default 1307 1274 1.03:1
AlertMinimalPerf.default 314 307 1.02:1
ButtonSlotsPerf.default 617 607 1.02:1
ChatDuplicateMessagesPerf.default 424 415 1.02:1
LoaderMinimalPerf.default 768 754 1.02:1
IconMinimalPerf.default 694 680 1.02:1
CustomToolbarPrototype.default 4027 3960 1.02:1
Slider.Fluent 1667 1633 1.02:1
TableManyItemsPerf.default 2150 2149 1:1
Dropdown.Fluent 3040 3036 1:1
SliderMinimalPerf.default 1581 1621 0.98:1
TreeWith60ListItems.default 221 226 0.98:1
DropdownManyItemsPerf.default 735 757 0.97:1
ListWith60ListItems.default 979 1081 0.91:1
ListCommonPerf.default 687 968 0.71:1
ListNestedPerf.default 618 892 0.69:1

@size-auditor
Copy link

size-auditor bot commented Sep 1, 2020

Asset size changes

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

Baseline commit: ed851559770bc8aa7348ac4e93e63f17fa27c9bc (build)

@khamudom khamudom force-pushed the users/khamu/indeterminate-indicator branch from f92d105 to 2ca6da7 Compare September 1, 2020 16:55
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 1, 2020

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 80939d5:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

Comment on lines +71 to +75
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
Copy link
Member

Choose a reason for hiding this comment

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

Can you run yarn change to generate a change report so this can be published correctly? That will help the build pass as well :).

@khamudom khamudom force-pushed the users/khamu/indeterminate-indicator branch from 7282684 to 80939d5 Compare September 22, 2020 21:49
@chrisdholt chrisdholt merged commit 4c22861 into microsoft:master Sep 23, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot msft-github-bot mentioned this pull request Sep 24, 2020
2 tasks
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.

3 participants