Skip to content

Commit

Permalink
Base64 Encoded fonts for storybook (#11347)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Base64 encode our Inter font dependencies for storybook so we can be
sure that they're loaded immediately in chromatic 🤞
  • Loading branch information
gwyneplaine authored Dec 14, 2023
1 parent e197ca5 commit f3e2481
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 19 deletions.
25 changes: 19 additions & 6 deletions polaris-react/.storybook/preview-head.html

Large diffs are not rendered by default.

13 changes: 0 additions & 13 deletions polaris-react/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,8 @@ import enTranslations from '../locales/en.json';
import {GridOverlay} from './GridOverlay';
import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
import {gridOptions, featureFlagOptions} from './manager';
import isChromatic from 'chromatic/isChromatic';
import {themeNameDefault, themeNames, themes} from '@shopify/polaris-tokens';

// Use the document.fonts API to check if fonts have loaded
// https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts API to
const fontLoader = async () => ({
fonts: await document.fonts.ready,
});

/* 👇 It's configured as a global loader
* See https://storybook.js.org/docs/react/writing-stories/loaders
* to learn more about loaders
*/
export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];

function StrictModeDecorator(Story, context) {
const {strictMode} = context.globals;
const Wrapper = strictMode ? React.StrictMode : React.Fragment;
Expand Down

0 comments on commit f3e2481

Please sign in to comment.