Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Bug: Storybook is not loading styles correctly #914

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

Jump to bottom
Closed
greyscaled opened this issue Apr 7, 2022 · 0 comments · Fixed by #988
Closed

Bug: Storybook is not loading styles correctly #914

greyscaled opened this issue Apr 7, 2022 · 0 comments · Fixed by #988
Assignees
@greyscaled
Labels
site Area: frontend dashboard
Milestone
V2 Beta

Comments

@greyscaled
Copy link
Contributor

Expected

Our storybook has the correct fonts, colors and styling as the application.

Actual

Our storybook does not load the correct fonts, colors and styling as the application.

Notes

Needs to update .storybook/preview.js to load theme correctly.
@greyscaled greyscaled added bug 🐛 site Area: frontend dashboard labels Apr 7, 2022
@greyscaled greyscaled added this to the V2 Beta milestone Apr 7, 2022
@greyscaled greyscaled self-assigned this Apr 7, 2022
greyscaled added a commit that referenced this issue Apr 13, 2022
@greyscaled
chore: fix storybook fonts
c590edb 
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:

- declare the themeing add-on in .storybook/main.js addons
- 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
@greyscaled greyscaled mentioned this issue Apr 13, 2022
Merged
greyscaled added a commit that referenced this issue Apr 13, 2022
@greyscaled
chore: fix storybook fonts (#988)
0536a14 
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@greyscaled greyscaled

Labels
site Area: frontend dashboard
Projects
None yet
Milestone
V2 Beta
Development

Successfully merging a pull request may close this issue.

chore: fix storybook fonts coder/coder
2 participants
@misskniss @greyscaled