From fa1ab245afab9fcdd860582b0453ecd2b31e8066 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 5 Oct 2017 13:48:50 -0700 Subject: [PATCH 1/3] Removing before after padding hack --- modules/primer-markdown/lib/code.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss index f703f9236d..437d0eab49 100644 --- a/modules/primer-markdown/lib/code.scss +++ b/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; 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: 3px; br { display: none; } } From 6626240e7ffc0d371943853c0c32c7c86ddbd2e3 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 5 Oct 2017 15:18:11 -0700 Subject: [PATCH 2/3] adding markdown story to storybook --- .storybook/preview-head.html | 1 - modules/primer-markdown/lib/code.scss | 7 +------ modules/primer-markdown/stories.js | 18 ++++++++++++++++++ 3 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 modules/primer-markdown/stories.js diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 03d0c82b2d..8283d59a14 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,2 +1 @@ - diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss index 437d0eab49..e9b2403331 100644 --- a/modules/primer-markdown/lib/code.scss +++ b/modules/primer-markdown/lib/code.scss @@ -3,7 +3,7 @@ // Inline code snippets code, tt { - padding: 0.2em; + padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba($black, 0.05); @@ -59,10 +59,5 @@ word-wrap: normal; background-color: transparent; border: 0; - - &::before, - &::after { - content: normal; - } } } diff --git a/modules/primer-markdown/stories.js b/modules/primer-markdown/stories.js new file mode 100644 index 0000000000..926c4a26ab --- /dev/null +++ b/modules/primer-markdown/stories.js @@ -0,0 +1,18 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Markdown', module) + .add('code', () => ( +
+

+ This is inline code block. This code block has a <br>
in it. When a code block has a long sentence in it, it should wrap the page to a new line. Some people like to see the world burn and put reallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstrings in the code blocks. +

+
+ )) + .add('pre', () => ( +
+ 
+        Really long pre blocks should scroll horizontally when the words are longer than the parent container
+
+
+ )) From cce0269026a4e1a48f83ea4a1d8ce11ef6ff2397 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 8 Nov 2017 14:57:44 -0800 Subject: [PATCH 3/3] Using variables --- modules/primer-markdown/lib/code.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss index e9b2403331..3cdd3f9bc4 100644 --- a/modules/primer-markdown/lib/code.scss +++ b/modules/primer-markdown/lib/code.scss @@ -7,7 +7,7 @@ margin: 0; font-size: 85%; background-color: rgba($black, 0.05); - border-radius: 3px; + border-radius: $border-radius; br { display: none; } } @@ -45,7 +45,7 @@ font-size: 85%; line-height: 1.45; background-color: $gray-100; - border-radius: 3px; + border-radius: $border-radius; } pre code,