fix:react-nav-preview: High contrast issues by mltejera · Pull Request #31704 · microsoft/fluentui

mltejera · 2024-06-13T18:10:25Z

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

Teams HC before:

Windows HC before:

Teams HC after:

Windows HC after:

Ladders to #26649

fabricteam · 2024-06-13T18:13:57Z

📊 Bundle size report

✅ No changes found

change/@fluentui-react-nav-preview-71eeaf96-dc68-4684-9b39-e17f06cdd4c1.json

fabricteam · 2024-06-13T18:53:11Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
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 · 2024-06-13T18:58:29Z

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 · 2024-06-13T19:00:05Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-06-13T19:07:34Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
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

change/@fluentui-react-nav-preview-71eeaf96-dc68-4684-9b39-e17f06cdd4c1.json

lekoulekou · 2024-06-13T23:18:23Z

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.

docs/react-v9/contributing/dev-workflow.md

mltejera · 2024-06-14T16:57:43Z

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 :-)

change/@fluentui-react-nav-preview-71eeaf96-dc68-4684-9b39-e17f06cdd4c1.json

docs/react-v9/contributing/dev-workflow.md

fabricteam · 2024-06-17T22:26:09Z

🕵 fluentuiv8 No visual regressions between this PR and main

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

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

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

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

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

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

mltejera requested a review from a team as a code owner June 13, 2024 18:10

mltejera force-pushed the nav/high-contrast-issues branch from cedad9d to 9402246 Compare June 13, 2024 18:13

mltejera requested review from a team as code owners June 13, 2024 18:42

fabricteam reviewed Jun 13, 2024

View reviewed changes

change/@fluentui-react-nav-preview-71eeaf96-dc68-4684-9b39-e17f06cdd4c1.json Show resolved Hide resolved

fabricteam reviewed Jun 13, 2024

View reviewed changes

change/@fluentui-react-nav-preview-71eeaf96-dc68-4684-9b39-e17f06cdd4c1.json Show resolved Hide resolved

mainframev reviewed Jun 14, 2024

View reviewed changes

docs/react-v9/contributing/dev-workflow.md Outdated Show resolved Hide resolved

sopranopillow approved these changes Jun 14, 2024

View reviewed changes

change/@fluentui-react-nav-preview-71eeaf96-dc68-4684-9b39-e17f06cdd4c1.json Outdated Show resolved Hide resolved

docs/react-v9/contributing/dev-workflow.md Show resolved Hide resolved

mainframev approved these changes Jun 14, 2024

View reviewed changes

mltejera added 7 commits June 17, 2024 15:10

address teams and windows high contrast issues

37dd80c

change file

fa7ee12

update some docs

6b579c2

update changefile

2c229e6

use different compound token.

7fd8cdf

udpdate docs

1914388

udpdate change

e767288

mltejera force-pushed the nav/high-contrast-issues branch from cb0f636 to e767288 Compare June 17, 2024 22:11

mltejera enabled auto-merge (squash) June 17, 2024 22:18

mltejera merged commit cb605ec into microsoft:master Jun 17, 2024

EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Jun 17, 2024

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

95a9236

EdDaWord pushed a commit to EdDaWord/fluentui that referenced this pull request Aug 16, 2024

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

f8ade2c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

fix:react-nav-preview: High contrast issues#31704
mltejera merged 7 commits intomicrosoft:masterfrom
mltejera:nav/high-contrast-issues

mltejera commented Jun 13, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 13, 2024 •

edited

Loading

Uh oh!

Uh oh!

fabricteam commented Jun 13, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 13, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 13, 2024 •

edited

Loading

Uh oh!

fabricteam commented Jun 13, 2024 •

edited

Loading

Uh oh!

Uh oh!

lekoulekou commented Jun 13, 2024

Uh oh!

Uh oh!

mltejera commented Jun 14, 2024

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Jun 17, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

mltejera commented Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

fabricteam commented Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

Uh oh!

fabricteam commented Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

lekoulekou commented Jun 13, 2024

Uh oh!

Uh oh!

mltejera commented Jun 14, 2024

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Jun 17, 2024

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mltejera commented Jun 13, 2024 •

edited

Loading

fabricteam commented Jun 13, 2024 •

edited

Loading

fabricteam commented Jun 13, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Jun 13, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Jun 13, 2024 •

edited

Loading

fabricteam commented Jun 13, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)