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

feat: add neutral-contrast-fill color recipe to the design system #16824

Merged
merged 4 commits into from
Feb 8, 2021
Merged

feat: add neutral-contrast-fill color recipe to the design system #16824

merged 4 commits into from
Feb 8, 2021

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Feb 4, 2021

Pull request checklist

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

Description of changes

This recipe is an inverted background color. In the light theme, the recipe color is dark, and in the dark theme, the recipe color is light.
There is also neutralContrastForegroundRestBehavior to use on the foreground color.

Focus areas to test

(optional)

@khamudom khamudom requested a review from chrisdholt as a code owner February 4, 2021 19:33
@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 4, 2021 •
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 263474e:

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

@size-auditor
Copy link

size-auditor bot commented Feb 4, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: fe4959d22fec3382fa743b396f671b1b63a26b9e (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 4, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 853 823 5000
BaseButtonCompat mount 900 885 5000
Breadcrumb mount 42979 43577 5000
Checkbox mount 1492 1522 5000
CheckboxBase mount 1244 1238 5000
ChoiceGroup mount 4683 4722 5000
ComboBox mount 981 983 1000
CommandBar mount 10018 10104 1000
ContextualMenu mount 6149 6023 1000
DefaultButtonCompat mount 1136 1125 5000
DetailsRow mount 3559 3558 5000
DetailsRowFast mount 3607 3493 5000
DetailsRowNoStyles mount 3390 3492 5000
Dialog mount 1434 1437 1000
DocumentCardTitle mount 1819 1832 1000
Dropdown mount 3245 3255 5000
FocusTrapZone mount 1752 1768 5000
FocusZone mount 1824 1803 5000
IconButtonCompat mount 1733 1747 5000
Label mount 334 337 5000
Layer mount 1774 1741 5000
Link mount 467 469 5000
MakeStyles mount 1900 1942 50000
MenuButtonCompat mount 1479 1464 5000
MessageBar mount 1999 1988 5000
Nav mount 3160 3213 1000
OverflowSet mount 1010 1036 5000
Panel mount 1400 1380 1000
Persona mount 866 845 1000
Pivot mount 1396 1400 1000
PrimaryButtonCompat mount 1268 1292 5000
Rating mount 7383 7444 5000
SearchBox mount 1288 1300 5000
Shimmer mount 2520 2478 5000
Slider mount 1919 1900 5000
SpinButton mount 4942 5008 5000
Spinner mount 416 411 5000
SplitButtonCompat mount 3077 3103 5000
Stack mount 486 482 5000
StackWithIntrinsicChildren mount 1498 1481 5000
StackWithTextChildren mount 4358 4396 5000
SwatchColorPicker mount 10966 10046 5000
Tabs mount 1367 1363 1000
TagPicker mount 2718 2739 5000
TeachingBubble mount 11427 11554 5000
Text mount 391 415 5000
TextField mount 1317 1354 5000
ThemeProvider mount 1394 1403 5000
ThemeProvider virtual-rerender 587 582 5000
ThemeProviderNext mount 2190 2189 5000
Toggle mount 778 793 5000
button mount 655 668 5000
buttonNative mount 110 107 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.5 0.34:1 2000 341
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 572
🔧 Checkbox.Fluent 0.65 0.33 1.97:1 1000 648
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 807
🔧 Dropdown.Fluent 3.1 0.4 7.75:1 1000 3101
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 695
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 391
🔧 Slider.Fluent 1.6 0.45 3.56:1 1000 1601
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 385
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 576

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 180 164 1.1:1
IconMinimalPerf.default 729 663 1.1:1
ButtonMinimalPerf.default 192 176 1.09:1
TableMinimalPerf.default 438 414 1.06:1
AttachmentSlotsPerf.default 1208 1166 1.04:1
ChatDuplicateMessagesPerf.default 388 374 1.04:1
GridMinimalPerf.default 384 370 1.04:1
RadioGroupMinimalPerf.default 467 447 1.04:1
Text.Fluent 385 371 1.04:1
AnimationMinimalPerf.default 421 407 1.03:1
DividerMinimalPerf.default 385 372 1.03:1
FlexMinimalPerf.default 323 314 1.03:1
SegmentMinimalPerf.default 379 369 1.03:1
TableManyItemsPerf.default 2049 1999 1.03:1
ToolbarMinimalPerf.default 1013 986 1.03:1
TooltipMinimalPerf.default 870 847 1.03:1
TreeMinimalPerf.default 823 796 1.03:1
AlertMinimalPerf.default 308 302 1.02:1
AvatarMinimalPerf.default 208 203 1.02:1
CarouselMinimalPerf.default 493 483 1.02:1
FormMinimalPerf.default 444 435 1.02:1
HeaderSlotsPerf.default 801 784 1.02:1
LayoutMinimalPerf.default 434 424 1.02:1
ListNestedPerf.default 580 566 1.02:1
MenuMinimalPerf.default 902 882 1.02:1
TextMinimalPerf.default 377 369 1.02:1
TreeWith60ListItems.default 189 186 1.02:1
Icon.Fluent 695 683 1.02:1
AccordionMinimalPerf.default 168 167 1.01:1
ButtonUseCssPerf.default 829 822 1.01:1
ChatMinimalPerf.default 645 640 1.01:1
DialogMinimalPerf.default 793 787 1.01:1
InputMinimalPerf.default 1292 1274 1.01:1
LabelMinimalPerf.default 434 428 1.01:1
ListCommonPerf.default 669 662 1.01:1
LoaderMinimalPerf.default 741 735 1.01:1
PopupMinimalPerf.default 713 707 1.01:1
PortalMinimalPerf.default 175 174 1.01:1
RefMinimalPerf.default 255 252 1.01:1
SkeletonMinimalPerf.default 389 387 1.01:1
StatusMinimalPerf.default 733 728 1.01:1
Avatar.Fluent 341 338 1.01:1
Button.Fluent 572 565 1.01:1
Dialog.Fluent 807 801 1.01:1
ButtonOverridesMissPerf.default 1699 1695 1:1
CardMinimalPerf.default 575 573 1:1
CheckboxMinimalPerf.default 2873 2872 1:1
DatepickerMinimalPerf.default 47230 47314 1:1
EmbedMinimalPerf.default 4351 4347 1:1
HeaderMinimalPerf.default 382 381 1:1
ImageMinimalPerf.default 398 398 1:1
MenuButtonMinimalPerf.default 1590 1594 1:1
SliderMinimalPerf.default 1613 1613 1:1
SplitButtonMinimalPerf.default 3752 3766 1:1
Checkbox.Fluent 648 649 1:1
Dropdown.Fluent 3101 3103 1:1
Image.Fluent 391 390 1:1
Slider.Fluent 1601 1601 1:1
Tooltip.Fluent 576 576 1:1
BoxMinimalPerf.default 380 383 0.99:1
ButtonUseCssNestingPerf.default 1076 1087 0.99:1
DropdownManyItemsPerf.default 717 724 0.99:1
ListMinimalPerf.default 523 526 0.99:1
ProviderMergeThemesPerf.default 1625 1647 0.99:1
CustomToolbarPrototype.default 3722 3762 0.99:1
ButtonSlotsPerf.default 591 602 0.98:1
ItemLayoutMinimalPerf.default 1245 1268 0.98:1
ChatWithPopoverPerf.default 445 457 0.97:1
DropdownMinimalPerf.default 3047 3136 0.97:1
ListWith60ListItems.default 620 642 0.97:1
RosterPerf.default 1157 1187 0.97:1
ProviderMinimalPerf.default 947 980 0.97:1
ReactionMinimalPerf.default 410 428 0.96:1
TextAreaMinimalPerf.default 497 516 0.96:1
VideoMinimalPerf.default 635 660 0.96:1

@khamudom khamudom force-pushed the users/khamu/add-neutral-contrast-fill-recipe branch from 43b58fb to 8fad46b Compare February 4, 2021 20:21
@chrisdholt chrisdholt assigned chrisdholt and unassigned joschect Feb 8, 2021
@khamudom khamudom force-pushed the users/khamu/add-neutral-contrast-fill-recipe branch from 0e5cc30 to 5be20fb Compare February 8, 2021 17:44
@chrisdholt chrisdholt merged commit 9a4c92e into microsoft:master Feb 8, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

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.
5 participants
@khamudom @fabricteam @msft-fluent-ui-bot @chrisdholt @joschect