mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
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:
@ -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()
|
||||
|
||||
|
Reference in New Issue
Block a user