From 0536a140edc8b0863fc388c23cdc17f02d8c6adf Mon Sep 17 00:00:00 2001 From: G r e y Date: Wed, 13 Apr 2022 12:03:30 -0400 Subject: [PATCH] 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 --- site/.storybook/preview.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js index 7eec57aa51..e35b6903f9 100644 --- a/site/.storybook/preview.js +++ b/site/.storybook/preview.js @@ -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 }) => ( + + + {children} + +) + +addDecorator(withThemes(null, [light, dark], { providerFn })) const history = createMemoryHistory()