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

fix(ui-tollkit): improve loading button styles

Browse Source 
fixes #754
This commit is contained in:
Sara Vieira 2017-10-12 19:55:05 +01:00 committed by Sérgio Ramos
parent 433d8db50a
commit 12ec0c33ea
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui-toolkit/src/button/index.js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import is from 'styled-is'; import is, { isOr } from 'styled-is';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { A, Button as NButton } from 'normalized-styled-components'; import { A, Button as NButton } from 'normalized-styled-components';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -124,7 +124,9 @@ const style = css`
} }
`}; `};
${is('disabled')` ${isOr('disabled', 'loading')`
cursor: not-allowed;
pointer-events: none;
color: ${props => props.theme.grey}; color: ${props => props.theme.grey};
background-color: ${props => props.theme.disabled}; background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey}; border-color: ${props => props.theme.grey};
@ -200,7 +202,7 @@ const Button = props => {
const View = Views.reduce((sel, view) => (sel ? sel : view()), null); const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
const children = loading ? ( const children = loading ? (
<StatusLoader secondary={!secondary} /> <StatusLoader secondary={!secondary} small/>
) : ( ) : (
props.children props.children
); );
@ -225,6 +227,7 @@ Button.propTypes = {
secondary: PropTypes.bool, secondary: PropTypes.bool,
tertiary: PropTypes.bool, tertiary: PropTypes.bool,
small: PropTypes.bool, small: PropTypes.bool,
loading: PropTypes.bool,
/** /**
* When used, will give button an active state (Only for tertiary for now) * When used, will give button an active state (Only for tertiary for now)
*/ */

17
packages/ui-toolkit/src/button/usage.md
View File

@ -1,5 +1,3 @@
### with text
```jsx ```jsx
<span> <span>
<Button>Inspire the lazy</Button> <Button>Inspire the lazy</Button>
@ -8,7 +6,7 @@
</span> </span>
``` ```
### secondary #### Button > Secondary
```jsx ```jsx
<span> <span>
@ -18,7 +16,7 @@
</span> </span>
``` ```
### tertiary #### Button > Tertiary
```jsx ```jsx
<span> <span>
@ -30,7 +28,7 @@
</span> </span>
``` ```
### disabled #### Button > Disabled
```jsx ```jsx
<span> <span>
@ -39,3 +37,12 @@
<Button href='#4' disabled>Inspire the liars (anchor)</Button> <Button href='#4' disabled>Inspire the liars (anchor)</Button>
</span> </span>
``` ```
#### Button > Loading
```jsx
<span>
<Button secondary loading>Inspire the liars</Button>
</span>
```

4
packages/ui-toolkit/src/status-loader/index.js
View File

@ -41,9 +41,9 @@ const Msg = P.extend`
margin-left: ${remcalc(6)}; margin-left: ${remcalc(6)};
`; `;
export default ({ msg, row, inline }) => ( export default ({ msg, row, inline, small }) => (
<Container row={row} inline={inline}> <Container row={row} inline={inline}>
<Loader /> <Loader />
<Msg>{msg || 'Loading...'}</Msg> {!small && <Msg>{msg || 'Loading...'}</Msg>}
</Container> </Container>
); );