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.

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

(web-components) Updated the default fill color to neutral layer 1 #19726

Merged
merged 3 commits into from
Sep 9, 2021

Conversation

bheston
Copy link
Contributor

@bheston bheston commented Sep 9, 2021

Pull request checklist

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

Description of changes

The fillColor design token was set to a fixed, dark position on the neutral palette. This ignored the baseLayerLuminance design token because it was not possible to only change that and have the design system respond. The ideal flow is that the luminance drives the layer colors and the layer colors are used as backgrounds for fixed sections of the app, even if there is only a single section (layer 1).

Also updated the Storybook wrapper to adjust the navigation text based on the updated fill color.

Focus areas to test

Default fillColor.

@fabricteam
Copy link
Collaborator

📊 Bundle size report

🤖 This report was generated against 86c831d73355084919a5ff0495895a49cfe6eaa7

Copy link
Member

@chrisdholt chrisdholt left a comment

Choose a reason for hiding this comment

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

Thanks @bheston!

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 9, 2021

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

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link

size-auditor bot commented Sep 9, 2021

Asset size changes

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

Baseline commit: 86c831d73355084919a5ff0495895a49cfe6eaa7 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 887 879 5000
BaseButton mount 880 864 5000
Breadcrumb mount 2617 2592 1000
ButtonNext mount 456 438 5000
Checkbox mount 1470 1473 5000
CheckboxBase mount 1274 1286 5000
ChoiceGroup mount 4624 4573 5000
ComboBox mount 967 986 1000
CommandBar mount 10116 10202 1000
ContextualMenu mount 6446 6444 1000
DefaultButton mount 1070 1120 5000
DetailsRow mount 3636 3687 5000
DetailsRowFast mount 3713 3708 5000
DetailsRowNoStyles mount 3405 3470 5000
Dialog mount 2396 2419 1000
DocumentCardTitle mount 146 141 1000
Dropdown mount 3184 3187 5000
FluentProviderNext mount 7337 7402 5000
FluentProviderWithTheme mount 366 351 10
FluentProviderWithTheme virtual-rerender 88 96 10
FluentProviderWithTheme virtual-rerender-with-unmount 474 492 10
FocusTrapZone mount 1807 1813 5000
FocusZone mount 1740 1819 5000
IconButton mount 1715 1685 5000
Label mount 338 330 5000
Layer mount 2985 2983 5000
Link mount 469 465 5000
MakeStyles mount 1820 1855 50000
MenuButton mount 1460 1449 5000
MessageBar mount 1994 2016 5000
Nav mount 3194 3203 1000
OverflowSet mount 1091 1062 5000
Panel mount 2315 2366 1000
Persona mount 824 818 1000
Pivot mount 1419 1389 1000
PrimaryButton mount 1264 1270 5000
Rating mount 7534 7657 5000
SearchBox mount 1314 1305 5000
Shimmer mount 2471 2467 5000
Slider mount 1919 1914 5000
SpinButton mount 4864 4881 5000
Spinner mount 417 418 5000
SplitButton mount 3335 3120 5000
Stack mount 491 494 5000
StackWithIntrinsicChildren mount 1495 1524 5000
StackWithTextChildren mount 4466 4440 5000
SwatchColorPicker mount 10125 10136 5000
Tabs mount 1386 1373 1000
TagPicker mount 2596 2549 5000
TeachingBubble mount 13267 13310 5000
Text mount 426 419 5000
TextField mount 1358 1381 5000
ThemeProvider mount 1182 1185 5000
ThemeProvider virtual-rerender 591 590 5000
ThemeProvider virtual-rerender-with-unmount 1827 1864 5000
Toggle mount 810 791 5000
buttonNative mount 112 111 5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
SegmentMinimalPerf.default 345 334 1.03:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 174 161 1.08:1
AnimationMinimalPerf.default 420 392 1.07:1
ChatDuplicateMessagesPerf.default 299 279 1.07:1
ReactionMinimalPerf.default 383 359 1.07:1
RefMinimalPerf.default 248 232 1.07:1
SkeletonMinimalPerf.default 363 346 1.05:1
CarouselMinimalPerf.default 467 449 1.04:1
IconMinimalPerf.default 614 593 1.04:1
TreeWith60ListItems.default 173 166 1.04:1
DividerMinimalPerf.default 365 355 1.03:1
FormMinimalPerf.default 392 380 1.03:1
LayoutMinimalPerf.default 361 352 1.03:1
ListCommonPerf.default 618 602 1.03:1
TextMinimalPerf.default 351 342 1.03:1
AttachmentMinimalPerf.default 154 151 1.02:1
CheckboxMinimalPerf.default 2740 2696 1.02:1
DialogMinimalPerf.default 760 745 1.02:1
ListMinimalPerf.default 493 484 1.02:1
ListWith60ListItems.default 626 614 1.02:1
MenuButtonMinimalPerf.default 1608 1570 1.02:1
SliderMinimalPerf.default 1602 1578 1.02:1
SplitButtonMinimalPerf.default 4116 4046 1.02:1
TextAreaMinimalPerf.default 498 486 1.02:1
AccordionMinimalPerf.default 150 149 1.01:1
ChatWithPopoverPerf.default 355 353 1.01:1
GridMinimalPerf.default 334 330 1.01:1
HeaderSlotsPerf.default 752 744 1.01:1
ImageMinimalPerf.default 358 353 1.01:1
InputMinimalPerf.default 1275 1265 1.01:1
LabelMinimalPerf.default 384 381 1.01:1
ProviderMinimalPerf.default 1018 1005 1.01:1
VideoMinimalPerf.default 608 602 1.01:1
BoxMinimalPerf.default 342 342 1:1
ButtonOverridesMissPerf.default 1718 1719 1:1
DatepickerMinimalPerf.default 5378 5371 1:1
DropdownMinimalPerf.default 3107 3106 1:1
EmbedMinimalPerf.default 4097 4083 1:1
HeaderMinimalPerf.default 353 353 1:1
LoaderMinimalPerf.default 676 679 1:1
RadioGroupMinimalPerf.default 437 435 1:1
CustomToolbarPrototype.default 3897 3878 1:1
AlertMinimalPerf.default 265 268 0.99:1
AttachmentSlotsPerf.default 1063 1076 0.99:1
ButtonSlotsPerf.default 546 554 0.99:1
ChatMinimalPerf.default 640 649 0.99:1
ItemLayoutMinimalPerf.default 1189 1202 0.99:1
MenuMinimalPerf.default 819 827 0.99:1
PortalMinimalPerf.default 173 175 0.99:1
ProviderMergeThemesPerf.default 1688 1699 0.99:1
TableManyItemsPerf.default 1845 1869 0.99:1
AvatarMinimalPerf.default 185 189 0.98:1
CardMinimalPerf.default 526 535 0.98:1
DropdownManyItemsPerf.default 653 665 0.98:1
PopupMinimalPerf.default 574 588 0.98:1
ToolbarMinimalPerf.default 930 950 0.98:1
TooltipMinimalPerf.default 1004 1029 0.98:1
StatusMinimalPerf.default 651 674 0.97:1
TableMinimalPerf.default 399 413 0.97:1
TreeMinimalPerf.default 783 811 0.97:1
RosterPerf.default 1112 1161 0.96:1
FlexMinimalPerf.default 273 288 0.95:1
ListNestedPerf.default 528 555 0.95:1

@chrisdholt chrisdholt merged commit 53d2bee into microsoft:master Sep 9, 2021
@bheston bheston deleted the fill-color-from-layer-1 branch September 9, 2021 18:39
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] 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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants