Skip to content

High Contrast Selectors: Fix broken 2nd query#23739

Merged
GeoffCoxMSFT merged 4 commits intomicrosoft:masterfrom
micahgodbolt:23716-chrome-high-contrast
Jun 27, 2022
Merged

High Contrast Selectors: Fix broken 2nd query#23739
GeoffCoxMSFT merged 4 commits intomicrosoft:masterfrom
micahgodbolt:23716-chrome-high-contrast

Conversation

@micahgodbolt
Copy link
Copy Markdown
Member

@micahgodbolt micahgodbolt commented Jun 27, 2022

fixes #23716

selectors with multiple media queries do not need to duplicate @media

@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
.cs {color: green }
}

not

@media screen and (-ms-high-contrast: active), @media screen and (forced-colors: active) {
.cs {color: green }
}

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Jun 27, 2022

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 2a778dc:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Jun 27, 2022

📊 Bundle size report

🤖 This report was generated against 3fd2ece7f931253f2d2c73143ab7dac3ff816287

@micahgodbolt micahgodbolt enabled auto-merge (squash) June 27, 2022 18:14
@size-auditor
Copy link
Copy Markdown

size-auditor bot commented Jun 27, 2022

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-PositioningContainer 69.162 kB 69.155 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ProgressIndicator 37.813 kB 37.806 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Rating 77.138 kB 77.131 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Pivot 176.857 kB 176.85 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Pickers 274.688 kB 274.681 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ScrollablePane 53.668 kB 53.661 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-SearchBox 175.56 kB 175.553 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Slider 53.804 kB 53.797 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 217.992 kB 217.985 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Separator 32.941 kB 32.934 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Shimmer 47.224 kB 47.217 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 229.18 kB 229.173 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-PersonaCoin 108.515 kB 108.508 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-SpinButton 179.437 kB 179.43 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Spinner 40.042 kB 40.035 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-SwatchColorPicker 178.438 kB 178.431 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 191.632 kB 191.625 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-TextField 77.998 kB 77.991 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-TimePicker 224.193 kB 224.186 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Toggle 43.43 kB 43.423 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Tooltip 81.101 kB 81.094 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-WeeklyDayPicker 97.444 kB 97.437 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-PersonaPresence 55.651 kB 55.644 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 228.262 kB 228.255 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Persona 108.515 kB 108.508 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-CommandBar 188.953 kB 188.946 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Checkbox 56.276 kB 56.269 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ChoiceGroup 61.629 kB 61.622 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ChoiceGroupOption 56.238 kB 56.231 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Coachmark 87.19 kB 87.183 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ColorPicker 124.498 kB 124.491 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ComboBox 234.789 kB 234.782 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ContextualMenu 144.1 kB 144.093 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Panel 186.926 kB 186.919 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-DatePicker 173.916 kB 173.909 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Dialog 197.094 kB 197.087 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-HoverCard 91.15 kB 91.143 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-DocumentCard 203.331 kB 203.324 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-GroupedList 121.304 kB 121.297 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Grid 168.746 kB 168.739 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Check 50.815 kB 50.808 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Callout 78.551 kB 78.544 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Calendar 116.241 kB 116.234 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ButtonGrid 168.746 kB 168.739 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Overlay 39.15 kB 39.143 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Facepile 198.02 kB 198.013 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Nav 175.888 kB 175.881 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Modal 89.227 kB 89.22 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-MessageBar 176.602 kB 176.595 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-MarqueeSelection 69.33 kB 69.323 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Link 36.208 kB 36.201 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Label 36.712 kB 36.705 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Keytips 100.094 kB 100.087 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-KeytipLayer 97.375 kB 97.368 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-ActivityItem 68.411 kB 68.404 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Keytip 76.212 kB 76.205 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 188.003 kB 187.996 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Button 182.805 kB 182.798 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-DetailsList 218.85 kB 218.843 kB BelowBaseline     -7 bytes
office-ui-fabric-react fluentui-react-Dropdown 218.471 kB 218.457 kB BelowBaseline     -14 bytes
office-ui-fabric-react fluentui-react-Styling 43.543 kB 43.515 kB BelowBaseline     -28 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 3fd2ece7f931253f2d2c73143ab7dac3ff816287 (build)

@micahgodbolt micahgodbolt requested a review from a team as a code owner June 27, 2022 18:25
@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Jun 27, 2022

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 800 754 5000
Breadcrumb mount 2106 2174 1000
Checkbox mount 1296 1173 5000
CheckboxBase mount 1104 1089 5000
ChoiceGroup mount 3901 3828 5000
ComboBox mount 859 843 1000
CommandBar mount 9269 9119 1000
ContextualMenu mount 11043 10642 1000
DefaultButton mount 991 928 5000
DetailsRow mount 3158 3184 5000
DetailsRowFast mount 3349 3336 5000
DetailsRowNoStyles mount 3248 3111 5000
Dialog mount 2423 2443 1000
DocumentCardTitle mount 135 154 1000
Dropdown mount 2904 2941 5000
FocusTrapZone mount 1556 1667 5000
FocusZone mount 1543 1585 5000
IconButton mount 1475 1482 5000
Label mount 266 307 5000
Layer mount 2504 2390 5000
Link mount 412 414 5000
MenuButton mount 1285 1247 5000
MessageBar mount 1871 1731 5000
Nav mount 2827 2891 1000
OverflowSet mount 957 927 5000
Panel mount 1874 1877 1000
Persona mount 830 864 1000
Pivot mount 1243 1233 1000
PrimaryButton mount 1140 1119 5000
Rating mount 6749 6724 5000
SearchBox mount 1092 1021 5000
Shimmer mount 2177 2178 5000
Slider mount 1681 1606 5000
SpinButton mount 4275 4622 5000
Spinner mount 375 334 5000
SplitButton mount 2683 2762 5000
Stack mount 432 454 5000
StackWithIntrinsicChildren mount 2006 1810 5000
StackWithTextChildren mount 4366 4146 5000
SwatchColorPicker mount 9741 9720 5000
TagPicker mount 2357 2318 5000
TeachingBubble mount 88693 86858 5000
Text mount 377 354 5000
TextField mount 1243 1225 5000
ThemeProvider mount 1033 998 5000
ThemeProvider virtual-rerender 552 552 5000
ThemeProvider virtual-rerender-with-unmount 1639 1612 5000
Toggle mount 682 690 5000
buttonNative mount 109 108 5000

@GeoffCoxMSFT GeoffCoxMSFT disabled auto-merge June 27, 2022 19:52
@GeoffCoxMSFT GeoffCoxMSFT merged commit 1c4cd1b into microsoft:master Jun 27, 2022
rohitpagariya pushed a commit to rohitpagariya/fluentui that referenced this pull request Jun 28, 2022
* fix high contrast media query selector

* change file

* update snaps

* card snaps
micahgodbolt added a commit that referenced this pull request Jul 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Button styles in high contrast look don't provide enough user feedback in Chrome

6 participants