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

[web-components] fix number field outline color #17576

Merged
merged 2 commits into from
Mar 26, 2021
Merged

[web-components] fix number field outline color #17576

merged 2 commits into from
Mar 26, 2021

Conversation

chrisdholt
Copy link
Member

Pull request checklist

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

Description of changes

Fixes an issue where the incorrect color recipe was used for the number field component. This aligns number field with text field.

Focus areas to test

(optional)

khamudom
khamudom approved these changes Mar 25, 2021
View reviewed changes
Copy link
Contributor

@khamudom khamudom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

smoked

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 25, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 968 941 5000
BaseButton mount 935 914 5000
Breadcrumb mount 40949 41055 5000
ButtonNext mount 542 536 5000
Checkbox mount 1555 1553 5000
CheckboxBase mount 1320 1337 5000
ChoiceGroup mount 4850 4884 5000
ComboBox mount 972 957 1000
CommandBar mount 9804 9843 1000
ContextualMenu mount 5968 6081 1000
DefaultButton mount 1132 1134 5000
DetailsRow mount 3672 3538 5000
DetailsRowFast mount 3673 3635 5000
DetailsRowNoStyles mount 3412 3407 5000
Dialog mount 1417 1461 1000
DocumentCardTitle mount 1766 1758 1000
Dropdown mount 3337 3341 5000
FocusTrapZone mount 1823 1820 5000
FocusZone mount 1727 1784 5000
IconButton mount 1808 1784 5000
Label mount 336 327 5000
Layer mount 1768 1787 5000
Link mount 461 451 5000
MakeStyles mount 1708 1682 50000
MenuButton mount 1520 1496 5000
MessageBar mount 2011 1940 5000
Nav mount 3264 3303 1000
OverflowSet mount 1008 1025 5000
Panel mount 1412 1394 1000
Persona mount 813 846 1000
Pivot mount 1397 1385 1000
PrimaryButton mount 1314 1353 5000
Rating mount 7894 7866 5000
SearchBox mount 1351 1365 5000
Shimmer mount 2590 2593 5000
Slider mount 1969 1979 5000
SpinButton mount 5021 5031 5000
Spinner mount 399 396 5000
SplitButton mount 3198 3242 5000
Stack mount 511 481 5000
StackWithIntrinsicChildren mount 1561 1582 5000
StackWithTextChildren mount 4672 4632 5000
SwatchColorPicker mount 10301 10262 5000
Tabs mount 1381 1378 1000
TagPicker mount 2859 2830 5000
TeachingBubble mount 11318 11440 5000
Text mount 411 424 5000
TextField mount 1392 1372 5000
ThemeProvider mount 1164 1144 5000
ThemeProvider virtual-rerender 581 562 5000
ThemeProviderNext mount 15038 15119 5000
Toggle mount 804 817 5000
buttonNative mount 110 103 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.48 0.38:1 2000 365
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 649
🔧 Checkbox.Fluent 0.64 0.38 1.68:1 1000 643
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 821
🔧 Dropdown.Fluent 3.15 0.42 7.5:1 1000 3151
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 732
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 433
🔧 Slider.Fluent 1.65 0.51 3.24:1 1000 1651
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 431
🦄 Tooltip.Fluent 0.14 0.91 0.15:1 5000 704

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 242 216 1.12:1
GridMinimalPerf.default 417 381 1.09:1
FlexMinimalPerf.default 349 323 1.08:1
LoaderMinimalPerf.default 797 738 1.08:1
HeaderMinimalPerf.default 428 400 1.07:1
ImageMinimalPerf.default 477 446 1.07:1
IconMinimalPerf.default 761 714 1.07:1
ButtonSlotsPerf.default 614 578 1.06:1
ChatMinimalPerf.default 689 650 1.06:1
LabelMinimalPerf.default 484 455 1.06:1
ListMinimalPerf.default 579 547 1.06:1
ButtonMinimalPerf.default 205 196 1.05:1
ListCommonPerf.default 742 710 1.05:1
ListWith60ListItems.default 687 652 1.05:1
RefMinimalPerf.default 253 241 1.05:1
SegmentMinimalPerf.default 426 404 1.05:1
TextAreaMinimalPerf.default 571 544 1.05:1
Button.Fluent 649 617 1.05:1
MenuMinimalPerf.default 949 914 1.04:1
PortalMinimalPerf.default 169 162 1.04:1
ChatDuplicateMessagesPerf.default 319 309 1.03:1
DividerMinimalPerf.default 419 408 1.03:1
HeaderSlotsPerf.default 865 839 1.03:1
InputMinimalPerf.default 1350 1313 1.03:1
LayoutMinimalPerf.default 458 444 1.03:1
PopupMinimalPerf.default 727 707 1.03:1
ProviderMinimalPerf.default 1021 990 1.03:1
AnimationMinimalPerf.default 439 432 1.02:1
AttachmentSlotsPerf.default 1279 1259 1.02:1
DialogMinimalPerf.default 841 827 1.02:1
DropdownManyItemsPerf.default 831 814 1.02:1
RadioGroupMinimalPerf.default 498 490 1.02:1
ReactionMinimalPerf.default 470 459 1.02:1
SplitButtonMinimalPerf.default 4024 3959 1.02:1
TreeWith60ListItems.default 194 190 1.02:1
Dropdown.Fluent 3151 3096 1.02:1
Text.Fluent 431 422 1.02:1
ButtonOverridesMissPerf.default 1758 1746 1.01:1
ItemLayoutMinimalPerf.default 1343 1324 1.01:1
ListNestedPerf.default 626 617 1.01:1
TableManyItemsPerf.default 2243 2210 1.01:1
TextMinimalPerf.default 396 394 1.01:1
VideoMinimalPerf.default 731 724 1.01:1
Avatar.Fluent 365 361 1.01:1
Icon.Fluent 732 728 1.01:1
BoxMinimalPerf.default 409 409 1:1
ButtonUseCssPerf.default 867 869 1:1
CardMinimalPerf.default 621 624 1:1
DatepickerMinimalPerf.default 45977 45950 1:1
EmbedMinimalPerf.default 4366 4356 1:1
StatusMinimalPerf.default 781 778 1:1
Checkbox.Fluent 643 643 1:1
Dialog.Fluent 821 817 1:1
CheckboxMinimalPerf.default 2853 2891 0.99:1
MenuButtonMinimalPerf.default 1672 1686 0.99:1
ProviderMergeThemesPerf.default 1574 1586 0.99:1
SkeletonMinimalPerf.default 413 419 0.99:1
TableMinimalPerf.default 459 465 0.99:1
CustomToolbarPrototype.default 3762 3816 0.99:1
ToolbarMinimalPerf.default 1038 1049 0.99:1
AlertMinimalPerf.default 326 332 0.98:1
ChatWithPopoverPerf.default 403 411 0.98:1
DropdownMinimalPerf.default 3111 3174 0.98:1
RosterPerf.default 1266 1294 0.98:1
TooltipMinimalPerf.default 1009 1031 0.98:1
TreeMinimalPerf.default 834 851 0.98:1
Tooltip.Fluent 704 721 0.98:1
ButtonUseCssNestingPerf.default 1113 1151 0.97:1
CarouselMinimalPerf.default 505 519 0.97:1
FormMinimalPerf.default 474 488 0.97:1
SliderMinimalPerf.default 1597 1639 0.97:1
AccordionMinimalPerf.default 169 178 0.95:1
Image.Fluent 433 454 0.95:1
AttachmentMinimalPerf.default 174 186 0.94:1
Slider.Fluent 1651 1854 0.89:1

@size-auditor
Copy link

size-auditor bot commented Mar 25, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 0f3e58b651c0c5f4f1a9e74f311d7003868d3fae (build)

@chrisdholt chrisdholt force-pushed the users/chhol/fix-number-field-visual-outline branch from d43ca3e to 83ef7bd Compare March 26, 2021 01:04
@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 83ef7bd:

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

@chrisdholt chrisdholt merged commit 8065811 into microsoft:master Mar 26, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@chrisdholt @miroslavstastny
[web-components] fix number field outline color (microsoft#17576)
8fbad4c 
* correct outline color for number field to ensure alignment w/ other inputs

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khamudom khamudom khamudom approved these changes

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

@scomea scomea Awaiting requested review from scomea

@eljefe223 eljefe223 Awaiting requested review from eljefe223

Assignees

@khmakoto khmakoto

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@chrisdholt @fabricteam @msft-fluent-ui-bot @EisenbergEffect @khamudom @khmakoto