fix(Code): align code blocks in lists; closes #398

[boneskull]

This "works" but may not be "correct", as I'm unclear about the intention of the margins with this thing. Responsiveness seems OK.

closes #398

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://gatsby-theme-carbon-git-fork-boneskull-code-in-list.carbon-design-system.now.sh

[alisonjoseph]

Going to defer to design on this question, as I believe the intent is for the code blocks to bleed into the gutter on the left edge. However, not sure about when in a list. @jeanservaas

https://gatsby-theme-carbon-git-fork-boneskull-code-in-list.carbon-design-system.now.sh/components/code-blocks

[boneskull]

I’m not a designer, but I’d expect the left-alignment to be consistent within a list (like gfm rendering).

[alisonjoseph]

@jeanservaas any feedback on this? (how code blocks should align when within a list)

[vpicone]

@carbon-design-system/design would like some input on how code should be rendered in lists.

[jeanservaas]

Normally I would say don't nest code snippets inside of a list -- use a header instead so that you don't have to deal with indentation or use inline code snippets.

However, if this is a very common pattern in docs and absolutely must be indented, design doesn't have time to look at this, I'd say dealing with it like this will be OK.

[alisonjoseph]

Design is ok w/ left alignment. I'd suggest we update so that it right aligns at 8 columns?

[boneskull]

@alisonjoseph Sorry, I don't understand; are you asking me for a fix? I will need some hand-holding if I'm to change the right margin. I originally tried to change this myself, and couldn't figure it out.

[alisonjoseph]

I'll try and take a look tomorrow and see what we need to do to fix the margins here. 👍

[boneskull]

@alisonjoseph hmm, not quite...

[alisonjoseph]

I think that’s a bug with the code snippet being slightly off grid. I can open a separate PR to fix that.

[boneskull]

I’ll take your word for it! LGTM then, fwiw.

[designertyler]

LGTM 🎉

[boneskull]

@alisonjoseph thanks!