chore: fix storybook fonts (#988)

Summary:

Configures storybook with MUI themes as according to their
documentation. We were previously not aligned with their example.

See: https://storybook.js.org/addons/@react-theming/storybook-addon

Details:

- configure a providerFn for MUI with CssBaseline. We were previously
missing the CssBaseline implementation, causing the inconsistency.

Impact:

Resolves inconsistency between Storybook and production. I had tested
the Tabpanel in production vs Storybook. In storybook, the font had
fallen back to Times New Roman, whereas in production it had fallen back
to Inter. This was because of CssBaseline being configured as a child of
ThemeProvider.

Resolves: #914
This commit is contained in:
G r e y
2022-04-13 12:03:30 -04:00
committed by GitHub
parent 6edd7cb036
commit 0536a140ed

View File

@ -1,3 +1,4 @@
import CssBaseline from "@material-ui/core/CssBaseline"
import ThemeProvider from "@material-ui/styles/ThemeProvider"
import { withThemes } from "@react-theming/storybook-addon"
import { createMemoryHistory } from "history"
@ -6,7 +7,14 @@ import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
import { dark, light } from "../src/theme"
import "../src/theme/global-fonts"
addDecorator(withThemes(ThemeProvider, [light, dark]))
const providerFn = ({ children, theme }) => (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
)
addDecorator(withThemes(null, [light, dark], { providerFn }))
const history = createMemoryHistory()