-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
Dropdown: Removing unintended extra height #20636
Dropdown: Removing unintended extra height #20636
Conversation
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 48d876c:
|
Asset size changes
Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B Baseline commit: 8825574c42f414c26f9d49238be02ca7dcb44cfe (build) |
📊 Bundle size report🤖 This report was generated against 8825574c42f414c26f9d49238be02ca7dcb44cfe |
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 995 | 981 | 5000 | |
BaseButton | mount | 965 | 985 | 5000 | |
Breadcrumb | mount | 2668 | 2660 | 1000 | |
ButtonNext | mount | 534 | 533 | 5000 | |
Checkbox | mount | 1521 | 1582 | 5000 | |
CheckboxBase | mount | 1309 | 1301 | 5000 | |
ChoiceGroup | mount | 4812 | 4782 | 5000 | |
ComboBox | mount | 1026 | 1038 | 1000 | |
CommandBar | mount | 10615 | 10511 | 1000 | |
ContextualMenu | mount | 8595 | 8813 | 1000 | |
DefaultButton | mount | 1207 | 1204 | 5000 | |
DetailsRow | mount | 3818 | 3899 | 5000 | |
DetailsRowFast | mount | 3978 | 4015 | 5000 | |
DetailsRowNoStyles | mount | 3780 | 3640 | 5000 | |
Dialog | mount | 2685 | 2704 | 1000 | |
DocumentCardTitle | mount | 175 | 186 | 1000 | |
Dropdown | mount | 3394 | 3389 | 5000 | |
FluentProviderNext | mount | 4249 | 4254 | 5000 | |
FluentProviderWithTheme | mount | 250 | 250 | 10 | |
FluentProviderWithTheme | virtual-rerender | 101 | 107 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 290 | 275 | 10 | |
FocusTrapZone | mount | 1887 | 1880 | 5000 | |
FocusZone | mount | 1900 | 1842 | 5000 | |
IconButton | mount | 1833 | 1786 | 5000 | |
Label | mount | 362 | 362 | 5000 | |
Layer | mount | 3026 | 3088 | 5000 | |
Link | mount | 510 | 504 | 5000 | |
MakeStyles | mount | 1841 | 1845 | 50000 | |
MenuButton | mount | 1522 | 1504 | 5000 | |
MessageBar | mount | 2138 | 2036 | 5000 | |
Nav | mount | 3437 | 3377 | 1000 | |
OverflowSet | mount | 1133 | 1198 | 5000 | |
Panel | mount | 2550 | 2556 | 1000 | |
Persona | mount | 880 | 876 | 1000 | |
Pivot | mount | 1537 | 1611 | 1000 | |
PrimaryButton | mount | 1314 | 1343 | 5000 | |
Rating | mount | 7986 | 7989 | 5000 | |
SearchBox | mount | 1368 | 1458 | 5000 | |
Shimmer | mount | 2528 | 2630 | 5000 | |
Slider | mount | 2040 | 2060 | 5000 | |
SpinButton | mount | 5223 | 5242 | 5000 | |
Spinner | mount | 449 | 451 | 5000 | |
SplitButton | mount | 3352 | 3276 | 5000 | |
Stack | mount | 548 | 518 | 5000 | |
StackWithIntrinsicChildren | mount | 1747 | 1777 | 5000 | |
StackWithTextChildren | mount | 4844 | 4940 | 5000 | |
SwatchColorPicker | mount | 10872 | 10876 | 5000 | |
TagPicker | mount | 2824 | 2817 | 5000 | |
TeachingBubble | mount | 13666 | 13592 | 5000 | |
Text | mount | 458 | 459 | 5000 | |
TextField | mount | 1400 | 1421 | 5000 | |
ThemeProvider | mount | 1216 | 1267 | 5000 | |
ThemeProvider | virtual-rerender | 613 | 618 | 5000 | |
ThemeProvider | virtual-rerender-with-unmount | 1977 | 1933 | 5000 | |
Toggle | mount | 825 | 838 | 5000 | |
buttonNative | mount | 149 | 145 | 5000 |
Perf Analysis (@fluentui/react-northstar
)
Perf tests with no regressions
Scenario | Current PR Ticks | Baseline Ticks | Ratio |
---|---|---|---|
TextMinimalPerf.default | 364 | 332 | 1.1:1 |
AvatarMinimalPerf.default | 218 | 203 | 1.07:1 |
LayoutMinimalPerf.default | 393 | 372 | 1.06:1 |
TextAreaMinimalPerf.default | 515 | 486 | 1.06:1 |
FlexMinimalPerf.default | 312 | 296 | 1.05:1 |
ListCommonPerf.default | 648 | 618 | 1.05:1 |
PortalMinimalPerf.default | 196 | 187 | 1.05:1 |
ChatWithPopoverPerf.default | 412 | 396 | 1.04:1 |
EmbedMinimalPerf.default | 4516 | 4353 | 1.04:1 |
LabelMinimalPerf.default | 408 | 393 | 1.04:1 |
ListNestedPerf.default | 587 | 564 | 1.04:1 |
AlertMinimalPerf.default | 292 | 283 | 1.03:1 |
AnimationMinimalPerf.default | 435 | 421 | 1.03:1 |
CardMinimalPerf.default | 581 | 565 | 1.03:1 |
ChatDuplicateMessagesPerf.default | 312 | 303 | 1.03:1 |
DialogMinimalPerf.default | 777 | 755 | 1.03:1 |
GridMinimalPerf.default | 359 | 349 | 1.03:1 |
HeaderMinimalPerf.default | 368 | 359 | 1.03:1 |
InputMinimalPerf.default | 1379 | 1345 | 1.03:1 |
RosterPerf.default | 1235 | 1194 | 1.03:1 |
RefMinimalPerf.default | 250 | 242 | 1.03:1 |
SliderMinimalPerf.default | 1763 | 1705 | 1.03:1 |
StatusMinimalPerf.default | 679 | 660 | 1.03:1 |
TableManyItemsPerf.default | 2003 | 1951 | 1.03:1 |
TableMinimalPerf.default | 418 | 406 | 1.03:1 |
AttachmentSlotsPerf.default | 1087 | 1070 | 1.02:1 |
HeaderSlotsPerf.default | 784 | 766 | 1.02:1 |
RadioGroupMinimalPerf.default | 447 | 439 | 1.02:1 |
SplitButtonMinimalPerf.default | 4412 | 4330 | 1.02:1 |
ToolbarMinimalPerf.default | 966 | 950 | 1.02:1 |
AttachmentMinimalPerf.default | 162 | 161 | 1.01:1 |
ButtonMinimalPerf.default | 176 | 174 | 1.01:1 |
ButtonOverridesMissPerf.default | 1848 | 1823 | 1.01:1 |
ChatMinimalPerf.default | 678 | 670 | 1.01:1 |
DropdownMinimalPerf.default | 3300 | 3268 | 1.01:1 |
ListWith60ListItems.default | 674 | 667 | 1.01:1 |
MenuMinimalPerf.default | 873 | 862 | 1.01:1 |
VideoMinimalPerf.default | 663 | 657 | 1.01:1 |
ItemLayoutMinimalPerf.default | 1252 | 1248 | 1:1 |
LoaderMinimalPerf.default | 704 | 707 | 1:1 |
SkeletonMinimalPerf.default | 359 | 359 | 1:1 |
IconMinimalPerf.default | 649 | 649 | 1:1 |
CustomToolbarPrototype.default | 4197 | 4190 | 1:1 |
AccordionMinimalPerf.default | 156 | 157 | 0.99:1 |
CheckboxMinimalPerf.default | 2804 | 2830 | 0.99:1 |
DatepickerMinimalPerf.default | 5628 | 5692 | 0.99:1 |
ListMinimalPerf.default | 528 | 531 | 0.99:1 |
PopupMinimalPerf.default | 599 | 605 | 0.99:1 |
ProviderMergeThemesPerf.default | 1772 | 1793 | 0.99:1 |
ProviderMinimalPerf.default | 1146 | 1154 | 0.99:1 |
CarouselMinimalPerf.default | 468 | 480 | 0.98:1 |
ImageMinimalPerf.default | 382 | 388 | 0.98:1 |
MenuButtonMinimalPerf.default | 1661 | 1698 | 0.98:1 |
SegmentMinimalPerf.default | 359 | 367 | 0.98:1 |
TreeMinimalPerf.default | 815 | 829 | 0.98:1 |
DropdownManyItemsPerf.default | 681 | 703 | 0.97:1 |
FormMinimalPerf.default | 400 | 414 | 0.97:1 |
ReactionMinimalPerf.default | 378 | 389 | 0.97:1 |
BoxMinimalPerf.default | 358 | 372 | 0.96:1 |
DividerMinimalPerf.default | 360 | 374 | 0.96:1 |
ButtonSlotsPerf.default | 555 | 583 | 0.95:1 |
TooltipMinimalPerf.default | 1022 | 1076 | 0.95:1 |
TreeWith60ListItems.default | 182 | 197 | 0.92:1 |
Hello @khmakoto! Because this pull request has the p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (
|
#### Pull request checklist - [x] Addresses an existing issue: Fixes microsoft#19857 - [x] Include a change request file using `$ yarn change` #### Description of changes The down caret icon in `Dropdown` was specified with the height of the component but absolutely positioned as `top: 1` which actually made it 1 pixel taller than the `Dropdown` itself. This created a scrollbar in high zoom settings. This PR fixes this by specifying `paddingTop: 1` and `top: 0` so that the caret is still in the same position but the its height is not taller than that of the component itself.
Pull request checklist
$ yarn change
Description of changes
The down caret icon in
Dropdown
was specified with the height of the component but absolutely positioned astop: 1
which actually made it 1 pixel taller than theDropdown
itself. This created a scrollbar in high zoom settings. This PR fixes this by specifyingpaddingTop: 1
andtop: 0
so that the caret is still in the same position but the its height is not taller than that of the component itself.