Skip to content

Fix(react-theme): remove webHighContrastTheme #23083

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

Merged
miroslavstastny merged 13 commits into from
May 23, 2022
Merged

Fix(react-theme): remove webHighContrastTheme #23083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
dd86813
fix(react-theme): Remove webHighContrast theme
miroslavstastny May 19, 2022
ee98467
change file
miroslavstastny May 19, 2022
98ef426
react-button: Removing deprecated block prop from all button componen…
khmakoto May 19, 2022
2b3c2bb
fix(react-text): Update typography wrappers to latest naming (#22934)
theerebuss May 19, 2022
5184b86
BREAKING: Removing deprecated `<componentName>ClassName` exports from…
sopranopillow May 19, 2022
a795ce3
BREAKING: Update string unions to `spinal-case` (#23001)
spmonahan May 19, 2022
9bc8312
fix: missing inputClassName in merge conflict resolution
spmonahan May 20, 2022
aa2bc5f
react-select: update api snapshot
spmonahan May 20, 2022
5d0c5bf
react-alert: update conformance tests
spmonahan May 20, 2022
ca223ba
fix: update react-components api snapshot
spmonahan May 20, 2022
968737e
BREAKING CHANGE: Encapsulate Popper API (#22586)
ling1726 May 20, 2022
3f9b4cb
Merge branch '9.0-breaking-changes' into fix/remove-web-hc-theme
spmonahan May 20, 2022
17327cd
Merge remote-tracking branch 'upstream/9.0-breaking-changes' into fix…
miroslavstastny May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/vr-tests-react-components/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-check
import * as React from 'react';
import { setAddon } from '@storybook/react';
import { webLightTheme, webHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';
import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme';
import { FluentProvider } from '@fluentui/react-provider';

/**
Expand Down Expand Up @@ -44,7 +44,7 @@ setAddon({
}
if (config.includeHighContrast) {
this.add(storyName + ' - High Contrast', context => {
return <FluentProvider theme={webHighContrastTheme}>{storyFn(context)}</FluentProvider>;
return <FluentProvider theme={teamsHighContrastTheme}>{storyFn(context)}</FluentProvider>;
});
}

Expand Down
7 changes: 7 additions & 0 deletions change/@fluentui-react-components-fa0246a1-fd02-43e4-a4fb-5ba0c3bedea2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Remove webHighContrast theme",
"packageName": "@fluentui/react-components",
"email": "miroslav.stastny@microsoft.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-theme-a6575400-7777-47a9-bc10-00cc0cdb1775.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Remove webHighContrast theme",
"packageName": "@fluentui/react-theme",
"email": "miroslav.stastny@microsoft.com",
"dependentChangeType": "patch"
}
3 changes: 0 additions & 3 deletions packages/react-components/react-components/etc/react-components.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,6 @@ import { useTooltip_unstable } from '@fluentui/react-tooltip';
import { useTooltipStyles_unstable } from '@fluentui/react-tooltip';
import { VerticalSpacingTokens } from '@fluentui/react-theme';
import { webDarkTheme } from '@fluentui/react-theme';
import { webHighContrastTheme } from '@fluentui/react-theme';
import { webLightTheme } from '@fluentui/react-theme';

export { __styles }
Expand Down Expand Up @@ -1570,8 +1569,6 @@ export { VerticalSpacingTokens }

export { webDarkTheme }

export { webHighContrastTheme }

export { webLightTheme }

// (No @packageDocumentation comment for this package)
Expand Down
1 change: 0 additions & 1 deletion packages/react-components/react-components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ export {
tokens,
typographyStyles,
webDarkTheme,
webHighContrastTheme,
webLightTheme,
} from '@fluentui/react-theme';
export type {
Expand Down
4 changes: 0 additions & 4 deletions packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,6 @@ export const themes: readonly [{
readonly id: "web-dark";
readonly label: "Web Dark";
readonly theme: Theme;
}, {
readonly id: "web-high-contrast";
readonly label: "Web High Contrast";
readonly theme: Theme;
}, {
readonly id: "teams-light";
readonly label: "Teams Light";
Expand Down
2 changes: 0 additions & 2 deletions packages/react-components/react-storybook-addon/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
webLightTheme,
webDarkTheme,
webHighContrastTheme,
teamsLightTheme,
teamsDarkTheme,
teamsHighContrastTheme,
Expand All @@ -14,7 +13,6 @@ export { FluentProvider } from '@fluentui/react-provider';
export const themes = [
{ id: 'web-light', label: 'Web Light', theme: webLightTheme },
{ id: 'web-dark', label: 'Web Dark', theme: webDarkTheme },
{ id: 'web-high-contrast', label: 'Web High Contrast', theme: webHighContrastTheme },
{ id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme },
{ id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme },
{ id: 'teams-high-contrast', label: 'Teams High Contrast', theme: teamsHighContrastTheme },
Expand Down
2 changes: 0 additions & 2 deletions packages/react-components/react-storybook/src/knobs/useFluentTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
webLightTheme,
webDarkTheme,
webHighContrastTheme,
teamsLightTheme,
teamsDarkTheme,
teamsHighContrastTheme,
Expand All @@ -14,7 +13,6 @@ const themeSelectorLabel = 'Theme';
const themeOptions = [
{ label: 'Web Light', theme: webLightTheme },
{ label: 'Web Dark', theme: webDarkTheme },
{ label: 'Web High Contrast', theme: webHighContrastTheme },
{ label: 'Teams Light', theme: teamsLightTheme },
{ label: 'Teams Dark', theme: teamsDarkTheme },
{ label: 'Teams High Contrast', theme: teamsHighContrastTheme },
Expand Down
6 changes: 3 additions & 3 deletions packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { FluentProvider } from '@fluentui/react-provider';
import { webDarkTheme, webHighContrastTheme, webLightTheme } from '@fluentui/react-theme';
import { webDarkTheme, teamsHighContrastTheme, webLightTheme } from '@fluentui/react-theme';
import { Switch } from '../index';

const outerWrapperStyle: React.CSSProperties = {
Expand Down Expand Up @@ -33,7 +33,7 @@ export const Themed = () => (
<Switch checked={false} label="Unchecked and enabled" />
<Switch checked={false} disabled label="Unchecked and disabled" />
</FluentProvider>
<FluentProvider style={rightSectionStyle} theme={webHighContrastTheme}>
<FluentProvider style={rightSectionStyle} theme={teamsHighContrastTheme}>
<Switch checked={false} label="Unchecked and enabled" />
<Switch checked={false} disabled label="Unchecked and disabled" />
</FluentProvider>
Comment on lines +36 to 39

@behowell behowell May 20, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Presumably since we're not recommending using a high contrast theme in web, we should entirely remove any stories that use it, right?

@miroslavstastny miroslavstastny May 20, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Let's do that separately. In regular component stories there should not be multiple themes at all. Already discussed Card with @andrefcdias, Switch is probably the only other one which does that. I will take care of those.

@theerebuss theerebuss May 20, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Addressed in #23082

Expand All @@ -47,7 +47,7 @@ export const Themed = () => (
<Switch checked label="Checked and enabled" />
<Switch checked disabled label="Checked and disabled" />
</FluentProvider>
<FluentProvider style={rightSectionStyle} theme={webHighContrastTheme}>
<FluentProvider style={rightSectionStyle} theme={teamsHighContrastTheme}>
<Switch checked label="Checked and enabled" />
<Switch checked disabled label="Checked and disabled" />
</FluentProvider>
Expand Down
3 changes: 0 additions & 3 deletions packages/react-components/react-theme/etc/react-theme.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -522,9 +522,6 @@ export type VerticalSpacingTokens = {
// @public (undocumented)
export const webDarkTheme: Theme;

// @public (undocumented)
export const webHighContrastTheme: Theme;

// @public (undocumented)
export const webLightTheme: Theme;

Expand Down
9 changes: 1 addition & 8 deletions packages/react-components/react-theme/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
export {
teamsDarkTheme,
teamsHighContrastTheme,
teamsLightTheme,
webDarkTheme,
webHighContrastTheme,
webLightTheme,
} from './themes/index';
export { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, webDarkTheme, webLightTheme } from './themes/index';
export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils/index';

export { themeToTokensObject } from './themeToTokensObject';
Expand Down
4 changes: 0 additions & 4 deletions packages/react-components/react-theme/src/themes/web/highContrastTheme.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/react-components/react-theme/src/themes/web/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
export * from './lightTheme';
export * from './darkTheme';
export * from './highContrastTheme';