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:react-nav-preview: High contrast issues #31704

Merged
merged 7 commits into from
Jun 17, 2024
Merged

fix:react-nav-preview: High contrast issues #31704

merged 7 commits into from
Jun 17, 2024

Conversation

mltejera
Copy link
Contributor

@mltejera mltejera commented Jun 13, 2024 •
edited
Loading

Addresses icon and indicator issues in Teams HC theme and Windows High Contrast when items are selected.

Teams HC before:
image

Windows HC before:
image

Teams HC after:
image

Windows HC after:
image

Ladders to #26649

@mltejera mltejera requested a review from a team as a code owner June 13, 2024 18:10
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 13, 2024 •
edited
Loading

📊 Bundle size report

✅ No changes found

@mltejera mltejera requested review from a team as code owners June 13, 2024 18:42
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 13, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 636 617 5000
Button mount 313 294 5000
Field mount 1122 1086 5000
FluentProvider mount 728 698 5000
FluentProviderWithTheme mount 79 91 10
FluentProviderWithTheme virtual-rerender 36 35 10
FluentProviderWithTheme virtual-rerender-with-unmount 80 79 10
MakeStyles mount 870 874 50000
Persona mount 1723 1716 5000
SpinButton mount 1367 1416 5000
SwatchPicker mount 1608 1700 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 13, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AttachmentMinimalPerf.default 82 80 1.02:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 100 83 1.2:1
TextMinimalPerf.default 211 192 1.1:1
DividerMinimalPerf.default 211 195 1.08:1
AccordionMinimalPerf.default 82 77 1.06:1
BoxMinimalPerf.default 199 188 1.06:1
ListMinimalPerf.default 316 298 1.06:1
SliderMinimalPerf.default 775 730 1.06:1
TreeWith60ListItems.default 89 84 1.06:1
VideoMinimalPerf.default 451 426 1.06:1
AlertMinimalPerf.default 157 149 1.05:1
RefMinimalPerf.default 112 107 1.05:1
AttachmentSlotsPerf.default 659 636 1.04:1
HeaderSlotsPerf.default 467 450 1.04:1
ListNestedPerf.default 318 307 1.04:1
ReactionMinimalPerf.default 219 211 1.04:1
SegmentMinimalPerf.default 199 192 1.04:1
SkeletonMinimalPerf.default 198 191 1.04:1
HeaderMinimalPerf.default 211 204 1.03:1
LabelMinimalPerf.default 216 210 1.03:1
SplitButtonMinimalPerf.default 2283 2217 1.03:1
TreeMinimalPerf.default 479 465 1.03:1
CarouselMinimalPerf.default 263 258 1.02:1
ChatWithPopoverPerf.default 196 193 1.02:1
DatepickerMinimalPerf.default 3633 3550 1.02:1
MenuMinimalPerf.default 519 507 1.02:1
StatusMinimalPerf.default 390 383 1.02:1
TextAreaMinimalPerf.default 292 286 1.02:1
CheckboxMinimalPerf.default 1162 1154 1.01:1
FlexMinimalPerf.default 153 152 1.01:1
ItemLayoutMinimalPerf.default 697 691 1.01:1
PopupMinimalPerf.default 349 345 1.01:1
ProviderMergeThemesPerf.default 652 646 1.01:1
TooltipMinimalPerf.default 1273 1260 1.01:1
AnimationMinimalPerf.default 290 290 1:1
AvatarMinimalPerf.default 108 108 1:1
ButtonOverridesMissPerf.default 655 653 1:1
CardMinimalPerf.default 299 298 1:1
DropdownMinimalPerf.default 1417 1418 1:1
EmbedMinimalPerf.default 1892 1898 1:1
ImageMinimalPerf.default 230 231 1:1
InputMinimalPerf.default 543 545 1:1
LayoutMinimalPerf.default 195 195 1:1
MenuButtonMinimalPerf.default 946 947 1:1
TableMinimalPerf.default 230 231 1:1
CustomToolbarPrototype.default 1473 1467 1:1
ButtonMinimalPerf.default 85 86 0.99:1
ChatMinimalPerf.default 419 422 0.99:1
DialogMinimalPerf.default 436 439 0.99:1
GridMinimalPerf.default 193 194 0.99:1
ListCommonPerf.default 388 393 0.99:1
ProviderMinimalPerf.default 199 201 0.99:1
RadioGroupMinimalPerf.default 261 264 0.99:1
IconMinimalPerf.default 370 372 0.99:1
TableManyItemsPerf.default 1086 1098 0.99:1
ButtonSlotsPerf.default 319 327 0.98:1
ToolbarMinimalPerf.default 534 543 0.98:1
DropdownManyItemsPerf.default 370 382 0.97:1
ChatDuplicateMessagesPerf.default 146 152 0.96:1
LoaderMinimalPerf.default 183 190 0.96:1
FormMinimalPerf.default 213 224 0.95:1
ListWith60ListItems.default 343 364 0.94:1
RosterPerf.default 1568 1669 0.94:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 13, 2024 •
edited
Loading

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 13, 2024 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 619 641 5000
Breadcrumb mount 1663 1678 1000
Checkbox mount 1718 1694 5000
CheckboxBase mount 1513 1501 5000
ChoiceGroup mount 3006 2958 5000
ComboBox mount 682 668 1000
CommandBar mount 6574 6511 1000
ContextualMenu mount 12049 12404 1000
DefaultButton mount 803 791 5000
DetailsRow mount 2217 2229 5000
DetailsRowFast mount 2214 2271 5000
DetailsRowNoStyles mount 2059 2015 5000
Dialog mount 2859 2851 1000
DocumentCardTitle mount 227 223 1000
Dropdown mount 2015 2018 5000
FocusTrapZone mount 1134 1163 5000
FocusZone mount 1064 1113 5000
GroupedList mount 42243 41997 2
GroupedList virtual-rerender 20258 20245 2
GroupedList virtual-rerender-with-unmount 50803 51562 2
GroupedListV2 mount 221 226 2
GroupedListV2 virtual-rerender 213 215 2
GroupedListV2 virtual-rerender-with-unmount 231 234 2
IconButton mount 1151 1135 5000
Label mount 345 346 5000
Layer mount 2771 2741 5000
Link mount 397 391 5000
MenuButton mount 989 966 5000
MessageBar mount 21411 21278 5000
Nav mount 2065 2062 1000
OverflowSet mount 795 802 5000
Panel mount 1857 1804 1000
Persona mount 772 782 1000
Pivot mount 922 888 1000
PrimaryButton mount 941 948 5000
Rating mount 4695 4670 5000
SearchBox mount 947 929 5000
Shimmer mount 1948 1933 5000
Slider mount 1370 1374 5000
SpinButton mount 3013 3030 5000
Spinner mount 400 400 5000
SplitButton mount 1889 1894 5000
Stack mount 411 423 5000
StackWithIntrinsicChildren mount 864 869 5000
StackWithTextChildren mount 2737 2701 5000
SwatchColorPicker mount 6514 6449 5000
TagPicker mount 1489 1460 5000
Text mount 387 378 5000
TextField mount 956 954 5000
ThemeProvider mount 860 847 5000
ThemeProvider virtual-rerender 584 580 5000
ThemeProvider virtual-rerender-with-unmount 1285 1297 5000
Toggle mount 627 628 5000
buttonNative mount 189 193 5000

@lekoulekou
Copy link

Harros! I checked Figma and it looks like Compound Brand Foreground has the same values as compound brand stroke--but I can only see rest, hover, and pressed values, no high contrast values :( Figma

IF high contrast CBForeground is the same as CBStroke, then I'd prefer foreground bc I think text and icon are closer to foreground items than stroke.

@mltejera
Copy link
Contributor Author

Harros! I checked Figma and it looks like Compound Brand Foreground has the same values as compound brand stroke--but I can only see rest, hover, and pressed values, no high contrast values :( Figma

IF high contrast CBForeground is the same as CBStroke, then I'd prefer foreground bc I think text and icon are closer to foreground items than stroke.

Yep - good call! Updated :-)

@mltejera mltejera enabled auto-merge (squash) June 17, 2024 22:18
@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@mltejera mltejera merged commit cb605ec into microsoft:master Jun 17, 2024
21 checks passed
EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Jun 17, 2024
@mltejera @EdDaWord
fix:react-nav-preview: High contrast issues (microsoft#31704)
95a9236
EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 14, 2024
@mltejera @EdDaWord
fix:react-nav-preview: High contrast issues (microsoft#31704)
e5ce9d1 
chore(motion): add bundle size fixtures (microsoft#31730)

fix(react-calendar-compat): fixed focus indicator cut off (microsoft#31596)

feat: use custom states for button and anchor button variants (microsoft#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (microsoft#31721)

fix:react-nav-preview: High contrast issues (microsoft#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token
EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 14, 2024
@mltejera @EdDaWord
fix:react-nav-preview: High contrast issues (microsoft#31704)
f32f216 
chore(motion): add bundle size fixtures (microsoft#31730)

fix(react-calendar-compat): fixed focus indicator cut off (microsoft#31596)

feat: use custom states for button and anchor button variants (microsoft#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (microsoft#31721)

fix:react-nav-preview: High contrast issues (microsoft#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token
EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 16, 2024
@mltejera @EdDaWord
fix:react-nav-preview: High contrast issues (microsoft#31704)
f8ade2c
EdDaWord added a commit that referenced this pull request Aug 19, 2024
@EdDaWord
Try a single file change
8a89eb6 
Change most tokens in useButtonStyles file

Give all the react-components a try

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

feat: update badge to use custom states (#31733)

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test
EdDaWord added a commit that referenced this pull request Aug 19, 2024
@EdDaWord
Try a single file change
537f055 
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake
EdDaWord added a commit that referenced this pull request Aug 19, 2024
@EdDaWord
Try a single file change
ffdafe1 
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake

Fix Random YML File
EdDaWord added a commit that referenced this pull request Aug 20, 2024
@EdDaWord
Try a single file change
6bbdaed 
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake

Fix Random YML File

Fix rebase mistake
EdDaWord added a commit that referenced this pull request Aug 23, 2024
@EdDaWord
Try a single file change
3a595f4 
Change most tokens in useButtonStyles file

Give all the react-components a try

fix: Teaching bubble carousel tabs are visible in windows high contrast (#31734)

fix:react-nav-preview: High contrast issues (#31704)

chore(motion): add bundle size fixtures (#31730)

fix(react-calendar-compat): fixed focus indicator cut off (#31596)

feat: use custom states for button and anchor button variants (#31718)

docs: add min-width styles to Table and DataGrid stories, add best practices (#31721)

fix:react-nav-preview: High contrast issues (#31704)

Pretty & lint & yarn change

Somehow missed change files

Fix one of the tests

Fix React-text test

Use hashed name for each semantic and control token

Build

missed one

Fix small mistake

Fix small mistake

Fix small mistake

Fix Random YML File

Fix rebase mistake

Fix mistake on number of quotes

Fix any possible merge conflicts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@mainframev mainframev mainframev approved these changes

@sopranopillow sopranopillow sopranopillow approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@mltejera @fabricteam @lekoulekou @sopranopillow @mainframev