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 (web components): inline start margin rtl slider #16356

Conversation

SethDonohue
Copy link
Contributor

Pull request checklist

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

Description of changes

Adds inline-start-margin to Slider for RTL mode.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 4, 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 3490ab0:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 863 864 5000
BaseButtonCompat mount 979 959 5000
Breadcrumb mount 45644 45454 5000
Checkbox mount 1682 1653 5000
CheckboxBase mount 1395 1370 5000
ChoiceGroup mount 5229 5176 5000
ComboBox mount 1033 1056 1000
CommandBar mount 10651 10763 1000
ContextualMenu mount 6468 6454 1000
DefaultButtonCompat mount 1229 1219 5000
DetailsRow mount 3926 4019 5000
DetailsRowFast mount 4060 3995 5000
DetailsRowNoStyles mount 3804 3755 5000
Dialog mount 1608 1641 1000
DocumentCardTitle mount 1885 1893 1000
Dropdown mount 3624 3603 5000
FocusTrapZone mount 1878 1938 5000
FocusZone mount 1980 2001 5000
IconButtonCompat mount 1926 1934 5000
Label mount 354 369 5000
Layer mount 1957 1948 5000
Link mount 505 504 5000
MakeStyles mount 2096 2120 50000
MenuButtonCompat mount 1619 1611 5000
MessageBar mount 2080 2177 5000
Nav mount 3501 3509 1000
OverflowSet mount 1113 1128 5000
Panel mount 1526 1556 1000
Persona mount 918 944 1000
Pivot mount 1485 1505 1000
PrimaryButtonCompat mount 1382 1414 5000
Rating mount 8265 8266 5000
SearchBox mount 1451 1459 5000
Shimmer mount 2856 2849 5000
Slider mount 2116 2052 5000
SpinButton mount 5376 5354 5000
Spinner mount 432 449 5000
SplitButtonCompat mount 3396 3496 5000
Stack mount 544 536 5000
StackWithIntrinsicChildren mount 1657 1646 5000
StackWithTextChildren mount 4859 4945 5000
SwatchColorPicker mount 10928 10936 5000
Tabs mount 1532 1477 1000
TagPicker mount 3063 3117 5000
TeachingBubble mount 12363 12283 5000
Text mount 457 449 5000
TextField mount 1533 1528 5000
ThemeProvider mount 2253 2269 5000
ThemeProvider virtual-rerender 696 666 5000
Toggle mount 857 848 5000
button mount 718 699 5000
buttonNative mount 120 121 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.53 0.94:1 2000 1001
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 639
🔧 Checkbox.Fluent 0.65 0.35 1.86:1 1000 653
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 865
🔧 Dropdown.Fluent 2.99 0.43 6.95:1 1000 2994
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 785
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 458
🔧 Slider.Fluent 1.62 0.46 3.52:1 1000 1617
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 401
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 583

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ImageMinimalPerf.default 464 416 1.12:1
TextAreaMinimalPerf.default 585 548 1.07:1
GridMinimalPerf.default 411 388 1.06:1
PortalMinimalPerf.default 171 162 1.06:1
ReactionMinimalPerf.default 469 444 1.06:1
AnimationMinimalPerf.default 448 428 1.05:1
CarouselMinimalPerf.default 505 479 1.05:1
FlexMinimalPerf.default 348 332 1.05:1
HeaderSlotsPerf.default 923 882 1.05:1
ButtonSlotsPerf.default 644 618 1.04:1
HeaderMinimalPerf.default 422 404 1.04:1
SkeletonMinimalPerf.default 419 403 1.04:1
VideoMinimalPerf.default 757 728 1.04:1
AvatarMinimalPerf.default 525 512 1.03:1
ChatDuplicateMessagesPerf.default 452 437 1.03:1
ChatMinimalPerf.default 696 679 1.03:1
ListNestedPerf.default 640 624 1.03:1
RadioGroupMinimalPerf.default 498 485 1.03:1
IconMinimalPerf.default 794 770 1.03:1
TooltipMinimalPerf.default 920 894 1.03:1
Avatar.Fluent 1001 973 1.03:1
Button.Fluent 639 623 1.03:1
Image.Fluent 458 446 1.03:1
BoxMinimalPerf.default 405 399 1.02:1
ButtonUseCssNestingPerf.default 1146 1125 1.02:1
ChatWithPopoverPerf.default 505 497 1.02:1
DialogMinimalPerf.default 871 854 1.02:1
LayoutMinimalPerf.default 463 454 1.02:1
PopupMinimalPerf.default 743 730 1.02:1
SliderMinimalPerf.default 1592 1564 1.02:1
TreeMinimalPerf.default 894 875 1.02:1
Dialog.Fluent 865 844 1.02:1
Text.Fluent 401 393 1.02:1
DropdownMinimalPerf.default 3038 2999 1.01:1
EmbedMinimalPerf.default 4321 4268 1.01:1
ListWith60ListItems.default 996 984 1.01:1
RefMinimalPerf.default 236 234 1.01:1
TableManyItemsPerf.default 2457 2428 1.01:1
AttachmentMinimalPerf.default 182 182 1:1
ButtonOverridesMissPerf.default 1753 1752 1:1
ButtonUseCssPerf.default 886 887 1:1
DatepickerMinimalPerf.default 48487 48381 1:1
FormMinimalPerf.default 485 484 1:1
InputMinimalPerf.default 1348 1349 1:1
ItemLayoutMinimalPerf.default 1410 1403 1:1
LabelMinimalPerf.default 471 470 1:1
ListMinimalPerf.default 540 542 1:1
LoaderMinimalPerf.default 774 771 1:1
MenuMinimalPerf.default 941 943 1:1
MenuButtonMinimalPerf.default 1709 1701 1:1
ProviderMergeThemesPerf.default 2021 2014 1:1
SplitButtonMinimalPerf.default 3956 3946 1:1
CustomToolbarPrototype.default 3996 3984 1:1
Dropdown.Fluent 2994 2988 1:1
Icon.Fluent 785 788 1:1
Slider.Fluent 1617 1610 1:1
AlertMinimalPerf.default 343 345 0.99:1
CardMinimalPerf.default 626 630 0.99:1
CheckboxMinimalPerf.default 2954 2971 0.99:1
DropdownManyItemsPerf.default 800 807 0.99:1
ListCommonPerf.default 712 718 0.99:1
ProviderMinimalPerf.default 1017 1023 0.99:1
SegmentMinimalPerf.default 399 405 0.99:1
TableMinimalPerf.default 491 497 0.99:1
DividerMinimalPerf.default 417 425 0.98:1
Tooltip.Fluent 583 594 0.98:1
AttachmentSlotsPerf.default 1167 1198 0.97:1
StatusMinimalPerf.default 804 830 0.97:1
ToolbarMinimalPerf.default 1035 1074 0.96:1
TreeWith60ListItems.default 215 223 0.96:1
AccordionMinimalPerf.default 162 170 0.95:1
Checkbox.Fluent 653 693 0.94:1
ButtonMinimalPerf.default 188 202 0.93:1
TextMinimalPerf.default 435 470 0.93:1

@size-auditor
Copy link

size-auditor bot commented Jan 4, 2021

Asset size changes

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

Baseline commit: 16797f484b2af348f136ba306e1f392721c45e1c (build)

@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-inline-start-margin-rtl-slider branch from fbd8f4b to 3490ab0 Compare January 4, 2021 21:37
@chrisdholt chrisdholt merged commit 46055c7 into microsoft:master Jan 5, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@SethDonohue SethDonohue deleted the users/v-sedono/fix-inline-start-margin-rtl-slider branch January 5, 2021 17:59
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.

5 participants