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}; background-color: ${props => props.theme.white};
border: ${border.unchecked}; 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')` ${is('error')`
border-color: ${props => props.theme.redDark} 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 React from 'react';
import { Subscriber } from 'joy-react-broadcast'; import { Subscriber } from 'joy-react-broadcast';
import is from 'styled-is';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import Label from '../label'; import Label from '../label';
@ -7,6 +8,9 @@ import Label from '../label';
const StyledLabel = Label.extend` const StyledLabel = Label.extend`
margin-right: ${remcalc(12)}; margin-right: ${remcalc(12)};
font-weight: bold; font-weight: bold;
${is('disabled')`
color: ${props => props.theme.grey};
`};
`; `;
export default props => { export default props => {

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

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

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

@ -1,6 +1,6 @@
#### `type` #### Input > Email
``` ```jsx
const FormGroup = require('./group').default; const FormGroup = require('./group').default;
const Label = require('./label').default; const Label = require('./label').default;
@ -10,101 +10,62 @@ const Label = require('./label').default;
</FormGroup> </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 FormGroup = require('./group').default;
const Label = require('./label').default; const Label = require('./label').default;
const FormMeta = require('./meta').default; const FormMeta = require('./meta').default;
<div> <FormGroup>
<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> <Label>Email Address</Label>
<Input placeholder='Enter email' type='email' /> <Input placeholder='Enter email' type='email' />
<FormMeta error> <FormMeta error>
Unexpected children error! Unexpected children error!
</FormMeta> </FormMeta>
</FormGroup> </FormGroup>
</div>
``` ```
#### warning #### Input > Warning
``` ```jsx
const FormGroup = require('./group').default; const FormGroup = require('./group').default;
const Label = require('./label').default; const Label = require('./label').default;
const FormMeta = require('./meta').default; const FormMeta = require('./meta').default;
<div> <FormGroup>
<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> <Label>Email Address</Label>
<Input placeholder='Enter email' type='email' /> <Input placeholder='Enter email' type='email' />
<FormMeta warning> <FormMeta warning>
Unexpected children warning! Unexpected children warning!
</FormMeta> </FormMeta>
</FormGroup> </FormGroup>
</div>
``` ```
#### success #### Input > Success
``` ```jsx
const FormGroup = require('./group').default; const FormGroup = require('./group').default;
const Label = require('./label').default; const Label = require('./label').default;
const FormMeta = require('./meta').default; const FormMeta = require('./meta').default;
<div> <FormGroup>
<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> <Label>Email Address</Label>
<Input placeholder='Enter email' type='email' /> <Input placeholder='Enter email' type='email' />
<FormMeta success> <FormMeta success>
Unexpected children success! Unexpected children success!
</FormMeta> </FormMeta>
</FormGroup> </FormGroup>
</div>
``` ```

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

@ -1,4 +1,4 @@
``` ```jsx
<Select> <Select>
<option selected disabled>Select a datacenter</option> <option selected disabled>Select a datacenter</option>
<option>Amsterdam, EU</option> <option>Amsterdam, EU</option>
@ -8,14 +8,14 @@
</Select> </Select>
``` ```
#### `disabled` #### Select > Disabled
``` ```jsx
const FormGroup = require('./group').default; const FormGroup = require('./group').default;
const Label = require('./label').default; const Label = require('./label').default;
<FormGroup> <FormGroup>
<Label>Your location</Label> <Label disabled>Your location</Label>
<Select disabled> <Select disabled>
<option selected disabled>Select Location</option> <option selected disabled>Select Location</option>
<option value='1'>Amsterdam, EU</option> <option value='1'>Amsterdam, EU</option>
@ -27,168 +27,9 @@ const Label = require('./label').default;
``` ```
#### warning #### Select > Warning
``` ```jsx
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
```
const FormMeta = require('./meta').default; const FormMeta = require('./meta').default;
const FormGroup = require('./group').default; const FormGroup = require('./group').default;
const Label = require('./label').default; const Label = require('./label').default;
@ -201,8 +42,50 @@ const Label = require('./label').default;
<option>Seoul, South Korea</option> <option>Seoul, South Korea</option>
<option>Tokyo, Japan</option> <option>Tokyo, Japan</option>
</Select> </Select>
<FormMeta> <FormMeta warning>
I&#39;m a children of meta! 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> </FormMeta>
</FormGroup> </FormGroup>
``` ```