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

fix: add force-colors to backgroundStyles and update button styles to fix the card and button components #17231

Merged

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Mar 2, 2021

Pull request checklist

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

Description of changes

Added forced-colors to the backgroundStyle stylesheet, in the design system provider. In addition, updated to add selectors to fix high contrast colors in Stealth, Outline, Default, and Neutral buttons when the colors are being inherited from the fluent-card background.

Focus areas to test

Screenshots show the before and after buttons in HC dark and light.

before
image
image

after
image
image

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 2, 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 c7183e3:

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

@khamudom khamudom force-pushed the users/khamu/high-contrast-design-system branch from d6695a2 to 143ad63 Compare March 2, 2021 03:32
@size-auditor
Copy link

size-auditor bot commented Mar 2, 2021

Asset size changes

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

Baseline commit: 72508b4cde86bc47b0f07b6986cbb2e01601eed8 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 2, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1264 1279 5000
BaseButton mount 1002 994 5000
Breadcrumb mount 44250 44343 5000
ButtonNext mount 1414 1338 5000
Checkbox mount 1651 1653 5000
CheckboxBase mount 1386 1355 5000
ChoiceGroup mount 5152 5096 5000
ComboBox mount 1012 1048 1000
CommandBar mount 10478 10516 1000
ContextualMenu mount 6415 6445 1000
DefaultButton mount 1212 1251 5000
DetailsRow mount 3812 3826 5000
DetailsRowFast mount 3891 3889 5000
DetailsRowNoStyles mount 3698 3663 5000
Dialog mount 1558 1552 1000
DocumentCardTitle mount 1920 1896 1000
Dropdown mount 3566 3542 5000
FocusTrapZone mount 1884 1886 5000
FocusZone mount 1855 1873 5000
IconButton mount 1926 1906 5000
Label mount 358 348 5000
Layer mount 1892 1917 5000
Link mount 513 497 5000
MakeStyles mount 2141 2125 50000
MenuButton mount 1613 1610 5000
MessageBar mount 2083 2116 5000
Nav mount 3537 3509 1000
OverflowSet mount 1079 1082 5000
Panel mount 1462 1485 1000
Persona mount 887 882 1000
Pivot mount 1520 1497 1000
PrimaryButton mount 1384 1391 5000
Rating mount 8247 8313 5000
SearchBox mount 1452 1452 5000
Shimmer mount 2702 2780 5000
Slider mount 2108 2191 5000
SpinButton mount 5282 5293 5000
Spinner mount 421 451 5000
SplitButton mount 3345 3385 5000
Stack mount 559 532 5000
StackWithIntrinsicChildren mount 1732 1768 5000
StackWithTextChildren mount 5061 5108 5000
SwatchColorPicker mount 10835 10914 5000
Tabs mount 1499 1501 1000
TagPicker mount 3049 3030 5000
TeachingBubble mount 12000 12100 5000
Text mount 455 442 5000
TextField mount 1461 1530 5000
ThemeProvider mount 1232 1237 5000
ThemeProvider virtual-rerender 605 627 5000
ThemeProviderNext mount 15694 15824 5000
Toggle mount 857 852 5000
buttonNative mount 120 124 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.5 0.4:1 2000 391
🦄 Button.Fluent 0.14 0.22 0.64:1 5000 676
🔧 Checkbox.Fluent 0.7 0.39 1.79:1 1000 697
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 869
🔧 Dropdown.Fluent 3.32 0.44 7.55:1 1000 3320
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 796
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 503
🔧 Slider.Fluent 1.73 0.49 3.53:1 1000 1729
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 449
🦄 Tooltip.Fluent 0.16 0.95 0.17:1 5000 775

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 211 188 1.12:1
ListCommonPerf.default 810 756 1.07:1
Image.Fluent 503 468 1.07:1
Text.Fluent 449 418 1.07:1
ChatDuplicateMessagesPerf.default 350 329 1.06:1
HeaderMinimalPerf.default 459 434 1.06:1
ListMinimalPerf.default 628 593 1.06:1
TreeWith60ListItems.default 213 201 1.06:1
ButtonMinimalPerf.default 215 204 1.05:1
TableMinimalPerf.default 490 466 1.05:1
ButtonUseCssPerf.default 945 913 1.04:1
FormMinimalPerf.default 535 514 1.04:1
HeaderSlotsPerf.default 938 905 1.04:1
MenuMinimalPerf.default 1049 1007 1.04:1
PortalMinimalPerf.default 189 181 1.04:1
Button.Fluent 676 650 1.04:1
ButtonUseCssNestingPerf.default 1222 1189 1.03:1
CardMinimalPerf.default 675 656 1.03:1
ChatMinimalPerf.default 731 713 1.03:1
DialogMinimalPerf.default 929 899 1.03:1
PopupMinimalPerf.default 784 764 1.03:1
RadioGroupMinimalPerf.default 530 516 1.03:1
ReactionMinimalPerf.default 481 468 1.03:1
VideoMinimalPerf.default 757 732 1.03:1
Avatar.Fluent 391 379 1.03:1
Tooltip.Fluent 775 751 1.03:1
CarouselMinimalPerf.default 558 545 1.02:1
TextMinimalPerf.default 437 427 1.02:1
ToolbarMinimalPerf.default 1114 1092 1.02:1
ButtonSlotsPerf.default 676 672 1.01:1
ProviderMergeThemesPerf.default 1694 1669 1.01:1
RefMinimalPerf.default 268 265 1.01:1
SegmentMinimalPerf.default 433 428 1.01:1
TextAreaMinimalPerf.default 591 583 1.01:1
TooltipMinimalPerf.default 1100 1086 1.01:1
Checkbox.Fluent 697 688 1.01:1
AvatarMinimalPerf.default 238 237 1:1
CheckboxMinimalPerf.default 3056 3065 1:1
DividerMinimalPerf.default 458 458 1:1
FlexMinimalPerf.default 358 358 1:1
GridMinimalPerf.default 419 419 1:1
LabelMinimalPerf.default 511 510 1:1
MenuButtonMinimalPerf.default 1772 1766 1:1
SliderMinimalPerf.default 1750 1756 1:1
CustomToolbarPrototype.default 4076 4056 1:1
Dropdown.Fluent 3320 3314 1:1
Slider.Fluent 1729 1723 1:1
AnimationMinimalPerf.default 449 453 0.99:1
ButtonOverridesMissPerf.default 1840 1868 0.99:1
DatepickerMinimalPerf.default 50078 50731 0.99:1
DropdownMinimalPerf.default 3345 3379 0.99:1
InputMinimalPerf.default 1437 1456 0.99:1
ListWith60ListItems.default 718 723 0.99:1
LoaderMinimalPerf.default 799 804 0.99:1
ProviderMinimalPerf.default 1077 1083 0.99:1
SplitButtonMinimalPerf.default 4199 4258 0.99:1
StatusMinimalPerf.default 838 849 0.99:1
IconMinimalPerf.default 777 787 0.99:1
TableManyItemsPerf.default 2364 2384 0.99:1
Icon.Fluent 796 801 0.99:1
DropdownManyItemsPerf.default 854 869 0.98:1
EmbedMinimalPerf.default 4745 4837 0.98:1
Dialog.Fluent 869 890 0.98:1
AlertMinimalPerf.default 344 353 0.97:1
AttachmentSlotsPerf.default 1327 1363 0.97:1
ImageMinimalPerf.default 475 489 0.97:1
ListNestedPerf.default 659 678 0.97:1
TreeMinimalPerf.default 891 916 0.97:1
BoxMinimalPerf.default 421 439 0.96:1
ChatWithPopoverPerf.default 430 447 0.96:1
ItemLayoutMinimalPerf.default 1415 1468 0.96:1
SkeletonMinimalPerf.default 435 453 0.96:1
RosterPerf.default 1300 1376 0.94:1
AccordionMinimalPerf.default 181 196 0.92:1
LayoutMinimalPerf.default 474 513 0.92:1

@khamudom khamudom force-pushed the users/khamu/high-contrast-design-system branch from 40b25a9 to 49280c3 Compare March 2, 2021 23:37
@scomea
Copy link

scomea commented Mar 3, 2021

smoked, looks as advertised.

@khamudom khamudom force-pushed the users/khamu/high-contrast-design-system branch from 49280c3 to c189110 Compare March 9, 2021 20:26
@khamudom khamudom force-pushed the users/khamu/high-contrast-design-system branch from c189110 to c7183e3 Compare March 9, 2021 21:50
@chrisdholt chrisdholt merged commit d9e945c into microsoft:master Mar 15, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
… fix the card and button components (microsoft#17231)

* add force-colors backgroundStyles and set a few HC colors on button styles

* Change files

* adjust forece colors import order

* update to use attribute instead of class. fixed href color issues
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
… fix the card and button components (microsoft#17231)

* add force-colors backgroundStyles and set a few HC colors on button styles

* Change files

* adjust forece colors import order

* update to use attribute instead of class. fixed href color issues
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.

None yet

8 participants