Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(ui-toolkit): add margin to playground tab headers

This commit is contained in:
Fábio Moreira 2018-05-14 14:24:55 +01:00 committed by Sérgio Ramos
parent 882085a170
commit f388e52549
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/ui-toolkit/src/styleguide/playground.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import is from 'styled-is'; import is from 'styled-is';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { Margin } from 'styled-components-spacing';
const Wrapper = styled.section``; const Wrapper = styled.section``;
@ -124,14 +125,16 @@ class Playground extends Component {
return ( return (
<Wrapper> <Wrapper>
<Tabs> <Tabs>
<TabHeader active={tab === 'component'}> <Margin right={5}>
<Button <TabHeader active={tab === 'component'}>
active={tab === 'component'} <Button
onClick={() => this.changeTab('component')} active={tab === 'component'}
> onClick={() => this.changeTab('component')}
{(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]} >
</Button> {(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
</TabHeader> </Button>
</TabHeader>
</Margin>
{states.length {states.length
? states.map((state, i) => ( ? states.map((state, i) => (
<TabHeader active={tab === state} key={`tabHeader${i}`}> <TabHeader active={tab === state} key={`tabHeader${i}`}>