Fix cut off examples

[simurai]

This is a follow up to #717. It fixes examples that get cut off due to:

• Using negative margin
• Having elements that are absolutely positioned (like tooltips) and therefore "no height".

Before	After

The fixes are mostly:

• Adding some extra padding
• Adding a "wrapper" element
• Using .position-relative

They all are kinda 😩 hacks, but at least it looks less broken. ☺️

✨ Preview: https://primer-css-fix-cut-off-examples.now.sh/css

/cc @primer/ds-core

[shawnbot]

I'm really glad that we're fixing these examples, but I think that there might be another way we can handle it. MDX actually does this really cool thing where it parses everything after the language identifier in fenced code blocks as props and passes those down to the component that's delegated to render code elements. So this:

```html className="pt-4"

...passes {className: "pt-4"} as props to the code component. In our case, that's the CodeExample component (soon to be imported from Blueprints), which renders the example markup in an <iframe>. It would be trivial to wrap the iframe contents in an additional div and pass those "rest" props to it, which prevents the classnames for the wrapper from being displayed in the example and accidentally propagated by copy-paste.

@simurai you might be able to test this theory by moving the {...rest} bit from <BorderBox> to a <div {...rest}> that wraps the <LivePreview> in these lines. Want to give that a shot and see if you can apply the class hacks that way?

[simurai]

Want to give that a shot and see if you can apply the class hacks that way?

Ohh.. 💯 yes, that would be the much better solution to keep things more "copy & paste friendly".

[simurai]

Ok, I made this change 051ef7f and it kinda works:

• html className="pt-4" <- does not work
• html class=pt-4 <- works

But I couldn't figure out how to add multiple classes.. html class=pt-4 bg-blue <- does not work

Maybe it's ok with just one class? I also moved the default padding inside the <iframe> which should already help in a few cases.

[shawnbot]

@simurai lemme look at how that's parsed in mdx... there might be a trick to it. 👀

[shawnbot]

Okay, so it looks from the source like the "metastring" (the part after the language identifier in a fenced code block) is parsed, but that it doesn't support quoted values.

I used a module called parse-pairs in code-blocks, and it supported quoting both the key and value. So maybe either we file a PR for MDX to use that (or something similar)?

[simurai]

So maybe either we file a PR for MDX to use that (or something similar)?

Yeah, might be worth a try. 👍 Should we merge this PR already? Making a PR for MDX might still take a while.

btw. I reverted 051ef7f because it removed the margin that wrapped the whole example. I think it comes from here:

css/docs/CodeExample.js

Line 71 in 645a61d

my: 4

[shawnbot]

Yeah, let's merge this for now. I think we can also do this in our mdx loader with a remark transform, but I do think it'd be nice for mdx to support it out of the box. What would be really cool is if it supported just injecting the whole rest of the string as props in JSX, so that this worked:

```html p={4}

[simurai]

Yeah, let's merge this for now.

Ok, I can add it to 12.2.1 once you approve 🙇. Also made a separate issue #735 as a reminder.

[shawnbot]

Ack sorry, I meant to approve this earlier! 🚀