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

View File

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