Reset dialog element styles

[eranhirsch]

The HTML dialog element has a lot of default styling coming from the user agent (chromium, mozilla, looks like safari don't style dialogs at all).

I noticed this when trying to debug why I was getting a 16px padding regardless of what my styling was. Except padding it looks like there are also styles for colors and a border. This feels like a bug as I'm used to tailwind's preflight providing a pretty good "blank slate" of expected styling. Some of the other styles (like the positioning) seem reasonable as they are pretty close to what I came up defining by myself for the dialog.

[ben-rogerson]

One more nit here - with a double space before transparent

[eranhirsch]

How should we handle the remaining properties on dialog? Should we also reset:

• position
• display (mozilla)
• left, right (chromium), inset-inline-start, inset-inline-end (mozilla)
• width, height

[adamwathan]

Thanks for the PR! Personally I think this reset can be simplified to just this:

dialog {
  padding: 0;
}

• We shouldn't reset border as Preflight already handles that so the border on dialogs is already removed in Tailwind, and resetting it this way means adding the border utility to dialogs won't work.
• The user agent margin styles are just for centering the dialog on the screen, and aren't absolute values like 10px that might cause you to accidentally deviate from your spacing scale. So I'm fine with just leaving this set to auto rather than be overly aggressive with resetting it.
• Since dialogs are intended to sort of render "on top" of other stuff I don't think it's totally surprising that they don't inherit color (probably why the user agent explicitly sets it), so I think it's okay that we leave it alone too. You might render the same dialog component from within different parent elements and expect the dialog to always have the same colors in both situations, so I think people will already be explicit about what text color they want their dialogs to use.
• Similar story for background-color — I think since all browsers reliably define this as the same value (the canvas system color) I'd rather just leave this alone. People are going to override it to the color they need, and I can't think of how changing it to transparent actually does anyone any favors.

Happy to merge this if it can be rebased on top of the current conflicts and simplified to just the padding reset 👍

[RobinMalfait]

I rebased this PR on master so you don't have to worry about that 👍

[thecrypticace]

Thanks! I've updated it to just the padding reset and merged this in. It'll be available in our next tagged release. Appreciate it! ✨

[lorenzolewis]

I just ran into an issue with inset-inline-start: 0px; and inset-inline-end: 0px; being the defaults in Safari and causing some issues (such as relative positioning with right: 0;). This might be one to consider adding into the reset.

More than happy to file an issue for this one if needed.