Warning when using modals

[ghelton]

I'm seeing a warning when rendering modals. Is there additional css that needs to be included for modals?
We're currently on this modal version, let me know if you need any others:

"@twilio-paste/modal": "^0.2.1",

When the modal is rendered I see this warning in my console:

@reach/dialog styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:

    import "@reach/dialog/styles.css";

  Otherwise you'll need to include them some other way:

    <link rel="stylesheet" type="text/css" href="node_modules/@reach/dialog/styles.css" />

  For more information visit https://ui.reach.tech/styling.

[TheSisb]

This warning shows up because the @reach/dialog package we wrap in our primitive does a check to make sure folks are using the styles (https://github.com/reach/reach-ui/blob/develop/packages/utils/src/index.tsx#L83). I'm not sure why they thought this was wise, but I'm seeing this warning locally too.

Please freely ignore the warning for now, I will add a ticket to our backlog to apply a root style to disable this warning in the next release.

If you're seeing the warning in your tests and it's a big bother, you can mock out the checkStyles function like this:

jest.mock('@reach/utils', () => ({
  ...jest.requireActual('@reach/utils'),
  checkStyles: jest.fn(),
}));

source

[ghelton]

Thanks!

[TheSisb]

Fixed in #821. If you update your theme package you should no longer see the warning in console.