diff --git a/js/src/ui/Actionbar/Search/search.js b/js/src/ui/Actionbar/Search/search.js
index 02b0481f9..72bf50fd5 100644
--- a/js/src/ui/Actionbar/Search/search.js
+++ b/js/src/ui/Actionbar/Search/search.js
@@ -74,6 +74,7 @@ export default class ActionbarSearch extends Component {
}
- ref='inputChip'
tokens={ tokens }
onBlur={ this.handleSearchBlur }
@@ -126,10 +126,6 @@ export default class ActionbarSearch extends Component {
handleSearchClick = () => {
const { showSearch } = this.state;
- if (!showSearch) {
- this.refs.inputChip.focus();
- }
-
this.handleOpenSearch(!showSearch);
}
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.css b/js/src/ui/Form/AddressSelect/addressSelect.css
index 5b7ced748..734856b0b 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.css
+++ b/js/src/ui/Form/AddressSelect/addressSelect.css
@@ -90,11 +90,6 @@
position: relative;
}
-.label {
- margin: 1rem 0.5rem 0.25em;
- color: rgba(255, 255, 255, 0.498039);
-}
-
.underline {
position: relative;
margin: 0 0.5rem 0 0.5rem;
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index ad9eb24cc..b7aa0e18e 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -29,6 +29,7 @@ import { validateAddress } from '@parity/shared/util/validation';
import AccountCard from '~/ui/AccountCard';
import CopyToClipboard from '~/ui/CopyToClipboard';
import InputAddress from '~/ui/Form/InputAddress';
+import LabelWrapper from '~/ui/Form/LabelWrapper';
import Loading from '~/ui/Loading';
import Portal from '~/ui/Portal';
@@ -193,10 +194,11 @@ class AddressSelect extends Component {
onKeyDown={ this.handleKeyDown }
open={ expanded }
title={
-
-
+
-
+
}
>
{ this.renderCurrentInput() }
diff --git a/js/src/ui/Form/Checkbox/checkbox.js b/js/src/ui/Form/Checkbox/checkbox.js
index 4f20f2014..5c275b25d 100644
--- a/js/src/ui/Form/Checkbox/checkbox.js
+++ b/js/src/ui/Form/Checkbox/checkbox.js
@@ -15,16 +15,20 @@
// along with Parity. If not, see
.
import React, { PropTypes } from 'react';
-import { Checkbox as SemCheckbox } from 'semantic-ui-react';
+import { Checkbox as SemanticCheckbox } from 'semantic-ui-react';
import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
+import LabelWrapper from '../LabelWrapper';
+
export default function Checkbox ({ checked = false, className, label, onClick, style }) {
return (
-
{ label } }
+ label={
+
+ }
onClick={ onClick }
style={ style }
/>
diff --git a/js/src/ui/Form/Dropdown/dropdown.js b/js/src/ui/Form/Dropdown/dropdown.js
index ce59f6482..39b36c737 100644
--- a/js/src/ui/Form/Dropdown/dropdown.js
+++ b/js/src/ui/Form/Dropdown/dropdown.js
@@ -19,7 +19,7 @@ import { Dropdown as SemanticDropdown } from 'semantic-ui-react';
import { parseI18NString } from '@parity/shared/util/messages';
-import LabelComponent from '../LabelComponent';
+import LabelWrapper from '../LabelWrapper';
import styles from './dropdown.css';
@@ -30,7 +30,7 @@ export default function Dropdown ({ className, disabled = false, error, fullWidt
const _onChange = (event, { value }) => onChange(event, value);
return (
-
+
-
+
);
}
diff --git a/js/src/ui/Form/FileSelect/fileSelect.js b/js/src/ui/Form/FileSelect/fileSelect.js
index 39bbfa4e5..49340495e 100644
--- a/js/src/ui/Form/FileSelect/fileSelect.js
+++ b/js/src/ui/Form/FileSelect/fileSelect.js
@@ -46,14 +46,7 @@ export default class FileSelect extends Component {
{ error || label }
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
index 57b7512a2..163aa2636 100644
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@@ -23,7 +23,7 @@ import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
import { parseI18NString } from '@parity/shared/util/messages';
import CopyToClipboard from '~/ui/CopyToClipboard';
-import LabelComponent from '~/ui/Form/LabelComponent';
+import LabelWrapper from '~/ui/Form/LabelWrapper';
import styles from './input.css';
@@ -113,7 +113,7 @@ export default class Input extends Component {
const { value } = this.state;
return (
-
@@ -146,7 +146,7 @@ export default class Input extends Component {
{ children }
-
+
);
}
diff --git a/js/src/ui/Form/InputChip/inputChip.js b/js/src/ui/Form/InputChip/inputChip.js
index 864dffe9c..82fc5a24d 100644
--- a/js/src/ui/Form/InputChip/inputChip.js
+++ b/js/src/ui/Form/InputChip/inputChip.js
@@ -22,7 +22,7 @@ import { Input as SemanticInput } from 'semantic-ui-react';
import { parseI18NString } from '@parity/shared/util/messages';
import { arrayOrObjectProptype, nodeOrStringProptype } from '@parity/shared/util/proptypes';
-import LabelComponent from '~/ui/Form/LabelComponent';
+import LabelWrapper from '~/ui/Form/LabelWrapper';
import Chip from './Chip';
@@ -32,6 +32,7 @@ export default class InputChip extends Component {
};
static propTypes = {
+ autoFocus: PropTypes.bool,
addOnBlur: PropTypes.bool,
clearOnBlur: PropTypes.bool,
className: PropTypes.string,
@@ -51,12 +52,13 @@ export default class InputChip extends Component {
textValue: ''
};
+ // TODO: autoFocus to be implemented (same as with Form/Input)
render () {
const { className, hint, label, tokens } = this.props;
const { textValue } = this.state;
return (
-
@@ -74,7 +76,7 @@ export default class InputChip extends Component {
{ tokens.map(this.renderChip) }
-
+
);
}
@@ -90,21 +92,6 @@ export default class InputChip extends Component {
);
}
- chipRenderer = (state, key) => {
- const { isDisabled, isFocused, handleClick, handleRequestDelete, value } = state;
-
- return (
-
- );
- }
-
handleTokenAdd = (value) => {
const { tokens } = this.props;
const newTokens = uniq([].concat(tokens, value));
diff --git a/js/src/ui/Form/InputDateTime/inputDateTime.js b/js/src/ui/Form/InputDateTime/inputDateTime.js
index d2c648a23..4b0b16c3b 100644
--- a/js/src/ui/Form/InputDateTime/inputDateTime.js
+++ b/js/src/ui/Form/InputDateTime/inputDateTime.js
@@ -19,7 +19,7 @@ import DateTime from 'react-datetime';
import { parseI18NString } from '@parity/shared/util/messages';
-import LabelComponent from '~/ui/Form/LabelComponent';
+import LabelWrapper from '~/ui/Form/LabelWrapper';
import styles from './inputDateTime.css';
@@ -29,7 +29,7 @@ export default function InputDateTime ({ className, hint, label, onChange, value
const _onChange = (value) => onChange && onChange(null, value);
return (
-
@@ -43,7 +43,7 @@ export default function InputDateTime ({ className, hint, label, onChange, value
value={ value }
/>
-
+
);
}
diff --git a/js/src/ui/Form/Label/label.js b/js/src/ui/Form/Label/label.js
index ae80d6dc8..0ad268ac7 100644
--- a/js/src/ui/Form/Label/label.js
+++ b/js/src/ui/Form/Label/label.js
@@ -16,21 +16,29 @@
import React, { PropTypes } from 'react';
+import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
+
import styles from './label.css';
-export default function Label ({ className, label }) {
- if (!label) {
+export default function Label ({ className, children, htmlFor, label }) {
+ if (!label && !children) {
return null;
}
return (
-
+
);
}
diff --git a/js/src/ui/Form/RadioButtons/radioButtons.js b/js/src/ui/Form/RadioButtons/radioButtons.js
index 8dfaf51d9..0371f2c84 100644
--- a/js/src/ui/Form/RadioButtons/radioButtons.js
+++ b/js/src/ui/Form/RadioButtons/radioButtons.js
@@ -15,19 +15,21 @@
// along with Parity. If not, see
.
import React, { PropTypes } from 'react';
-import { Radio } from 'semantic-ui-react';
+import { Radio as SemanticRadio } from 'semantic-ui-react';
import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
-import LabelComponent from '../LabelComponent';
+import LabelWrapper from '../LabelWrapper';
+import Label from '../Label';
+
import styles from './radioButtons.css';
export default function RadioButtons ({ className, label, name, onChange, value, values }) {
const _onChange = (event, { value }) => onChange(event, value);
return (
-
{
@@ -36,12 +38,14 @@ export default function RadioButtons ({ className, label, name, onChange, value,
className={ styles.radioContainer }
key={ key }
>
-
- { label }
+
+
+ { label }
+
{
description && (
@@ -49,7 +53,7 @@ export default function RadioButtons ({ className, label, name, onChange, value,
)
}
-
+
}
name={ name }
onChange={ _onChange }
@@ -58,7 +62,7 @@ export default function RadioButtons ({ className, label, name, onChange, value,
))
}
-
+
);
}
diff --git a/js/src/ui/Form/Toggle/toggle.js b/js/src/ui/Form/Toggle/toggle.js
index 7608e3e2e..23527fd72 100644
--- a/js/src/ui/Form/Toggle/toggle.js
+++ b/js/src/ui/Form/Toggle/toggle.js
@@ -17,11 +17,11 @@
import React, { PropTypes } from 'react';
import { Radio as SemanticRadio } from 'semantic-ui-react';
-import LabelComponent from '../LabelComponent';
+import LabelWrapper from '../LabelWrapper';
export default function Toggle ({ className, label, onToggle, style, toggled }) {
return (
-
+
-
+
);
}
diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js
index fecefa2d0..99141cb44 100644
--- a/js/src/ui/Form/TypedInput/typedInput.js
+++ b/js/src/ui/Form/TypedInput/typedInput.js
@@ -27,6 +27,7 @@ import Button from '~/ui/Button';
import Dropdown from '~/ui/Form/Dropdown';
import Input from '~/ui/Form/Input';
import InputAddressSelect from '~/ui/Form/InputAddressSelect';
+import LabelWrapper from '~/ui/Form/LabelWrapper';
import Toggle from '~/ui/Form/Toggle';
import { AddIcon, RemoveIcon } from '~/ui/Icons';
@@ -125,11 +126,13 @@ export default class TypedInput extends Component {
});
return (
-
- { label }
+
{ fixedLength || readOnly ? null : this.renderLength() }
{ inputs }
-
+
);
}
diff --git a/js/src/ui/List/list.js b/js/src/ui/List/list.js
index 5441c543e..fb70e9233 100644
--- a/js/src/ui/List/list.js
+++ b/js/src/ui/List/list.js
@@ -17,7 +17,7 @@
import React, { PropTypes } from 'react';
import { List as SemanticList } from 'semantic-ui-react';
-import LabelComponent from '../Form/LabelComponent';
+import LabelWrapper from '../Form/LabelWrapper';
import Item from './Item';
import styles from './list.css';
@@ -28,7 +28,7 @@ export default function List ({ className, items, label, onClick, style }) {
};
return (
-
+
{
items.filter((item) => item).map(({ buttons, description, icon, isActive, key, label }, index) => (
@@ -44,7 +44,7 @@ export default function List ({ className, items, label, onClick, style }) {
))
}
-
+
);
}
diff --git a/js/src/ui/Steps/steps.js b/js/src/ui/Steps/steps.js
index 9a3abf12b..a35b7ade0 100644
--- a/js/src/ui/Steps/steps.js
+++ b/js/src/ui/Steps/steps.js
@@ -28,12 +28,12 @@ export default function Steps ({ activeStep, className, steps }) {
{
- steps.map((label, index) => (
+ steps.filter((step) => step).map((step, index) => (
index }
- key={ label.key || index }
- label={ label.label || label }
+ key={ step.key || index }
+ label={ step.label || step }
/>
))
}
diff --git a/js/src/ui/Tabs/Tab/tab.js b/js/src/ui/Tabs/Tab/tab.js
index 7119c7c0d..c4a30f40f 100644
--- a/js/src/ui/Tabs/Tab/tab.js
+++ b/js/src/ui/Tabs/Tab/tab.js
@@ -15,18 +15,18 @@
// along with Parity. If not, see .
import React, { PropTypes } from 'react';
-import { Menu } from 'semantic-ui-react';
+import { Menu as SemanticMenu } from 'semantic-ui-react';
export default function Tab ({ isActive, className, index, label, name, onClick, style }) {
return (
-
{ label }
-
+
);
}
diff --git a/js/src/ui/Tabs/tabs.js b/js/src/ui/Tabs/tabs.js
index 2777d4669..af934c9dc 100644
--- a/js/src/ui/Tabs/tabs.js
+++ b/js/src/ui/Tabs/tabs.js
@@ -15,7 +15,7 @@
// along with Parity. If not, see .
import React, { PropTypes } from 'react';
-import { Menu } from 'semantic-ui-react';
+import { Menu as SemanticMenu } from 'semantic-ui-react';
import Tab from './Tab';
@@ -23,30 +23,22 @@ export default function Tabs ({ activeTab, className, tabs, onChange }) {
const onTabClick = (event, { index }) => onChange && onChange(event, index);
return (
-
+
);
}