Material-ui: Snackbar is using a <p> after upgrading to 3.2

[mcdougal]

I upgraded to 3.2 and set useNextVariants: true and the Snackbar component started using a <p> element for its container, which throws a warning in the browser if you have a <div> as a child.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Snackbar should use a <div> as its container element.

Current Behavior

Snackbar is using a <p> as its container element.

Steps to Reproduce

Open the live example (https://codesandbox.io/s/82wp5l1jkl) and check the console logs. You'll see

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (created by App)
    in div (created by SnackbarContent)
    in p (created by Typography)
    in Typography (created by WithStyles(Typography))
    in WithStyles(Typography) (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by SnackbarContent)
    in SnackbarContent (created by WithStyles(SnackbarContent))
    in WithStyles(SnackbarContent) (created by Snackbar)
    in Transition (created by Slide)
    in EventListener (created by Slide)
    in Slide (created by WithTheme(Slide))
    in WithTheme(Slide) (created by Snackbar)
    in div (created by Snackbar)
    in ClickAwayListener (created by Snackbar)
    in Snackbar (created by WithStyles(Snackbar))
    in WithStyles(Snackbar) (created by App)
    in MuiThemeProvider (created by App)
    in App

Here is the same example working with v3.1.2: https://codesandbox.io/s/32p389xr15

I'm guessing it has something to do with this line: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/SnackbarContent/SnackbarContent.js#L55. I'm not passing in a variant for the Typography component, so I don't think the headlineMapping is getting applied.

I was able to work around this bug by doing:

<Snackbar
  ContentProps={{
    variant: `body1`,
  }}
/>

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.2.0 |
| React | 16.5.2 |
| Browser | Chrome |

[eps1lon]

That was caused by #13129. Seems like @oliviertassinari forgot to warn about the change in the release notes.

[oliviertassinari]

@mcdougal Thank you for the report. I have forgotten to add body2 in:
https://github.com/mui-org/material-ui/blob/c01df420db491965ac035af55c2f956e4f0fb885/packages/material-ui/src/SnackbarContent/SnackbarContent.js#L54-L56
Also, something is wrong with our CI. We should have spotted the issue before the release.

[eps1lon]

@oliviertassinari tests are run with typography v1. The issue is exclusive to typography v2.

[eps1lon]

While a fix in HEAD is good I failed to add a temporary workaround for everyone affected:

https://codesandbox.io/s/248j265l5r:

-<Snackbar message={<div>Testing</div>} open />
+<Snackbar ContentProps={{
+      headlineMapping: {
+        body1: "div",
+        body2: "div"
+      }
+    }} message={<div>Testing</div>} open />

Basically add to ContentProps the headlineMapping conforming to the above shape.

[elmeerr]

@eps1lon still give errors with this example https://material-ui.com/demos/snackbars/#customized-snackbars

example: https://codesandbox.io/s/zxnpvm1k7m

[oliviertassinari]

~It's not released, yet.~

[eps1lon]

@elmeerr If you pass SnackbarContent as a child you have to set the props yourself: ~https://codesandbox.io/s/my0znyjk78 (demo.js#75-78)~ https://codesandbox.io/s/zz6wnqklzm (demo.js#71-74)

[elmeerr]

@oliviertassinari I was talking about the workaround 😄

@eps1lon Thanks, I've tried to use ContentProps on SnackBarContent instead of using headlineMapping.

[brauliodiez]

@eps1lon got a 404 on the codesandbox you provided: https://codesandbox.io/s/248j265l5r is it a valid link? thanks

[eps1lon]

@brauliodiez Sorry I need to manage by sandboxes better. I had to delete everything recently because I reached the free usage limit.

Updated link: https://codesandbox.io/s/zz6wnqklzm (demo.js#71-74)

[HawiCaesar]

@elmeerr Could you share a code sandbox of what you did ? headlineMapping does not seem to be working for me

[oliviertassinari]

@HawiCaesar You can upgrade to v3.2.2 now.

[HawiCaesar]

I have upgraded to v3.2.2. Here is how mine looks @oliviertassinari

<SnackbarContent
  className={classes.snackbar}
>
  <Snackbar
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'left',
    }}
    open={true}
    ContentProps={{
      'aria-describedby': 'message-id',
      body1: "div",
      body2: "div"
    }}
    message={<span id="message-id">I love snacks</span>}
  />
</Snackbar>

This is the error on the terminal

Types of property 'ContentProps' are incompatible.
  Type '{ 'aria-describedby': string; body1: string; body2: string; }' is not assignable to type 'Partial<SnackbarContentProps> | undefined'.
    Object literal may only specify known properties, and 'body1' does not exist in type 'Partial<SnackbarContentProps> | undefined'.

[eps1lon]

@HawiCaesar The error is correct. If you want to provide a headline mapping you have to assign it a headlineMapping property in ContentProps.

[HawiCaesar]

Sorry If I seem a bit lost or ignorant @eps1lon, I am still new to material ui.

Okay here is an updated version

<Snackbar
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  open={true}
  ContentProps={{
    'aria-describedby': 'message-id',
  }}
>
  <SnackbarContent
    className={classes.snackbar}
    message={
      'I love candy. I love cookies. I love cupcakes. \
                I love cheesecake. I love chocolate.'
    }

  />
</Snackbar>

This works but I get the error as the title of the issue suggests?
What is the body1 in this case ? If I do add it I get 'ContentProps' are incompatible error.

[elmeerr]

@HawiCaesar the sandbox from @eps1lon => https://codesandbox.io/s/zz6wnqklzm does not work for you?

[HawiCaesar]

@elmeerr no it does not.

[eps1lon]

@HawiCaesar Looks like you're still on <3.2.2 since the codesandbox works and uses the latest release. Verify that you have 3.2.2 in your package.json, remove node_modules and reinstall.

[HawiCaesar]

@eps1lon @elmeerr I got it working using this codesandbox. I had to play about with it and add some form of abstraction. But it works now with no error. Thanks!