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(input): prevent text to overlap with icon #16083

Merged
merged 1 commit into from
Nov 27, 2020
Merged

fix(input): prevent text to overlap with icon #16083

merged 1 commit into from
Nov 27, 2020

Conversation

assuncaocharles
Copy link
Contributor

Pull request checklist

Description of changes

Following design spec there's a distance of 15px from Icon to input content:

Screen Shot 2020-11-27 at 14 17 32

Currently on our version content goes to the edge of the icon giving the impression to overlap:

Screen Shot 2020-11-27 at 14 20 33

Screen Shot 2020-11-27 at 14 21 28

Screen Shot 2020-11-27 at 14 22 51

This PR fixes it:

Screen Shot 2020-11-27 at 14 23 10

Screen Shot 2020-11-27 at 14 23 32

Screen Shot 2020-11-27 at 14 23 49

Focus areas to test

(optional)

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Nov 27, 2020
@DustyTheBot
Copy link

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against f15638c

@codesandbox-ci
Copy link

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

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration
fluent-ui-example Issue #16053

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 898 905 5000
BaseButtonCompat mount 985 1015 5000
Breadcrumb mount 44939 44067 5000
Checkbox mount 1630 1621 5000
CheckboxBase mount 1359 1352 5000
ChoiceGroup mount 5139 5172 5000
ComboBox mount 1014 1023 1000
CommandBar mount 10472 10613 1000
ContextualMenu mount 6397 6508 1000
DefaultButtonCompat mount 1211 1219 5000
DetailsRow mount 3889 3974 5000
DetailsRowFast mount 3842 3847 5000
DetailsRowNoStyles mount 3685 3734 5000
Dialog mount 1545 1546 1000
DocumentCardTitle mount 1862 1843 1000
Dropdown mount 3559 3588 5000
FocusTrapZone mount 1896 1899 5000
FocusZone mount 1933 1942 5000
IconButtonCompat mount 1875 1918 5000
Label mount 350 348 5000
Layer mount 1885 1904 5000
Link mount 474 500 5000
MenuButtonCompat mount 1633 1629 5000
MessageBar mount 2095 2092 5000
Nav mount 3459 3536 1000
OverflowSet mount 1091 1080 5000
Panel mount 1461 1487 1000
Persona mount 893 935 1000
Pivot mount 1474 1504 1000
PrimaryButtonCompat mount 1379 1384 5000
Rating mount 8258 8420 5000
SearchBox mount 1406 1424 5000
Shimmer mount 2781 2793 5000
Slider mount 2060 2028 5000
SpinButton mount 5261 5386 5000
Spinner mount 448 453 5000
SplitButtonCompat mount 3381 3398 5000
Stack mount 551 526 5000
StackWithIntrinsicChildren mount 1688 1660 5000
StackWithTextChildren mount 5001 4911 5000
SwatchColorPicker mount 10967 11047 5000
Tabs mount 1483 1499 1000
TagPicker mount 3106 2996 5000
TeachingBubble mount 12135 11990 5000
Text mount 446 465 5000
TextField mount 1493 1473 5000
ThemeProvider mount 2229 2216 5000
ThemeProvider virtual-rerender 677 670 5000
Toggle mount 868 854 5000
button mount 710 708 5000
buttonNative mount 105 107 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.51 0.55 0.93:1 2000 1023
🦄 Button.Fluent 0.13 0.25 0.52:1 5000 642
🔧 Checkbox.Fluent 0.69 0.38 1.82:1 1000 687
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 885
🔧 Dropdown.Fluent 3.18 0.44 7.23:1 1000 3177
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 799
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 454
🔧 Slider.Fluent 1.7 0.5 3.4:1 1000 1703
🔧 Text.Fluent 0.09 0.03 3:1 5000 430
🦄 Tooltip.Fluent 0.13 0.95 0.14:1 5000 649

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TableMinimalPerf.default 503 454 1.11:1
Tooltip.Fluent 649 583 1.11:1
RefMinimalPerf.default 261 238 1.1:1
SkeletonMinimalPerf.default 513 468 1.1:1
StatusMinimalPerf.default 859 806 1.07:1
ListWith60ListItems.default 1052 989 1.06:1
IconMinimalPerf.default 791 743 1.06:1
ChatWithPopoverPerf.default 542 515 1.05:1
FlexMinimalPerf.default 354 338 1.05:1
PopupMinimalPerf.default 772 737 1.05:1
AvatarMinimalPerf.default 543 520 1.04:1
BoxMinimalPerf.default 424 409 1.04:1
CardMinimalPerf.default 659 631 1.04:1
ChatDuplicateMessagesPerf.default 473 456 1.04:1
DropdownMinimalPerf.default 3191 3067 1.04:1
LabelMinimalPerf.default 504 485 1.04:1
PortalMinimalPerf.default 174 167 1.04:1
TextAreaMinimalPerf.default 601 580 1.04:1
TreeMinimalPerf.default 877 845 1.04:1
AttachmentMinimalPerf.default 190 185 1.03:1
AttachmentSlotsPerf.default 1264 1230 1.03:1
DialogMinimalPerf.default 907 884 1.03:1
GridMinimalPerf.default 404 392 1.03:1
HeaderMinimalPerf.default 433 422 1.03:1
ProviderMergeThemesPerf.default 2175 2113 1.03:1
RadioGroupMinimalPerf.default 525 508 1.03:1
SplitButtonMinimalPerf.default 4259 4122 1.03:1
Dialog.Fluent 885 858 1.03:1
ButtonSlotsPerf.default 664 649 1.02:1
ItemLayoutMinimalPerf.default 1475 1449 1.02:1
ListNestedPerf.default 672 659 1.02:1
Dropdown.Fluent 3177 3129 1.02:1
AnimationMinimalPerf.default 453 448 1.01:1
ButtonOverridesMissPerf.default 1841 1817 1.01:1
ButtonUseCssNestingPerf.default 1191 1178 1.01:1
CarouselMinimalPerf.default 490 484 1.01:1
ChatMinimalPerf.default 706 697 1.01:1
ListCommonPerf.default 745 734 1.01:1
MenuMinimalPerf.default 978 964 1.01:1
MenuButtonMinimalPerf.default 1708 1698 1.01:1
ReactionMinimalPerf.default 468 463 1.01:1
TableManyItemsPerf.default 2458 2428 1.01:1
ToolbarMinimalPerf.default 1087 1080 1.01:1
VideoMinimalPerf.default 704 696 1.01:1
Avatar.Fluent 1023 1009 1.01:1
Button.Fluent 642 634 1.01:1
Slider.Fluent 1703 1678 1.01:1
Text.Fluent 430 425 1.01:1
ButtonUseCssPerf.default 898 897 1:1
CheckboxMinimalPerf.default 3057 3064 1:1
DatepickerMinimalPerf.default 50933 50897 1:1
InputMinimalPerf.default 1403 1397 1:1
TooltipMinimalPerf.default 878 876 1:1
DividerMinimalPerf.default 424 428 0.99:1
DropdownManyItemsPerf.default 817 828 0.99:1
LoaderMinimalPerf.default 800 812 0.99:1
CustomToolbarPrototype.default 4071 4118 0.99:1
Image.Fluent 454 459 0.99:1
EmbedMinimalPerf.default 4475 4585 0.98:1
HeaderSlotsPerf.default 887 901 0.98:1
ImageMinimalPerf.default 466 477 0.98:1
ListMinimalPerf.default 600 615 0.98:1
SegmentMinimalPerf.default 413 422 0.98:1
SliderMinimalPerf.default 1653 1692 0.98:1
TextMinimalPerf.default 393 401 0.98:1
ButtonMinimalPerf.default 212 218 0.97:1
FormMinimalPerf.default 498 516 0.97:1
LayoutMinimalPerf.default 462 478 0.97:1
ProviderMinimalPerf.default 1090 1124 0.97:1
TreeWith60ListItems.default 236 243 0.97:1
AccordionMinimalPerf.default 179 187 0.96:1
Checkbox.Fluent 687 713 0.96:1
Icon.Fluent 799 831 0.96:1
AlertMinimalPerf.default 346 371 0.93:1

@size-auditor
Copy link

size-auditor bot commented Nov 27, 2020

Asset size changes

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

Baseline commit: 16c858186809363a9e58a11e217353010116dd37 (build)

@assuncaocharles assuncaocharles merged commit aa97cb8 into microsoft:master Nov 27, 2020
@assuncaocharles assuncaocharles deleted the fix/input-icon branch November 27, 2020 18:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ling1726 ling1726 ling1726 approved these changes

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@layershifter layershifter Awaiting requested review from layershifter

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@pompomon pompomon Awaiting requested review from pompomon

Assignees

@behowell behowell

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Northstar's Input's showSuccessIndicator icon overlaps with text
5 participants
@assuncaocharles @DustyTheBot @msft-github-bot @ling1726 @behowell