From 8d584459d0ec10f4f9bb4b3d951410c610625d8f Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 11 Oct 2017 15:56:24 +0100 Subject: [PATCH] fix(ui-toolkit): Input/Select disabled styling fixes #746 --- packages/ui-toolkit/src/form/base/input.js | 12 + packages/ui-toolkit/src/form/label.js | 4 + packages/ui-toolkit/src/form/select.js | 31 ++- packages/ui-toolkit/src/form/usage-input.md | 119 ++++------ packages/ui-toolkit/src/form/usage-select.md | 217 +++++-------------- 5 files changed, 128 insertions(+), 255 deletions(-) diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js index f5b08499..d056b49f 100644 --- a/packages/ui-toolkit/src/form/base/input.js +++ b/packages/ui-toolkit/src/form/base/input.js @@ -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} `}; diff --git a/packages/ui-toolkit/src/form/label.js b/packages/ui-toolkit/src/form/label.js index 6f0ac67f..4abe0132 100644 --- a/packages/ui-toolkit/src/form/label.js +++ b/packages/ui-toolkit/src/form/label.js @@ -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 => { diff --git a/packages/ui-toolkit/src/form/select.js b/packages/ui-toolkit/src/form/select.js index e0662f9a..7f3e2400 100644 --- a/packages/ui-toolkit/src/form/select.js +++ b/packages/ui-toolkit/src/form/select.js @@ -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 }) => ( - - + + {children} ); diff --git a/packages/ui-toolkit/src/form/usage-input.md b/packages/ui-toolkit/src/form/usage-input.md index 859c2817..ef9150cd 100644 --- a/packages/ui-toolkit/src/form/usage-input.md +++ b/packages/ui-toolkit/src/form/usage-input.md @@ -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; ``` -#### error +#### Input > Disabled +```jsx +const FormGroup = require('./group').default; +const Label = require('./label').default; + + + + + ``` + +#### Input > Error + +```jsx const FormGroup = require('./group').default; const Label = require('./label').default; const FormMeta = require('./meta').default; -
- - - - - - - - - - - - - - - - - - - - Unexpected children error! - - -
+ + + + + Unexpected children error! + + ``` -#### warning +#### Input > Warning -``` +```jsx const FormGroup = require('./group').default; const Label = require('./label').default; const FormMeta = require('./meta').default; -
- - - - - - - - - - - - - - - - - - - - Unexpected children warning! - - -
+ + + + + Unexpected children warning! + + ``` -#### success +#### Input > Success -``` +```jsx const FormGroup = require('./group').default; const Label = require('./label').default; const FormMeta = require('./meta').default; -
- - - - - - - - - - - - - - - - - - - - Unexpected children success! - - -
+ + + + + Unexpected children success! + + ``` \ No newline at end of file diff --git a/packages/ui-toolkit/src/form/usage-select.md b/packages/ui-toolkit/src/form/usage-select.md index eccbc5bf..b9709310 100644 --- a/packages/ui-toolkit/src/form/usage-select.md +++ b/packages/ui-toolkit/src/form/usage-select.md @@ -1,4 +1,4 @@ -``` +```jsx ``` -#### `disabled` +#### Select > Disabled -``` +```jsx const FormGroup = require('./group').default; const Label = require('./label').default; - + - - - - - - - - - - - - - - - - - - - - - - Unexpected children warning! - - - -``` - -#### error - -``` -const FormMeta = require('./meta').default; -const FormGroup = require('./group').default; -const Label = require('./label').default; - -
- - - - - - - - - - - - - - - - - - - - Unexpected children error! - - -
-``` - -#### success - -``` -const FormMeta = require('./meta').default; -const FormGroup = require('./group').default; -const Label = require('./label').default; - -
- - - - - - - - - - - - - - - - - - - - Unexpected children success! - - -
-``` - -#### 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; - - I'm a children of meta! + + Unexpected children warning! ``` + +#### Select > Error + +```jsx +const FormMeta = require('./meta').default; +const FormGroup = require('./group').default; +const Label = require('./label').default; + + + + + + Unexpected children error! + + +``` + +#### Select > Success + +```jsx +const FormMeta = require('./meta').default; +const FormGroup = require('./group').default; +const Label = require('./label').default; + + + + + + Unexpected children success! + + +``` \ No newline at end of file