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

fix(ui-toolkit): Input/Select disabled styling

Browse Source 
fixes #746
This commit is contained in:
Sara Vieira 2017-10-11 15:56:24 +01:00 committed by Sérgio Ramos
parent a761b7da31
commit 8d584459d0
5 changed files with 128 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui-toolkit/src/form/base/input.js
View File

@ -37,6 +37,18 @@ const style = css`
background-color: ${props => props.theme.white};
border: ${border.unchecked};
${is('disabled')`
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: ${props => props.theme.grey};
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: ${props => props.theme.grey};
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: ${props => props.theme.grey};
}
`};
${is('error')`
border-color: ${props => props.theme.redDark}
`};

4
packages/ui-toolkit/src/form/label.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { Subscriber } from 'joy-react-broadcast';
import is from 'styled-is';
import remcalc from 'remcalc';
import Label from '../label';
@ -7,6 +8,9 @@ import Label from '../label';
const StyledLabel = Label.extend`
margin-right: ${remcalc(12)};
font-weight: bold;
${is('disabled')`
color: ${props => props.theme.grey};
`};
`;
export default props => {

31
packages/ui-toolkit/src/form/select.js
View File

@ -1,11 +1,17 @@
import React from 'react';
import styled from 'styled-components';
import { isNot } from 'styled-is';
import is, { isNot } from 'styled-is';
import remcalc from 'remcalc';
import Baseline from '../baseline';
import BaseInput, { Stylable } from './base/input';
const chevron =
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
const chevronDisabled =
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiNEOEQ4RDgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
const Select = Baseline(BaseInput(Stylable('select')));
const SelectWrapper = styled.div`
@ -15,29 +21,36 @@ const SelectWrapper = styled.div`
${isNot('fluid')`
min-width: ${remcalc(200)};
`};
&:after {
content: '';
width: ${remcalc(10)};
height: ${remcalc(10)};
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDo
vL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIG
Q9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpb
Gw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==')
center center no-repeat;
background: url(${chevron}) center center no-repeat;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: ${remcalc(12)};
}
${is('disabled')`
&:after {
background: url(${chevronDisabled}) center center no-repeat;
}
`};
`;
const StyledSelect = Select.extend`
${is('disabled')`
border-color: ${props => props.theme.grey};
color: ${props => props.theme.grey};
`};
`;
/**
* @example ./usage-select.md
*/
export default ({ children, fluid, ...rest }) => (
<SelectWrapper fluid={fluid}>
<Select {...rest}>{children}</Select>
<SelectWrapper {...rest} fluid={fluid}>
<StyledSelect {...rest}>{children}</StyledSelect>
</SelectWrapper>
);

119
packages/ui-toolkit/src/form/usage-input.md
View File

@ -1,6 +1,6 @@
#### `type`
#### Input > Email
```
```jsx
const FormGroup = require('./group').default;
const Label = require('./label').default;
@ -10,101 +10,62 @@ const Label = require('./label').default;
</FormGroup>
```
#### error
#### Input > Disabled
```jsx
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label disabled>Username</Label>
<Input disabled placeholder='Example: JarJarBinks' type='email' />
</FormGroup>
```
#### Input > Error
```jsx
const FormGroup = require('./group').default;
const Label = require('./label').default;
const FormMeta = require('./meta').default;
<div>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta error='Unexpected inline error!' />
</FormGroup>
<FormGroup error='Unexpected group error!'>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta />
</FormGroup>
<FormGroup meta={{error: 'Unexpected meta error!'}}>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta />
</FormGroup>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta error>
Unexpected children error!
</FormMeta>
</FormGroup>
</div>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta error>
Unexpected children error!
</FormMeta>
</FormGroup>
```
#### warning
#### Input > Warning
```
```jsx
const FormGroup = require('./group').default;
const Label = require('./label').default;
const FormMeta = require('./meta').default;
<div>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta warning='Unexpected inline warning!' />
</FormGroup>
<FormGroup warning='Unexpected group warning!'>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta />
</FormGroup>
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta />
</FormGroup>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta warning>
Unexpected children warning!
</FormMeta>
</FormGroup>
</div>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta warning>
Unexpected children warning!
</FormMeta>
</FormGroup>
```
#### success
#### Input > Success
```
```jsx
const FormGroup = require('./group').default;
const Label = require('./label').default;
const FormMeta = require('./meta').default;
<div>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta success='Unexpected inline success!' />
</FormGroup>
<FormGroup success='Unexpected group success!'>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta />
</FormGroup>
<FormGroup meta={{success: 'Unexpected meta success!'}}>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta />
</FormGroup>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta success>
Unexpected children success!
</FormMeta>
</FormGroup>
</div>
<FormGroup>
<Label>Email Address</Label>
<Input placeholder='Enter email' type='email' />
<FormMeta success>
Unexpected children success!
</FormMeta>
</FormGroup>
```

217
packages/ui-toolkit/src/form/usage-select.md
View File

@ -1,4 +1,4 @@
```
```jsx
<Select>
<option selected disabled>Select a datacenter</option>
<option>Amsterdam, EU</option>
@ -8,14 +8,14 @@
</Select>
```
#### `disabled`
#### Select > Disabled
```
```jsx
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Label disabled>Your location</Label>
<Select disabled>
<option selected disabled>Select Location</option>
<option value='1'>Amsterdam, EU</option>
@ -27,168 +27,9 @@ const Label = require('./label').default;
```
#### warning
#### Select > Warning
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta warning='Unexpected inline warning!' />
</FormGroup>
<FormGroup warning='Unexpected group warning!'>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta warning>
Unexpected children warning!
</FormMeta>
</FormGroup>
</div>
```
#### error
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta error='Unexpected inline error!' />
</FormGroup>
<FormGroup error='Unexpected group error!'>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup meta={{error: 'Unexpected meta error!'}}>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta error>
Unexpected children error!
</FormMeta>
</FormGroup>
</div>
```
#### success
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta success='Unexpected inline success!' />
</FormGroup>
<FormGroup success='Unexpected group success!'>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup meta={{success: 'Unexpected meta success!'}}>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta success>
Unexpected children success!
</FormMeta>
</FormGroup>
</div>
```
#### meta
```
```jsx
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
@ -201,8 +42,50 @@ const Label = require('./label').default;
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta>
I&#39;m a children of meta!
<FormMeta warning>
Unexpected children warning!
</FormMeta>
</FormGroup>
```
#### Select > Error
```jsx
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta error>
Unexpected children error!
</FormMeta>
</FormGroup>
```
#### Select > Success
```jsx
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta success>
Unexpected children success!
</FormMeta>
</FormGroup>
```