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: set high contrast colors on button and anchor components #15916

Merged
merged 4 commits into from
Nov 16, 2020
Merged

fix: set high contrast colors on button and anchor components #15916

merged 4 commits into from
Nov 16, 2020

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Nov 11, 2020 •
edited
Loading

Pull request checklist

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

Description of changes

Moved the high contrast code from button.styles to the common button styles file to apply high contrast color on the button and anchor components.

Focus areas to test

(optional)

@khamudom khamudom requested a review from chrisdholt as a code owner November 11, 2020 20:24
@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 11, 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 1a5b5d4:

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 11, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 797 832 5000
BaseButtonCompat mount 899 866 5000
Breadcrumb mount 42727 42936 5000
Checkbox mount 1457 1485 5000
CheckboxBase mount 1243 1248 5000
ChoiceGroup mount 4659 4689 5000
ComboBox mount 968 966 1000
CommandBar mount 10078 10102 1000
ContextualMenu mount 6132 6043 1000
DefaultButtonCompat mount 1140 1134 5000
DetailsRow mount 3635 3623 5000
DetailsRowFast mount 3580 3567 5000
DetailsRowNoStyles mount 3457 3424 5000
Dialog mount 1479 1481 1000
DocumentCardTitle mount 1781 1910 1000
Dropdown mount 3350 3326 5000
FocusTrapZone mount 1790 1771 5000
FocusZone mount 1803 1775 5000
IconButtonCompat mount 1704 1777 5000
Label mount 332 337 5000
Layer mount 1741 1728 5000
Link mount 461 448 5000
MenuButtonCompat mount 1437 1444 5000
MessageBar mount 2010 2059 5000
Nav mount 3251 3237 1000
OverflowSet mount 1019 1037 5000
Panel mount 1424 1404 1000
Persona mount 845 857 1000
Pivot mount 1399 1400 1000
PrimaryButtonCompat mount 1273 1233 5000
Rating mount 7391 7380 5000
SearchBox mount undefined err 5000
Shimmer mount 2490 2531 5000
Slider mount 1908 1917 5000
SpinButton mount 4980 4963 5000
Spinner mount 425 427 5000
SplitButtonCompat mount 3075 3126 5000
Stack mount 497 502 5000
StackWithIntrinsicChildren mount 1500 1488 5000
StackWithTextChildren mount 4441 4438 5000
SwatchColorPicker mount 10014 10070 5000
Tabs mount 1375 1401 1000
TagPicker mount 2686 2677 5000
TeachingBubble mount 11494 11386 5000
Text mount 415 406 5000
TextField mount 1349 1385 5000
ThemeProvider mount 1937 1964 5000
ThemeProvider virtual-rerender 631 635 5000
Toggle mount 770 812 5000
button mount 557 530 5000
buttonNative mount 113 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.49 0.9:1 2000 888
🦄 Button.Fluent 0.12 0.22 0.55:1 5000 584
🔧 Checkbox.Fluent 0.64 0.33 1.94:1 1000 639
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 815
🔧 Dropdown.Fluent 2.97 0.4 7.43:1 1000 2971
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 724
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 417
🔧 Slider.Fluent 1.58 0.43 3.67:1 1000 1581
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 359
🦄 Tooltip.Fluent 0.11 0.89 0.12:1 5000 565

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 320 292 1.1:1
ChatWithPopoverPerf.default 490 447 1.1:1
AttachmentSlotsPerf.default 1181 1104 1.07:1
ButtonMinimalPerf.default 191 180 1.06:1
FormMinimalPerf.default 443 419 1.06:1
VideoMinimalPerf.default 655 618 1.06:1
AccordionMinimalPerf.default 164 156 1.05:1
Image.Fluent 417 398 1.05:1
GridMinimalPerf.default 363 350 1.04:1
HeaderMinimalPerf.default 392 378 1.04:1
ListWith60ListItems.default 939 905 1.04:1
RefMinimalPerf.default 247 237 1.04:1
SkeletonMinimalPerf.default 433 418 1.04:1
TooltipMinimalPerf.default 852 823 1.04:1
Button.Fluent 584 560 1.04:1
AvatarMinimalPerf.default 485 472 1.03:1
ListCommonPerf.default 672 650 1.03:1
Icon.Fluent 724 705 1.03:1
ButtonUseCssPerf.default 840 820 1.02:1
ChatDuplicateMessagesPerf.default 426 417 1.02:1
CheckboxMinimalPerf.default 2877 2825 1.02:1
EmbedMinimalPerf.default 1943 1905 1.02:1
ImageMinimalPerf.default 414 407 1.02:1
LoaderMinimalPerf.default 745 727 1.02:1
MenuMinimalPerf.default 879 859 1.02:1
PortalMinimalPerf.default 176 173 1.02:1
ProviderMinimalPerf.default 1035 1014 1.02:1
RadioGroupMinimalPerf.default 463 452 1.02:1
TreeMinimalPerf.default 906 892 1.02:1
TreeWith60ListItems.default 212 207 1.02:1
Avatar.Fluent 888 869 1.02:1
Dialog.Fluent 815 799 1.02:1
Slider.Fluent 1581 1544 1.02:1
Tooltip.Fluent 565 552 1.02:1
ButtonOverridesMissPerf.default 1711 1701 1.01:1
CardMinimalPerf.default 565 562 1.01:1
DatepickerMinimalPerf.default 46818 46208 1.01:1
HeaderSlotsPerf.default 804 797 1.01:1
LayoutMinimalPerf.default 421 418 1.01:1
ListNestedPerf.default 582 577 1.01:1
SegmentMinimalPerf.default 376 372 1.01:1
SplitButtonMinimalPerf.default 3771 3736 1.01:1
ToolbarMinimalPerf.default 959 945 1.01:1
Checkbox.Fluent 639 634 1.01:1
Dropdown.Fluent 2971 2946 1.01:1
AttachmentMinimalPerf.default 172 172 1:1
DropdownManyItemsPerf.default 744 743 1:1
DropdownMinimalPerf.default 2946 2943 1:1
InputMinimalPerf.default 1315 1312 1:1
ItemLayoutMinimalPerf.default 1295 1301 1:1
ProviderMergeThemesPerf.default 2106 2107 1:1
ReactionMinimalPerf.default 424 423 1:1
IconMinimalPerf.default 685 688 1:1
TableMinimalPerf.default 423 424 1:1
TextAreaMinimalPerf.default 474 475 1:1
CustomToolbarPrototype.default 3917 3932 1:1
Text.Fluent 359 359 1:1
BoxMinimalPerf.default 372 376 0.99:1
ButtonUseCssNestingPerf.default 1096 1103 0.99:1
DialogMinimalPerf.default 788 793 0.99:1
FlexMinimalPerf.default 303 306 0.99:1
ListMinimalPerf.default 489 492 0.99:1
PopupMinimalPerf.default 714 722 0.99:1
SliderMinimalPerf.default 1571 1584 0.99:1
StatusMinimalPerf.default 729 736 0.99:1
CarouselMinimalPerf.default 455 463 0.98:1
ChatMinimalPerf.default 619 634 0.98:1
TableManyItemsPerf.default 2130 2163 0.98:1
DividerMinimalPerf.default 371 382 0.97:1
MenuButtonMinimalPerf.default 1538 1589 0.97:1
TextMinimalPerf.default 361 372 0.97:1
AnimationMinimalPerf.default 397 412 0.96:1
LabelMinimalPerf.default 426 442 0.96:1
ButtonSlotsPerf.default 584 616 0.95:1

@scomea
Copy link

scomea commented Nov 11, 2020

Smoked, looks good to me.

@khamudom khamudom force-pushed the users/khamu/button-anchor-high-contrast branch from 6e31275 to 31a0d12 Compare November 11, 2020 21:23
@size-auditor
Copy link

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

Asset size changes

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

Baseline commit: eb887106055e072995f943c095301091fb732ec2 (build)

@khamudom khamudom force-pushed the users/khamu/button-anchor-high-contrast branch from 37fb19b to 1a5b5d4 Compare November 16, 2020 22:29
@chrisdholt chrisdholt merged commit 68628df into microsoft:master Nov 16, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 23, 2020
@khamudom
fix: set high contrast colors on button and anchor components (micros…
e4d054f 
…oft#15916)

* moved high contrast work into common button styles file

* Change files

* update import order and run yarn change

* add high contrast styles for href anchors
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

@scomea scomea scomea approved these changes

Assignees

@behowell behowell

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@khamudom @msft-github-bot @scomea @chrisdholt @behowell