Drawer example warnings

[luiskhernandez]

When testing the drawer example, after copy and paste from the docs in a new create-react-app app

https://codesandbox.io/s/morning-fire-yjoi9

I see this kind of unrelated warnings.

    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.
   
    in Component (created by Anonymous)
    in Anonymous (created by Context.Consumer)
    in Context.Consumer (created by Context.Consumer)
    in Context.Consumer (created by Styled(Component))
    in Styled(Component) (created by Anonymous)
    in Anonymous (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by Anonymous)
    in Anonymous (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in App (at src/​index.js:7)
r @ backend.js:1
checkStyles @ index.js:12
checkDialogStyles @ index.js:72
componentDidMount @ index.js:93
commitLifeCycles @ react-dom.development.js:21142
commitLayoutEffects @ react-dom.development.js:24138
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
commitRootImpl @ react-dom.development.js:23903
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
commitRoot @ react-dom.development.js:23723
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `zIndex` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `zindex` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Component)
    in div (created by RemoveScroll)
    in RemoveScroll (created by Component)
    in div (created by FocusLock)
    in FocusLock (created by Component)
    in Component (created by ForwardRef)
    in Component (created by Portal)
    in Portal (created by ForwardRef)
    in Component (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by ForwardRef)
    in ForwardRef (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in header (at App.js:104)
    in div (at App.js:103)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (at App.js:102)
    in App (at src/index.js:7)
console.<computed> @ index.js:1375
r @ backend.js:1
warningWithoutStack @ react-dom.development.js:563
warning @ react-dom.development.js:2965
validateProperty$1 @ react-dom.development.js:8849
warnUnknownProperties @ react-dom.development.js:8892
validateProperties$2 @ react-dom.development.js:8915
validatePropertiesInDevelopment @ react-dom.development.js:8960
setInitialProperties @ react-dom.development.js:9236
finalizeInitialChildren @ react-dom.development.js:10437
completeWork @ react-dom.development.js:20078
completeUnitOfWork @ react-dom.development.js:23540
performUnitOfWork @ react-dom.development.js:23513
workLoopSync @ react-dom.development.js:23480
renderRoot @ react-dom.development.js:23155
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `overflowY` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `overflowy` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Component)
    in div (created by RemoveScroll)
    in RemoveScroll (created by Component)
    in div (created by FocusLock)
    in FocusLock (created by Component)
    in Component (created by ForwardRef)
    in Component (created by Portal)
    in Portal (created by ForwardRef)
    in Component (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by ForwardRef)
    in ForwardRef (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in header (at App.js:104)
    in div (at App.js:103)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (at App.js:102)
    in App (at src/index.js:7)````

[segunadebayo]

Hi @luiskhernandez ,

I'm working to get rid of these warnings. I didn't include "@reach/dialog" css file in the library but I'll find a way around it and publish a patch that fixes it.

Thanks for spotting this.

[lee-reinhardt]

Issue discussing the problem and workarounds:
reach/reach-ui#58

PR to update docs with the easiest workaround:
reach/reach-ui#245

(looks like this hasn't made it to the actual docs site yet)

[alexluong]

+1 to this. This also happens for Dialog (confirmed) and Modal (I assume) too.

[majorhayes]

I can confirm that these warnings also show up for Modal.

[segunadebayo]

I've released a new version of Chakra that resolves this. Kindly upgrade