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.

Sign up for GitHub

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

Jump to bottom

Fix web component radio group orientation #15953

Merged
merged 11 commits into from
Nov 17, 2020
Merged

Fix web component radio group orientation #15953

merged 11 commits into from
Nov 17, 2020

Conversation

eljefe223
Copy link
Contributor

Pull request checklist

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

Description of changes

Changing radio group orientation to vertical seems to have no effect on layout. This change fixes that issue.

Before:
Screen Shot 2020-11-16 at 1 02 33 PM

After:
Screen Shot 2020-11-16 at 1 02 38 PM

@chrisdholt chrisdholt changed the title Users/jes/radiogroup orientation Fix web component radio group orientation Nov 16, 2020
@chrisdholt chrisdholt assigned chrisdholt and unassigned behowell Nov 16, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 16, 2020 •
edited
Loading

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

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

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Nov 16, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 906 894 5000
BaseButtonCompat mount 990 993 5000
Breadcrumb mount 43206 43117 5000
Checkbox mount 1601 1644 5000
CheckboxBase mount 1350 1400 5000
ChoiceGroup mount 5121 5136 5000
ComboBox mount 1090 1059 1000
CommandBar mount 10867 10821 1000
ContextualMenu mount 6413 6604 1000
DefaultButtonCompat mount 1206 1269 5000
DetailsRow mount 3868 3911 5000
DetailsRowFast mount 3979 3991 5000
DetailsRowNoStyles mount 3729 3693 5000
Dialog mount 1584 1554 1000
DocumentCardTitle mount 1865 1870 1000
Dropdown mount 3678 3610 5000
FocusTrapZone mount 1882 1886 5000
FocusZone mount 1853 1994 5000
IconButtonCompat mount 1910 1903 5000
Label mount 362 348 5000
Layer mount 1896 1929 5000
Link mount 494 527 5000
MenuButtonCompat mount 1581 1617 5000
MessageBar mount 2077 2073 5000
Nav mount 3488 3474 1000
OverflowSet mount 1092 1070 5000
Panel mount 1472 1458 1000
Persona mount 926 914 1000
Pivot mount 1494 1507 1000
PrimaryButtonCompat mount 1349 1358 5000
Rating mount 8115 8066 5000
SearchBox mount 1461 1417 5000
Shimmer mount 2726 2776 5000
Slider mount 2001 1950 5000
SpinButton mount 5310 5398 5000
Spinner mount 418 426 5000
SplitButtonCompat mount 3335 3289 5000
Stack mount 533 550 5000
StackWithIntrinsicChildren mount 1651 1671 5000
StackWithTextChildren mount 5008 4968 5000
SwatchColorPicker mount 10569 10798 5000
Tabs mount 1441 1464 1000
TagPicker mount 2829 2901 5000
TeachingBubble mount 11862 11903 5000
Text mount 435 446 5000
TextField mount 1453 1456 5000
ThemeProvider mount 2064 2079 5000
ThemeProvider virtual-rerender 657 653 5000
Toggle mount 845 845 5000
button mount 691 699 5000
buttonNative mount 107 126 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.53 0.92:1 2000 976
🦄 Button.Fluent 0.13 0.25 0.52:1 5000 667
🔧 Checkbox.Fluent 0.68 0.38 1.79:1 1000 682
🎯 Dialog.Fluent 0.18 0.23 0.78:1 5000 882
🔧 Dropdown.Fluent 3.07 0.44 6.98:1 1000 3070
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 813
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 464
🔧 Slider.Fluent 1.64 0.46 3.57:1 1000 1638
🔧 Text.Fluent 0.08 0.04 2:1 5000 416
🦄 Tooltip.Fluent 0.12 0.93 0.13:1 5000 613

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 366 324 1.13:1
AttachmentMinimalPerf.default 192 178 1.08:1
ChatWithPopoverPerf.default 534 497 1.07:1
PortalMinimalPerf.default 182 170 1.07:1
TooltipMinimalPerf.default 928 878 1.06:1
ButtonSlotsPerf.default 695 659 1.05:1
TextAreaMinimalPerf.default 593 566 1.05:1
ButtonUseCssPerf.default 949 913 1.04:1
LabelMinimalPerf.default 526 508 1.04:1
LayoutMinimalPerf.default 479 461 1.04:1
ListCommonPerf.default 740 712 1.04:1
SegmentMinimalPerf.default 424 408 1.04:1
TableManyItemsPerf.default 2513 2423 1.04:1
VideoMinimalPerf.default 752 724 1.04:1
ButtonOverridesMissPerf.default 1865 1807 1.03:1
ButtonUseCssNestingPerf.default 1205 1172 1.03:1
FormMinimalPerf.default 500 487 1.03:1
HeaderMinimalPerf.default 429 415 1.03:1
IconMinimalPerf.default 770 748 1.03:1
Tooltip.Fluent 613 596 1.03:1
AnimationMinimalPerf.default 474 464 1.02:1
ButtonMinimalPerf.default 216 212 1.02:1
CardMinimalPerf.default 674 661 1.02:1
ChatMinimalPerf.default 705 688 1.02:1
DropdownMinimalPerf.default 3100 3054 1.02:1
ImageMinimalPerf.default 461 454 1.02:1
ItemLayoutMinimalPerf.default 1467 1434 1.02:1
LoaderMinimalPerf.default 813 799 1.02:1
MenuButtonMinimalPerf.default 1761 1732 1.02:1
ProviderMinimalPerf.default 1090 1070 1.02:1
RadioGroupMinimalPerf.default 503 491 1.02:1
ReactionMinimalPerf.default 489 480 1.02:1
SliderMinimalPerf.default 1694 1666 1.02:1
StatusMinimalPerf.default 831 814 1.02:1
CustomToolbarPrototype.default 4160 4066 1.02:1
Image.Fluent 464 454 1.02:1
BoxMinimalPerf.default 446 441 1.01:1
DatepickerMinimalPerf.default 50134 49865 1.01:1
DividerMinimalPerf.default 452 449 1.01:1
DropdownManyItemsPerf.default 827 821 1.01:1
HeaderSlotsPerf.default 892 880 1.01:1
ListWith60ListItems.default 1028 1021 1.01:1
MenuMinimalPerf.default 996 982 1.01:1
ProviderMergeThemesPerf.default 2128 2111 1.01:1
SkeletonMinimalPerf.default 501 498 1.01:1
TreeMinimalPerf.default 991 983 1.01:1
AlertMinimalPerf.default 334 333 1:1
AttachmentSlotsPerf.default 1241 1243 1:1
CarouselMinimalPerf.default 510 512 1:1
EmbedMinimalPerf.default 2126 2119 1:1
GridMinimalPerf.default 410 409 1:1
InputMinimalPerf.default 1413 1420 1:1
SplitButtonMinimalPerf.default 4123 4118 1:1
TreeWith60ListItems.default 221 222 1:1
Checkbox.Fluent 682 684 1:1
Dialog.Fluent 882 885 1:1
Icon.Fluent 813 812 1:1
CheckboxMinimalPerf.default 3088 3120 0.99:1
DialogMinimalPerf.default 857 869 0.99:1
ListMinimalPerf.default 554 558 0.99:1
RefMinimalPerf.default 251 254 0.99:1
ToolbarMinimalPerf.default 1055 1065 0.99:1
Dropdown.Fluent 3070 3098 0.99:1
Slider.Fluent 1638 1659 0.99:1
AvatarMinimalPerf.default 534 544 0.98:1
PopupMinimalPerf.default 748 764 0.98:1
Button.Fluent 667 681 0.98:1
ChatDuplicateMessagesPerf.default 462 475 0.97:1
Text.Fluent 416 428 0.97:1
ListNestedPerf.default 632 659 0.96:1
Avatar.Fluent 976 1024 0.95:1
AccordionMinimalPerf.default 168 178 0.94:1
TextMinimalPerf.default 425 454 0.94:1
TableMinimalPerf.default 454 496 0.92:1

@size-auditor
Copy link

size-auditor bot commented Nov 16, 2020 •
edited
Loading

Asset size changes

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

Baseline commit: 16bb581c41bc50a285f39791e21da71d1e6c0441 (build)

@eljefe223 eljefe223 force-pushed the users/jes/radiogroup-orientation branch from d328639 to 61f7691 Compare November 16, 2020 23:43
@eljefe223 eljefe223 force-pushed the users/jes/radiogroup-orientation branch from 61f7691 to acfa184 Compare November 17, 2020 22:24
@chrisdholt chrisdholt merged commit 5467837 into microsoft:master Nov 17, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/web-components@v0.8.0 has been released which incorporates this pull request.:tada:

Handy links:

SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 23, 2020
@eljefe223
Fix web component radio group orientation (microsoft#15953)
fbdceb4 
* fix: radio group orientation vertical broken

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdholt chrisdholt chrisdholt approved these changes

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@eljefe223 @msft-github-bot @chrisdholt @behowell