[Dialog] Flatten DialogTitle DOM structure

Summary 💡

DialogTitle should be flatter

Examples 🌈

• https://codesandbox.io/s/old-pond-bpjb9

Motivation 🔦

• Aligning items of the title

  <DialogTitle style={ display: 'flex', alignItems: 'center' }>
    <SomeIcon />
    My Title
  </DialogTitle>
  

• fewer DOM elements -> fewer brittle element selectors

It is possible but requires targetting nested elements. disableTypography is not helpful since then we wouldn’t render a heading element.

We could leverage aria but this would go against rule 1 of aria (don’t use aria): <DialogTitle disableTypography role="heading" aria-level="2" className={variantH2Styles} />

[oliviertassinari]

We recently had a tweet on this matter: https://twitter.com/optimistavf/status/1300343255968747521. If we don’t move in the direction proposed in the issue’s description, I think that we should apply the List’s tradeoff:

https://github.com/mui-org/material-ui/blob/02b722a249d1afe001e01827f6197c4b223ea0ce/packages/material-ui/src/ListItemText/ListItemText.js#L49

• auto enable disableTypography: avoid useless nested DOM structure
• have a TypographyProps to spread: allow configuration at the global theme level.

[vicasas]

With option 3, if you want to do something custom, should you stop using DialogTitle? If not used, the root element styles would be lost and it would be left to the developer to add minimal styles (example padding)