Skip to content

Removing ::before ::after padding hack on markdown #360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 8, 2017
Merged

Removing ::before ::after padding hack on markdown #360

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fa1ab24
Removing before after padding hack
jonrohan Oct 5, 2017
6626240
adding markdown story to storybook
jonrohan Oct 5, 2017
7c6f49c
Merge branch 'release-10.0.0' into code_padding
jonrohan Nov 8, 2017
cce0269
Using variables
jonrohan Nov 8, 2017
607ce88
Merge branch 'release-10.0.0' into code_padding
jonrohan Nov 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
<link rel="stylesheet" href="https://unpkg.com/primer-css@9.2.0/build/build.css">
Copy link
Contributor

@broccolini broccolini Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

<script src="https://github.com/site/assets/styleguide.js" async></script>
17 changes: 2 additions & 15 deletions modules/primer-markdown/lib/code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,11 @@
// Inline code snippets
code,
tt {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding: 0.2em 0.4em;
Copy link
Contributor

@broccolini broccolini Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One day in the future we should bring this into our proposed em-based scale and stick to common fractions.

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;
Copy link
Contributor

@broccolini broccolini Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the $border-radius variable 😝


br { display: none; }
}
Expand Down Expand Up @@ -67,10 +59,5 @@
word-wrap: normal;
background-color: transparent;
border: 0;

&::before,
&::after {
content: normal;
}
}
}
18 changes: 18 additions & 0 deletions modules/primer-markdown/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react'
Copy link
Contributor

@broccolini broccolini Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Yay for adding more stories! It would be great to add the rest of the markdown styles when you get a chance.

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>
))