Skip to content
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

Add constant spacing #432

Merged
merged 5 commits into from
May 7, 2017
Merged

Add constant spacing #432

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4134543
Add constant spacing
May 6, 2017
90af30a
requested changes
May 7, 2017
7ab7577
rename spacing
May 7, 2017
46e8cf5
rename spacing
May 7, 2017
a9a8c24
fix fonts
May 7, 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
12 changes: 6 additions & 6 deletions src/rsg-components/ComponentsList/ComponentsListRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,30 @@ import cx from 'classnames';
import Link from 'rsg-components/Link';
import Styled from 'rsg-components/Styled';

const styles = ({ base, font, small }) => ({
const styles = ({ base, font, small, spacing }) => ({
list: {
margin: 0,
paddingLeft: 15,
paddingLeft: spacing.space16,
},
item: {
color: base,
display: 'block',
margin: [[7, 0, 7, 0]],
margin: [[spacing.space8, 0, spacing.space8, 0]],
fontFamily: font,
fontSize: 15,
fontSize: spacing.space16,
Copy link
Member

Choose a reason for hiding this comment

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

We shouldn’t use spacers for font sizes. But would be nice to have variables for that too.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Typo again, but I can add some :)

listStyle: 'none',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
isChild: {
[small]: {
display: 'inline-block',
margin: [[0, 7, 0, 0]],
margin: [[0, spacing.space8, 0, 0]],
},
},
heading: {
color: base,
marginTop: 7,
marginTop: spacing.space8,
fontFamily: font,
fontWeight: 'bold',
},
Expand Down
6 changes: 3 additions & 3 deletions src/rsg-components/Editor/EditorLoaderRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';

const styles = ({ font, monospace, light, codeBackground }) => ({
const styles = ({ font, monospace, light, codeBackground, spacing }) => ({
root: {
padding: [[7, 16, 10, 7]],
padding: [[spacing.space8, spacing.space16, spacing.space8, spacing.space8]],
fontFamily: font,
fontSize: 12,
color: light,
Expand All @@ -15,7 +15,7 @@ const styles = ({ font, monospace, light, codeBackground }) => ({
'.CodeMirror.CodeMirror': {
fontFamily: monospace,
height: 'auto',
padding: [[5, 12]],
padding: [[spacing.space4, spacing.space16]],
fontSize: 12,
},
'.CodeMirror-scroll.CodeMirror-scroll': {
Expand Down
11 changes: 6 additions & 5 deletions src/rsg-components/Heading/HeadingRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@ import PropTypes from 'prop-types';
import cx from 'classnames';
import Styled from 'rsg-components/Styled';

export const styles = ({ base, link, linkHover }) => ({
export const styles = ({ base, link, linkHover, spacing }) => ({
heading: {
color: base,
position: 'relative',
overflow: 'visible',
marginLeft: -30,
paddingLeft: 30,
marginLeft: -32,
paddingLeft: spacing.space32,
Copy link
Member

Choose a reason for hiding this comment

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

I think they both should you the same variable.

'&:hover > $anchor': {
isolate: false,
visibility: 'visible',
},
},
anchor: {
position: 'absolute',
bottom: '.125em',
left: 10,
top: '50%',
transform: 'translateY(-50%)',
left: spacing.space8,
display: 'block',
color: link,
fontSize: '0.65em',
Expand Down
14 changes: 7 additions & 7 deletions src/rsg-components/Markdown/Markdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const getInlineOverrides = memoize(classes => {
};
}, () => 'getInlineOverrides');

const styles = ({ base, font, monospace, link, linkHover, border, codeBackground }) => ({
const styles = ({ base, font, monospace, link, linkHover, border, codeBackground, spacing }) => ({
base: {
color: base,
fontFamily: font,
Expand All @@ -75,7 +75,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
color: base,
fontFamily: font,
fontSize: 'inherit',
margin: [[0, 0, 15, 0]],
margin: [[0, 0, spacing.spacing16, 0]],
lineHeight: 1.5,
},
a: linkStyles({ link, linkHover }).link,
Expand Down Expand Up @@ -115,12 +115,12 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
},
ul: {
composes: '$para',
paddingLeft: 20,
paddingLeft: spacing.space24,
},
ol: {
composes: '$para',
listStyleType: 'decimal',
paddingLeft: 20,
paddingLeft: spacing.space24,
},
li: {
composes: '$base',
Expand All @@ -135,7 +135,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
blockquote: {
composes: '$para',
fontSize: 14,
margin: [[15, 30]],
margin: [[spacing.space16, spacing.space32]],
padding: 0,
},
hr: {
Expand Down Expand Up @@ -163,7 +163,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
composes: '$para',
backgroundColor: codeBackground,
border: [[1, border, 'solid']],
padding: [[12, 15]],
padding: [[spacing.space8, spacing.space16]],
fontSize: 12,
borderRadius: 3,
whiteSpace: 'pre',
Expand All @@ -179,7 +179,7 @@ const styles = ({ base, font, monospace, link, linkHover, border, codeBackground
},
td: {
fontFamily: font,
padding: [[6, 15, 6, 0]],
padding: [[spacing.space4, spacing.space16, spacing.space4, 0]],
fontSize: 14,
},
th: {
Expand Down
4 changes: 2 additions & 2 deletions src/rsg-components/Message/MessageRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import Markdown from 'rsg-components/Markdown';
import Styled from 'rsg-components/Styled';

const styles = () => ({
const styles = (spacing) => ({
root: {
marginBottom: 30,
marginBottom: spacing.space32,
},
});

Expand Down
10 changes: 5 additions & 5 deletions src/rsg-components/Methods/Methods.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@
.tableBody {
Copy link
Member

Choose a reason for hiding this comment

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

We don’t use this file, could you please remove it? Merge artifact ;-/

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sure!

}
.cell {
padding-right: 15px;
padding-top: 6px;
padding-right: 16px;
padding-top: 8px;
vertical-align: top;
font-size: 13px;
}
.cellHeading {
padding-right: 15px;
padding-bottom: 6px;
padding-right: 16px;
padding-bottom: 8px;
text-align: left;
font-size: 13px;
}
.cellDesc {
padding-left: 15px;
padding-left: 16px;
}

.methodParam {
Expand Down
12 changes: 6 additions & 6 deletions src/rsg-components/Methods/MethodsRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Styled from 'rsg-components/Styled';
import Group from 'react-group';
import cx from 'classnames';

const styles = ({ base, font, border, light, name, type }) => ({
const styles = ({ base, font, border, light, name, type, spacing }) => ({
table: {
width: '100%',
borderCollapse: 'collapse',
Expand All @@ -20,24 +20,24 @@ const styles = ({ base, font, border, light, name, type }) => ({
},
cell: {
color: base,
paddingRight: 15,
paddingTop: 6,
paddingRight: spacing.space16,
paddingTop: spacing.space8,
verticalAlign: 'top',
fontFamily: font,
fontSize: 13,
},
cellHeading: {
color: base,
paddingRight: 15,
paddingBottom: 6,
paddingRight: spacing.space16,
paddingTop: spacing.space8,
Copy link
Member

Choose a reason for hiding this comment

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

Looks like a typo, it should be bottom padding.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sorry , typo

textAlign: 'left',
fontFamily: font,
fontWeight: 'bold',
fontSize: 13,
},
cellDesc: {
width: '70%',
paddingLeft: 15,
paddingLeft: spacing.space16,
},
required: {
fontFamily: font,
Expand Down
13 changes: 7 additions & 6 deletions src/rsg-components/Playground/PlaygroundRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,28 @@ import Link from 'rsg-components/Link';
import Preview from 'rsg-components/Preview';
import Styled from 'rsg-components/Styled';

const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackground }) => ({
const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackground, spacing }) => ({
root: {
color: base,
position: 'relative',
marginBottom: 30,
marginBottom: spacing.space32,
border: [[1, border, 'solid']],
borderRadius: '3px 3px 0 3px',
marginTop: spacing.space4,
'&:hover $isolatedLink': {
isolate: false,
opacity: 1,
},
},
preview: {
marginBottom: 3,
padding: 15,
marginBottom: spacing.space4,
padding: spacing.space16,
},
codeToggle: {
position: 'absolute',
right: -1,
margin: 0,
padding: [[6, 8]],
padding: [[spacing.space4, spacing.space8]],
fontFamily: font,
fontSize: 14,
lineHeight: 1,
Expand All @@ -52,7 +53,7 @@ const styles = ({ base, font, link, linkHover, border, baseBackground, codeBackg
position: 'absolute',
top: 0,
right: 0,
padding: [[6, 8]],
padding: [[spacing.space4, spacing.space8]],
fontFamily: font,
fontSize: 14,
opacity: 0,
Expand Down
6 changes: 3 additions & 3 deletions src/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';

const styles = ({ monospace, white, errorBackground }) => ({
const styles = ({ monospace, white, errorBackground, spacing }) => ({
root: {
margin: [[-15, -15, -18]],
margin: [[-16, -16, -16]],
Copy link
Member

Choose a reason for hiding this comment

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

space16? But actually this numbers are not random — the red background should fill the playground container.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I will change them back and add that as a comment

fontFamily: monospace,
color: white,
backgroundColor: errorBackground,
padding: 15,
padding: spacing.space16,
lineHeight: 1.2,
fontSize: 13,
whiteSpace: 'pre',
Expand Down
12 changes: 6 additions & 6 deletions src/rsg-components/Props/PropsRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Styled from 'rsg-components/Styled';
import Group from 'react-group';
import { unquote, getType, showSpaces } from './util';

const styles = ({ base, font, border, light, lightest, name, type }) => ({
const styles = ({ base, font, border, light, lightest, name, type, spacing }) => ({
table: {
width: '100%',
borderCollapse: 'collapse',
Expand All @@ -20,16 +20,16 @@ const styles = ({ base, font, border, light, lightest, name, type }) => ({
},
cell: {
color: base,
paddingRight: 15,
paddingTop: 6,
paddingRight: spacing.space16,
paddingTop: spacing.space4,
verticalAlign: 'top',
fontFamily: font,
fontSize: 13,
},
cellHeading: {
color: base,
paddingRight: 15,
paddingBottom: 6,
paddingRight: spacing.space16,
paddingBottom: spacing.space4,
textAlign: 'left',
fontFamily: font,
fontWeight: 'bold',
Expand All @@ -38,7 +38,7 @@ const styles = ({ base, font, border, light, lightest, name, type }) => ({
cellDesc: {
color: base,
width: '99%',
paddingLeft: 15,
paddingLeft: spacing.space16,
},
required: {
fontFamily: font,
Expand Down
14 changes: 7 additions & 7 deletions src/rsg-components/ReactComponent/ReactComponentRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import Link from 'rsg-components/Link';
import Heading from 'rsg-components/Heading';
import Styled from 'rsg-components/Styled';

const styles = ({ base, font, monospace, light }) => ({
const styles = ({ base, font, monospace, light, spacing }) => ({
root: {
marginBottom: 50,
marginBottom: spacing.space48,
fontSize: 16,
'&:hover $isolatedLink': {
isolate: false,
Expand All @@ -15,7 +15,7 @@ const styles = ({ base, font, monospace, light }) => ({
},
header: {
position: 'relative',
marginBottom: 20,
marginBottom: spacing.space24,
},
isolatedLink: {
position: 'absolute',
Expand All @@ -30,14 +30,14 @@ const styles = ({ base, font, monospace, light }) => ({
color: base,
position: 'relative',
marginTop: 0,
marginBottom: 7,
marginBottom: spacing.space8,
fontFamily: font,
fontSize: 36,
fontWeight: 'normal',
},
heading: {
color: base,
margin: [[0, 0, 7]],
margin: [[0, 0, spacing.space8]],
fontFamily: font,
fontSize: 20,
fontWeight: 'normal',
Expand All @@ -49,11 +49,11 @@ const styles = ({ base, font, monospace, light }) => ({
},
description: {
color: base,
marginBottom: 20,
marginBottom: spacing.space24,
fontSize: 16,
},
subsection: {
marginBottom: 30,
marginBottom: spacing.space32,
},
});

Expand Down
4 changes: 2 additions & 2 deletions src/rsg-components/Section/SectionRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';
import Heading from 'rsg-components/Heading';

const styles = ({ font }) => ({
const styles = ({ font, spacing }) => ({
root: {
marginBottom: 50,
},
heading: {
margin: [[0, 0, 20]],
margin: [[0, 0, spacing.space24]],
fontFamily: font,
fontSize: 38,
fontWeight: 'bold',
Expand Down
Loading