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: center align the start and end slot on tabs #14852

Merged
merged 3 commits into from
Sep 23, 2020
Merged

fix: center align the start and end slot on tabs #14852

merged 3 commits into from
Sep 23, 2020

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Sep 1, 2020 •
edited
Loading

Pull request checklist

Description of changes

set align-self to center on start and end, to align with the tab list.

Focus areas to test

(optional)

@khamudom khamudom requested a review from chrisdholt as a code owner September 1, 2020 21:39
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 1, 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 217dc6e:

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

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 1, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 956 932 5000
Breadcrumb mount 41042 41257 5000
BreadcrumbNext mount 151573 153676 5000
ButtonNext mount 556 578 5000
Checkbox mount 1598 1564 5000
CheckboxBase mount 1367 1389 5000
CheckboxNext mount 1531 1576 5000
ChoiceGroup mount 5012 5020 5000
ChoiceGroupNext mount 9370 9401 5000
ComboBox mount 913 923 1000
CommandBar mount 7443 7381 1000
ContextualMenu mount 12356 12540 1000
DefaultButton mount 1102 1135 5000
DetailsRow mount 3510 3613 5000
DetailsRowFast mount 3524 3524 5000
DetailsRowNoStyles mount 3337 3351 5000
Dialog mount 1487 1481 1000
DocumentCardTitle mount 1758 1739 1000
Dropdown mount 2625 2627 5000
FocusZone mount 1744 1749 5000
IconButton mount 1815 1798 5000
Label mount 342 342 5000
Layer mount 2027 2035 5000
LayerNext mount 1950 1905 5000
Link mount 453 434 5000
LinkNext mount 464 462 5000
MenuButton mount 1453 1488 5000
MessageBar mount 2028 2016 5000
MessageBarNext mount 1996 1993 5000
Nav mount 3223 3199 1000
OverflowSet mount 1363 1394 5000
OverflowSetNext mount 991 1023 5000
Panel mount 1490 1459 1000
Persona mount 839 840 1000
Pivot mount 1401 1414 1000
PivotNext mount 1388 1369 1000
PrimaryButton mount 1265 1270 5000
Rating mount 7839 7834 5000
RatingNext mount 7639 7798 5000
SearchBox mount 1349 1308 5000
SearchBoxNext mount 1451 1413 5000
Shimmer mount 2719 2741 5000
ShimmerNext mount 2567 2599 5000
Slider mount 1481 1507 5000
SliderNext mount 1935 1888 5000
SpinButton mount 5375 4954 5000
SpinButtonNext mount 5055 5092 5000
Spinner mount 416 414 5000
SplitButton mount 3147 3103 5000
Stack mount 526 521 5000
StackWithIntrinsicChildren mount 1825 1955 5000
StackWithTextChildren mount 5064 5089 5000
SwatchColorPicker mount 10189 10142 5000
SwatchColorPickerNext mount 10194 10119 5000
TagPicker mount 2808 2785 5000
TeachingBubble mount 48001 48068 5000
TeachingBubbleNext mount 11183 11227 5000
Text mount 437 438 5000
TextField mount 1400 1410 5000
ThemeProvider mount 3087 3054 5000
ThemeProvider virtual-rerender 591 588 5000
Toggle mount 816 860 5000
ToggleNext mount 820 794 5000
button mount 109 114 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 1771 43 41.19:1 analysis
ButtonUseCssNestingPerf.default 1158 45 25.73:1 analysis
ButtonUseCssPerf.default 880 46 19.13:1 analysis
ChatWithPopoverPerf.default 499 493 1.01:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.52 0.9:1 2000 947
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 650
🔧 Checkbox.Fluent 0.67 0.39 1.72:1 1000 673
🎯 Dialog.Fluent 0.17 0.24 0.71:1 5000 873
🔧 Dropdown.Fluent 3.07 0.52 5.9:1 1000 3074
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 778
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 469
🔧 Slider.Fluent 1.61 0.38 4.24:1 1000 1608
🔧 Text.Fluent 0.08 0.04 2:1 5000 414
🦄 Tooltip.Fluent 0.12 15.98 0.01:1 5000 593

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 173 123 1.41:1
RefMinimalPerf.default 253 201 1.26:1
AttachmentMinimalPerf.default 190 157 1.21:1
FlexMinimalPerf.default 348 290 1.2:1
RadioGroupMinimalPerf.default 539 450 1.2:1
TableMinimalPerf.default 486 406 1.2:1
BoxMinimalPerf.default 421 354 1.19:1
LayoutMinimalPerf.default 468 394 1.19:1
GridMinimalPerf.default 404 343 1.18:1
ReactionMinimalPerf.default 489 416 1.18:1
AnimationMinimalPerf.default 454 388 1.17:1
TextMinimalPerf.default 412 351 1.17:1
Image.Fluent 469 401 1.17:1
HeaderMinimalPerf.default 434 373 1.16:1
ImageMinimalPerf.default 443 381 1.16:1
SkeletonMinimalPerf.default 487 419 1.16:1
StatusMinimalPerf.default 852 733 1.16:1
Button.Fluent 650 558 1.16:1
Text.Fluent 414 357 1.16:1
DividerMinimalPerf.default 426 371 1.15:1
ListMinimalPerf.default 573 499 1.15:1
AccordionMinimalPerf.default 176 154 1.14:1
FormMinimalPerf.default 494 433 1.14:1
LabelMinimalPerf.default 479 426 1.12:1
TextAreaMinimalPerf.default 575 515 1.12:1
TreeMinimalPerf.default 994 889 1.12:1
Tooltip.Fluent 593 529 1.12:1
ChatMinimalPerf.default 703 635 1.11:1
SegmentMinimalPerf.default 403 363 1.11:1
IconMinimalPerf.default 784 706 1.11:1
MenuMinimalPerf.default 997 908 1.1:1
VideoMinimalPerf.default 727 659 1.1:1
HeaderSlotsPerf.default 910 835 1.09:1
PopupMinimalPerf.default 764 698 1.09:1
AvatarMinimalPerf.default 526 489 1.08:1
ChatDuplicateMessagesPerf.default 474 438 1.08:1
ToolbarMinimalPerf.default 1045 972 1.08:1
TooltipMinimalPerf.default 852 790 1.08:1
Dialog.Fluent 873 808 1.08:1
ButtonMinimalPerf.default 203 189 1.07:1
ButtonSlotsPerf.default 653 618 1.06:1
CardMinimalPerf.default 636 601 1.06:1
DialogMinimalPerf.default 870 821 1.06:1
MenuButtonMinimalPerf.default 1761 1654 1.06:1
ProviderMinimalPerf.default 989 930 1.06:1
AlertMinimalPerf.default 330 313 1.05:1
ProviderMergeThemesPerf.default 2065 1968 1.05:1
AttachmentSlotsPerf.default 1203 1162 1.04:1
CarouselMinimalPerf.default 503 485 1.04:1
EmbedMinimalPerf.default 2107 2019 1.04:1
ItemLayoutMinimalPerf.default 1372 1318 1.04:1
TableManyItemsPerf.default 2433 2335 1.04:1
Icon.Fluent 778 749 1.04:1
CheckboxMinimalPerf.default 3013 2930 1.03:1
CustomToolbarPrototype.default 3811 3709 1.03:1
Checkbox.Fluent 673 653 1.03:1
DropdownMinimalPerf.default 3007 2954 1.02:1
LoaderMinimalPerf.default 766 748 1.02:1
SliderMinimalPerf.default 1592 1554 1.02:1
SplitButtonMinimalPerf.default 4089 4005 1.02:1
Avatar.Fluent 947 925 1.02:1
Dropdown.Fluent 3074 3017 1.02:1
InputMinimalPerf.default 1346 1334 1.01:1
TreeWith60ListItems.default 224 221 1.01:1
Slider.Fluent 1608 1594 1.01:1
DropdownManyItemsPerf.default 814 814 1:1
ListWith60ListItems.default 1039 1187 0.88:1
ListCommonPerf.default 743 1003 0.74:1
ListNestedPerf.default 656 936 0.7:1

@size-auditor
Copy link

size-auditor bot commented Sep 1, 2020 •
edited
Loading

Asset size changes

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

Baseline commit: 4c228610494394bb291deec6a220c8659be4e98c (build)

@khamudom khamudom force-pushed the users/khamu/tabs-start-end-center branch from e9fa5bd to 217dc6e Compare September 23, 2020 01:24
@chrisdholt chrisdholt merged commit 7a02678 into microsoft:master Sep 23, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

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