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: add high contrast forced-color-adjust in styles for menu-item component #16009

Merged
merged 2 commits into from
Nov 20, 2020
Merged

fix: add high contrast forced-color-adjust in styles for menu-item component #16009

merged 2 commits into from
Nov 20, 2020

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Nov 19, 2020 •
edited by chrisdholt
Loading

Pull request checklist

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

Description of changes

Added force-color-adjust="none" to remove the text backplate and borders around the item.

before
image
image

after
image
image

Focus areas to test

(optional)

@khamudom khamudom requested a review from chrisdholt as a code owner November 19, 2020 22:10
@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 19, 2020 •
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 8a40d04:

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

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Nov 19, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 855 870 5000
BaseButtonCompat mount 918 933 5000
Breadcrumb mount 44880 45575 5000
Checkbox mount 1551 1504 5000
CheckboxBase mount 1299 1287 5000
ChoiceGroup mount 4896 4830 5000
ComboBox mount 987 994 1000
CommandBar mount 10470 10383 1000
ContextualMenu mount 6367 6301 1000
DefaultButtonCompat mount 1130 1136 5000
DetailsRow mount 3736 3706 5000
DetailsRowFast mount 3758 3751 5000
DetailsRowNoStyles mount 3590 3494 5000
Dialog mount 1507 1480 1000
DocumentCardTitle mount 1846 1867 1000
Dropdown mount 3374 3360 5000
FocusTrapZone mount 1810 1835 5000
FocusZone mount 1856 1847 5000
IconButtonCompat mount 1779 1797 5000
Label mount 339 338 5000
Layer mount 1806 1842 5000
Link mount 472 487 5000
MenuButtonCompat mount 1504 1495 5000
MessageBar mount 2055 2058 5000
Nav mount 3299 3314 1000
OverflowSet mount 1059 1054 5000
Panel mount 1459 1474 1000
Persona mount 877 890 1000
Pivot mount 1436 1429 1000
PrimaryButtonCompat mount 1324 1286 5000
Rating mount 7491 7609 5000
SearchBox mount 1333 1332 5000
Shimmer mount 2575 2564 5000
Slider mount 1943 1943 5000
SpinButton mount 5037 5102 5000
Spinner mount 403 414 5000
SplitButtonCompat mount 3261 3213 5000
Stack mount 503 500 5000
StackWithIntrinsicChildren mount 1601 1588 5000
StackWithTextChildren mount 4599 4536 5000
SwatchColorPicker mount 10304 10434 5000
Tabs mount 1464 1413 1000
TagPicker mount 2882 2844 5000
TeachingBubble mount 11625 11807 5000
Text mount 417 410 5000
TextField mount 1345 1392 5000
ThemeProvider mount 2032 2041 5000
ThemeProvider virtual-rerender 641 655 5000
Toggle mount 796 783 5000
button mount 657 669 5000
buttonNative mount 112 125 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.51 0.9:1 2000 925
🦄 Button.Fluent 0.12 0.23 0.52:1 5000 594
🔧 Checkbox.Fluent 0.68 0.35 1.94:1 1000 682
🎯 Dialog.Fluent 0.17 0.21 0.81:1 5000 832
🔧 Dropdown.Fluent 3.06 0.41 7.46:1 1000 3058
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 732
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 411
🔧 Slider.Fluent 1.62 0.43 3.77:1 1000 1615
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 383
🦄 Tooltip.Fluent 0.12 0.92 0.13:1 5000 590

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 184 165 1.12:1
AlertMinimalPerf.default 335 310 1.08:1
SegmentMinimalPerf.default 394 377 1.05:1
Image.Fluent 411 390 1.05:1
ChatMinimalPerf.default 670 646 1.04:1
ReactionMinimalPerf.default 442 426 1.04:1
TableMinimalPerf.default 447 430 1.04:1
Checkbox.Fluent 682 657 1.04:1
Icon.Fluent 732 703 1.04:1
ButtonUseCssPerf.default 870 842 1.03:1
ItemLayoutMinimalPerf.default 1329 1288 1.03:1
LayoutMinimalPerf.default 441 430 1.03:1
RefMinimalPerf.default 261 253 1.03:1
TextAreaMinimalPerf.default 512 498 1.03:1
TooltipMinimalPerf.default 880 853 1.03:1
TreeWith60ListItems.default 218 212 1.03:1
Avatar.Fluent 925 901 1.03:1
ButtonOverridesMissPerf.default 1802 1770 1.02:1
CardMinimalPerf.default 592 578 1.02:1
ChatDuplicateMessagesPerf.default 441 431 1.02:1
ChatWithPopoverPerf.default 491 480 1.02:1
FlexMinimalPerf.default 320 314 1.02:1
ProviderMinimalPerf.default 1090 1068 1.02:1
SliderMinimalPerf.default 1685 1644 1.02:1
StatusMinimalPerf.default 767 755 1.02:1
TextMinimalPerf.default 374 368 1.02:1
Dialog.Fluent 832 812 1.02:1
Text.Fluent 383 375 1.02:1
AccordionMinimalPerf.default 170 168 1.01:1
AnimationMinimalPerf.default 441 437 1.01:1
AttachmentSlotsPerf.default 1162 1153 1.01:1
ButtonUseCssNestingPerf.default 1134 1127 1.01:1
DialogMinimalPerf.default 833 824 1.01:1
DividerMinimalPerf.default 396 392 1.01:1
DropdownMinimalPerf.default 3088 3058 1.01:1
HeaderSlotsPerf.default 828 822 1.01:1
LabelMinimalPerf.default 443 440 1.01:1
MenuMinimalPerf.default 910 901 1.01:1
PopupMinimalPerf.default 746 742 1.01:1
Button.Fluent 594 589 1.01:1
ButtonSlotsPerf.default 631 632 1:1
DatepickerMinimalPerf.default 49624 49797 1:1
ListMinimalPerf.default 516 515 1:1
ProviderMergeThemesPerf.default 2161 2163 1:1
RadioGroupMinimalPerf.default 458 459 1:1
SkeletonMinimalPerf.default 451 451 1:1
SplitButtonMinimalPerf.default 3878 3863 1:1
TableManyItemsPerf.default 2209 2210 1:1
TreeMinimalPerf.default 913 914 1:1
VideoMinimalPerf.default 659 660 1:1
Dropdown.Fluent 3058 3049 1:1
AvatarMinimalPerf.default 493 497 0.99:1
EmbedMinimalPerf.default 4225 4278 0.99:1
GridMinimalPerf.default 373 377 0.99:1
HeaderMinimalPerf.default 382 385 0.99:1
InputMinimalPerf.default 1352 1359 0.99:1
ListCommonPerf.default 683 689 0.99:1
ListWith60ListItems.default 978 989 0.99:1
AttachmentMinimalPerf.default 167 170 0.98:1
CarouselMinimalPerf.default 453 462 0.98:1
DropdownManyItemsPerf.default 762 778 0.98:1
FormMinimalPerf.default 440 448 0.98:1
LoaderMinimalPerf.default 736 751 0.98:1
MenuButtonMinimalPerf.default 1612 1641 0.98:1
IconMinimalPerf.default 697 709 0.98:1
CustomToolbarPrototype.default 4037 4125 0.98:1
ToolbarMinimalPerf.default 980 998 0.98:1
Tooltip.Fluent 590 604 0.98:1
CheckboxMinimalPerf.default 2912 2994 0.97:1
ListNestedPerf.default 604 623 0.97:1
Slider.Fluent 1615 1665 0.97:1
BoxMinimalPerf.default 382 397 0.96:1
ImageMinimalPerf.default 382 403 0.95:1
ButtonMinimalPerf.default 185 197 0.94:1

@size-auditor
Copy link

size-auditor bot commented Nov 19, 2020 •
edited
Loading

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: f1c0db2

Possible causes

  • The baseline build f1c0db2 is broken
  • The Size Auditor run for the baseline build f1c0db2 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@chrisdholt chrisdholt assigned chrisdholt and unassigned behowell Nov 19, 2020
chrisdholt
chrisdholt approved these changes Nov 19, 2020
View reviewed changes
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.

@khamudom looks like screener is failing - can you try and rebase?

SethDonohue
SethDonohue approved these changes Nov 19, 2020
View reviewed changes
Copy link
Contributor

@SethDonohue SethDonohue left a comment

Choose a reason for hiding this comment

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

smoked.

@khamudom khamudom force-pushed the users/khamu/menu-item-hover-hc branch from 124fd38 to 7b7a3d1 Compare November 19, 2020 23:36
@scomea
Copy link

scomea commented Nov 20, 2020

Smoked, seems to work as advertised

@khamudom khamudom force-pushed the users/khamu/menu-item-hover-hc branch from 7b7a3d1 to 8a40d04 Compare November 20, 2020 16:03
@chrisdholt chrisdholt merged commit cfd0cc9 into microsoft:master Nov 20, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/web-components@v0.8.1 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

@SethDonohue SethDonohue SethDonohue approved these changes

@chrisdholt chrisdholt chrisdholt approved these changes

@scomea scomea scomea 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.
6 participants
@khamudom @msft-github-bot @scomea @chrisdholt @SethDonohue @behowell