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

Update Details and Grouped List chevron to rotate in the correct direction for RTL #13514

Merged
merged 2 commits into from Jun 10, 2020
Merged

Update Details and Grouped List chevron to rotate in the correct direction for RTL #13514

merged 2 commits into from Jun 10, 2020

Conversation

bcoard
Copy link
Contributor

@bcoard bcoard commented Jun 8, 2020

Pull request checklist

Description of changes

Currently all Details List headers and Grouped List headers chevrons rotate 90 degrees when expanded, regardless of RTL. With this change, if the user is in RTL, the chevron will rotate -90 degrees instead of 90 degrees.

Focus areas to test

Details Grouped List headers and Grouped List headers.

REDMOND\bcoard added 2 commits June 8, 2020 13:19
@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 888 893 5000
ButtonNext mount 407 406 5000
Checkbox mount 1642 1638 5000
CheckboxBase mount 1364 1336 5000
CheckboxNext mount 1616 1619 5000
ChoiceGroup mount 5006 4988 5000
ComboBox mount 948 935 1000
CommandBar mount 7185 7248 1000
ContextualMenu mount 12308 12395 1000
DefaultButton mount 1104 1089 5000
DetailsRow mount 3515 3499 5000
DetailsRowFast mount 3460 3548 5000
DetailsRowNoStyles mount 3249 3219 5000
Dialog mount 1473 1493 1000
DocumentCardTitle mount 1714 1694 1000
Dropdown mount 2449 2710 5000
FocusZone mount 1672 1649 5000
IconButton mount 1771 1798 5000
Label mount 321 337 5000
Link mount 509 487 5000
LinkNext mount 490 481 5000
MenuButton mount 1431 1496 5000
Nav mount 3187 3283 1000
Panel mount 1408 1451 1000
Persona mount 823 842 1000
Pivot mount 1370 1379 1000
PivotNext mount 1305 1363 1000
PrimaryButton mount 1273 1278 5000
SearchBox mount 1307 1326 5000
Slider mount 1511 1530 5000
SliderNext mount 1956 1938 5000
Spinner mount 445 425 5000
SplitButton mount 3020 3077 5000
Stack mount 493 511 5000
StackWithIntrinsicChildren mount 1954 1950 5000
StackWithTextChildren mount 5078 5005 5000
TagPicker mount 2755 2806 5000
Text mount 412 431 5000
TextField mount 1424 1431 5000
ThemeProvider mount 2660 2642 5000
ThemeProvider virtual-rerender 466 476 5000
Toggle mount 916 899 5000
ToggleNext mount 894 899 5000
button mount 106 94 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.47 0.46 1.02:1 2000 932
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 572
🔧 Checkbox.Fluent 0.61 0.36 1.69:1 1000 606
🦄 Dialog.Fluent 0.14 0.21 0.67:1 5000 715
🔧 Dropdown.Fluent 3.24 0.45 7.2:1 1000 3236
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 706
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 391
🔧 Slider.Fluent 1.51 0.36 4.19:1 1000 1508
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 360
🦄 Tooltip.Fluent 0.1 16.69 0.01:1 5000 477

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 164 140 1.17:1
LabelMinimalPerf.default 442 391 1.13:1
SegmentMinimalPerf.default 365 326 1.12:1
StatusMinimalPerf.default 742 670 1.11:1
ChatDuplicateMessagesPerf.default 430 392 1.1:1
ProviderMinimalPerf.default 887 825 1.08:1
Text.Fluent 360 333 1.08:1
Avatar.Fluent 932 869 1.07:1
AvatarMinimalPerf.default 496 470 1.06:1
DialogMinimalPerf.default 740 699 1.06:1
RefMinimalPerf.default 186 175 1.06:1
ToolbarMinimalPerf.default 943 891 1.06:1
AnimationMinimalPerf.default 647 618 1.05:1
HeaderMinimalPerf.default 357 340 1.05:1
HierarchicalTreeMinimalPerf.default 439 417 1.05:1
ListMinimalPerf.default 484 461 1.05:1
TableMinimalPerf.default 402 383 1.05:1
Button.Fluent 572 549 1.04:1
Dropdown.Fluent 3236 3119 1.04:1
Image.Fluent 391 375 1.04:1
ButtonMinimalPerf.default 174 169 1.03:1
CheckboxMinimalPerf.default 2765 2683 1.03:1
TextMinimalPerf.default 360 348 1.03:1
TextAreaMinimalPerf.default 477 465 1.03:1
CarouselMinimalPerf.default 452 445 1.02:1
EmbedMinimalPerf.default 1884 1852 1.02:1
FlexMinimalPerf.default 297 290 1.02:1
FormMinimalPerf.default 423 415 1.02:1
GridMinimalPerf.default 730 716 1.02:1
InputMinimalPerf.default 998 975 1.02:1
ItemLayoutMinimalPerf.default 1309 1288 1.02:1
LoaderMinimalPerf.default 704 693 1.02:1
PopupMinimalPerf.default 246 241 1.02:1
ProviderMergeThemesPerf.default 2038 2006 1.02:1
SplitButtonMinimalPerf.default 3452 3400 1.02:1
IconMinimalPerf.default 702 687 1.02:1
TooltipMinimalPerf.default 735 722 1.02:1
TreeMinimalPerf.default 854 836 1.02:1
BoxMinimalPerf.default 344 340 1.01:1
DropdownMinimalPerf.default 3211 3184 1.01:1
MenuMinimalPerf.default 846 836 1.01:1
MenuButtonMinimalPerf.default 1221 1211 1.01:1
RadioGroupMinimalPerf.default 421 416 1.01:1
TableManyItemsPerf.default 2210 2180 1.01:1
ChatWithPopoverPerf.default 469 470 1:1
ListWith60ListItems.default 1068 1070 1:1
SliderMinimalPerf.default 1513 1518 1:1
CustomToolbarPrototype.default 3792 3780 1:1
TreeWith60ListItems.default 215 215 1:1
Checkbox.Fluent 606 609 1:1
Dialog.Fluent 715 716 1:1
Icon.Fluent 706 703 1:1
AttachmentSlotsPerf.default 1132 1138 0.99:1
ChatMinimalPerf.default 591 599 0.99:1
DropdownManyItemsPerf.default 1318 1335 0.99:1
PortalMinimalPerf.default 113 114 0.99:1
Tooltip.Fluent 477 480 0.99:1
AccordionMinimalPerf.default 135 138 0.98:1
DividerMinimalPerf.default 351 358 0.98:1
HeaderSlotsPerf.default 784 797 0.98:1
ListNestedPerf.default 887 901 0.98:1
Slider.Fluent 1508 1533 0.98:1
AlertMinimalPerf.default 281 291 0.97:1
ButtonSlotsPerf.default 588 604 0.97:1
ImageMinimalPerf.default 376 387 0.97:1
ListCommonPerf.default 930 959 0.97:1
VideoMinimalPerf.default 602 622 0.97:1
ReactionMinimalPerf.default 388 403 0.96:1
CardMinimalPerf.default 537 564 0.95:1
LayoutMinimalPerf.default 382 407 0.94:1

@size-auditor
Copy link

size-auditor bot commented Jun 8, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-DetailsList 211.617 kB 211.663 kB ExceedsBaseline     46 bytes
office-ui-fabric-react fluentui-react-next-DetailsList 211.617 kB 211.663 kB ExceedsBaseline     46 bytes
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 222.33 kB 222.376 kB ExceedsBaseline     46 bytes
office-ui-fabric-react fluentui-react-next-ShimmeredDetailsList 222.33 kB 222.376 kB ExceedsBaseline     46 bytes
office-ui-fabric-react office-ui-fabric-react-GroupedList 109.639 kB 109.662 kB ExceedsBaseline     23 bytes
office-ui-fabric-react fluentui-react-next-GroupedList 109.639 kB 109.662 kB ExceedsBaseline     23 bytes

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

Baseline commit: b8f95604f4dbd30395cf6368457950838f03a7b6 (build)

@dzearing dzearing merged commit 2eb44fc into microsoft:master Jun 10, 2020
@bcoard
Copy link
Contributor Author

bcoard commented Jun 10, 2020

Thanks for taking a look at this PR @dzearing & @khmakoto!

@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.120.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot msft-github-bot mentioned this pull request Jun 12, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dzearing dzearing dzearing approved these changes

@khmakoto khmakoto khmakoto approved these changes

@aditima aditima Awaiting requested review from aditima

Assignees

@jdhuntington jdhuntington

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Grouped List chevron rotates the wrong way in RTL
5 participants
@bcoard @msft-github-bot @dzearing @khmakoto @jdhuntington