Refactor: Tweak examples UI

Author: sapegin

src/rsg-components/Playground/PlaygroundRenderer.js

@@ -5,19 +5,18 @@ import Styled from 'rsg-components/Styled';
 const styles = ({ space, color, borderRadius }) => ({
 	root: {
 		marginBottom: space[4],
-		border: [[1, color.border, 'solid']],
-		borderRadius,
 	},
 	preview: {
 		padding: space[2],
+		border: [[1, color.border, 'solid']],
+		borderRadius,
 	},
 	controls: {
 		display: 'flex',
 		alignItems: 'center',
 	},
 	toolbar: {
 		marginLeft: 'auto',
-		marginRight: space[2],
 	},
 });
 

src/rsg-components/ReactComponent/ReactComponentRenderer.js

@@ -12,9 +12,6 @@ const styles = ({ color, fontSize, fontFamily, space }) => ({
 	tabs: {
 		marginBottom: space[3],
 	},
-	tab: {
-		marginLeft: -space[2],
-	},
 	pathLine: {
 		fontFamily: fontFamily.monospace,
 		color: color.light,
@@ -50,7 +47,7 @@ export function ReactComponentRenderer({
 				</div>}
 			{tabButtons &&
 				<div className={classes.tabs}>
-					<div className={classes.tab}>{tabButtons}</div>
+					{tabButtons}
 					{tabBody}
 				</div>}
 			{examples}

src/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap

@@ -300,9 +300,7 @@ exports[`ReactComponentRenderer should render usage section 1`] = `
   </header>
   <div>
     <div>
-      <div>
-        tab buttons
-      </div>
+      tab buttons
     </div>
     <div>
       tab body

src/rsg-components/TabButton/TabButtonRenderer.js

@@ -5,7 +5,7 @@ import cx from 'classnames';
 
 export const styles = ({ space, color, fontFamily, fontSize }) => ({
 	button: {
-		padding: [[space[1], space[2]]],
+		padding: [[space[1], 0]],
 		fontFamily: fontFamily.base,
 		fontSize: fontSize.base,
 		color: color.light,
@@ -24,6 +24,10 @@ export const styles = ({ space, color, fontFamily, fontSize }) => ({
 			outline: [[1, 'solid', color.linkHover]],
 			outlineOffset: space[0],
 		},
+		'& + &': {
+			isolate: false,
+			marginLeft: space[1],
+		},
 	},
 	isActive: {
 		borderBottom: [[2, color.linkHover, 'solid']],