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

fix(ui-toolkit): styleguide minor bugs

Browse Source
This commit is contained in:
Fábio Moreira 2018-05-09 17:15:36 +01:00 committed by Sérgio Ramos
parent 84b2d67d2c
commit c233b0d757
4 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui-toolkit/src/footer/sticky.md
View File

@ -19,21 +19,21 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
<StickyFooter bottom> <StickyFooter bottom>
<Row between="xs" middle="xs"> <Row between="xs" middle="xs">
<Col xs={7}> <Col xs={7}>
<Button type="button" secondary icon> <Button type="button" secondary>
<StartIcon /> <StartIcon />
<span>Start</span> <span>Start</span>
</Button> </Button>
<Button type="button" secondary icon> <Button type="button" secondary>
<StopIcon /> <StopIcon />
<span>Stop</span> <span>Stop</span>
</Button> </Button>
<Button type="button" secondary icon> <Button type="button" secondary>
<ResetIcon /> <ResetIcon />
<span>Reboot</span> <span>Reboot</span>
</Button> </Button>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
<Button type="button" error secondary right icon> <Button type="button" error secondary right>
<DeleteIcon fill="#D2433A" /> <DeleteIcon fill="#D2433A" />
<span>Remove</span> <span>Remove</span>
</Button> </Button>

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

@ -3,7 +3,7 @@ import styled from 'styled-components';
import is from 'styled-is'; import is from 'styled-is';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
const Wrapper = styled.section; const Wrapper = styled.section``;
const Tabs = styled.ul` const Tabs = styled.ul`
list-style: none; list-style: none;
@ -133,8 +133,8 @@ class Playground extends Component {
</Button> </Button>
</TabHeader> </TabHeader>
{states.length {states.length
? states.map(state => ( ? states.map((state, i) => (
<TabHeader active={tab === state}> <TabHeader active={tab === state} key={`tabHeader${i}`}>
<Button <Button
active={tab === state} active={tab === state}
onClick={() => this.changeTab(state)} onClick={() => this.changeTab(state)}
@ -158,7 +158,7 @@ class Playground extends Component {
</Tab> </Tab>
{states.length {states.length
? states.map((state, i) => ( ? states.map((state, i) => (
<Tab active={tab === state} data-preview={name}> <Tab active={tab === state} data-preview={name} key={`tab${i}`}>
{this.showPreview(preview, propCode.split(regex)[i + 1])} {this.showPreview(preview, propCode.split(regex)[i + 1])}
</Tab> </Tab>
)) ))

6
packages/ui-toolkit/src/styleguide/section.js
View File

@ -3,6 +3,8 @@ import styled from 'styled-components';
import { Card, H2, P, H4 } from '../'; import { Card, H2, P, H4 } from '../';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
const CardStyled = styled(Card)``;
const Header = styled.header` const Header = styled.header`
background: ${props => props.theme.primary}; background: ${props => props.theme.primary};
padding: ${remcalc(50)} ${remcalc(120)}; padding: ${remcalc(50)} ${remcalc(120)};
@ -23,7 +25,7 @@ export default allProps => {
if (depth === 1) { if (depth === 1) {
return ( return (
<Card> <CardStyled>
<Header> <Header>
<H2 white>{name}</H2> <H2 white>{name}</H2>
{description ? <P white>{description}</P> : null} {description ? <P white>{description}</P> : null}
@ -33,7 +35,7 @@ export default allProps => {
{components} {components}
{sections} {sections}
</Main> </Main>
</Card> </CardStyled>
); );
} }

6
packages/ui-toolkit/src/table/index.js
View File

@ -314,11 +314,7 @@ export const Th = ({ children, ...rest }) => (
> >
{children} {children}
{!showSort || !header ? null : ( {!showSort || !header ? null : (
<ArrowIcon <ArrowIcon direction={sortOrder === 'asc' ? 'down' : 'up'} />
marginLeft={remcalc(9)}
marginBottom={remcalc(2)}
direction={sortOrder === 'asc' ? 'down' : 'up'}
/>
)} )}
</BaseTh> </BaseTh>
)} )}