Merge pull request #360 from primer/code_padding

Removing ::before ::after padding hack on markdown

modules/primer-markdown/lib/code.scss

@@ -3,19 +3,11 @@
   // Inline code snippets
   code,
   tt {
-    padding: 0;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
+    padding: 0.2em 0.4em;
     margin: 0;
     font-size: 85%;
     background-color: rgba($black, 0.05);
-    border-radius: 3px; // don't add padding, gives scrollbars
-
-    &::before,
-    &::after {
-      letter-spacing: -0.2em; // this creates padding
-      content: "\00a0";
-    }
+    border-radius: $border-radius;
 
     br { display: none; }
   }
@@ -53,7 +45,7 @@
     font-size: 85%;
     line-height: 1.45;
     background-color: $gray-100;
-    border-radius: 3px;
+    border-radius: $border-radius;
   }
 
   pre code,
@@ -67,10 +59,5 @@
     word-wrap: normal;
     background-color: transparent;
     border: 0;
-
-    &::before,
-    &::after {
-      content: normal;
-    }
   }
 }

modules/primer-markdown/stories.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Markdown', module)
+  .add('code', () => (
+    <div className="markdown-body">
+      <p>
+        This is inline <code>code block</code>. This <code>code block has a &lt;br&gt;<br/> in it</code>. <code>When a code block has a long sentence in it, it should wrap the page to a new line</code>. Some people like to see the world burn and put <code>reallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstrings</code> in the code blocks.
+      </p>
+    </div>
+  ))
+  .add('pre', () => (
+    <div className="markdown-body">
+      <pre>
+        <code>Really long pre blocks should scroll horizontally when the words are longer than the parent container</code>
+      </pre>
+    </div>
+  ))