Ui 2 components cleanups (#5653)

* Add autoFocus for search

* Remove old/unused renderer

* LabelComponent -> LabelWrapper

* Consistent LabelWrapper usage

js/src/ui/Actionbar/Search/search.js

@@ -74,6 +74,7 @@ export default class ActionbarSearch extends Component {
         <div className={ inputContainerClasses.join(' ') }>
           <InputChip
             addOnBlur
+            autoFocus
             className={ styles.input }
             hint={
               <FormattedMessage
@@ -81,7 +82,6 @@ export default class ActionbarSearch extends Component {
                 defaultMessage='Enter search input...'
               />
             }
-            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);
   }
 

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;

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={
-          <div className={ styles.title }>
+          <LabelWrapper
-            <label className={ styles.label } htmlFor={ id }>
+            className={ styles.title }
-              { label }
+            htmlFor={ id }
-            </label>
+            label={ label }
+          >
             <div className={ styles.outerInput }>
               <input
                 id={ id }
@@ -217,7 +219,7 @@ class AddressSelect extends Component {
                 )
               }
             </div>
-          </div>
+          </LabelWrapper>
         }
       >
         { this.renderCurrentInput() }

js/src/ui/Form/Checkbox/checkbox.js

@@ -15,16 +15,20 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-    <SemCheckbox
+    <SemanticCheckbox
       checked={ checked }
       className={ className }
-      label={ <label>{ label }</label> }
+      label={
+        <LabelWrapper label={ label } />
+      }
       onClick={ onClick }
       style={ style }
     />

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 (
-    <LabelComponent label={ label }>
+    <LabelWrapper label={ label }>
       <SemanticDropdown
         className={ `${styles.dropdown} ${className}` }
         disabled={ disabled }
@@ -49,7 +49,7 @@ export default function Dropdown ({ className, disabled = false, error, fullWidt
         text={ parseI18NString(context, text) }
         value={ value }
       />
-    </LabelComponent>
+    </LabelWrapper>
   );
 }
 

js/src/ui/Form/FileSelect/fileSelect.js

@@ -46,14 +46,7 @@ export default class FileSelect extends Component {
       <Dropzone
         onDrop={ this.onDrop }
         multiple={ false }
-        className={
+        className={ `${styles.dropzone} ${error && styles.error} ${className}` }
-          [
-            styles.dropzone,
-            error
-              ? styles.error
-              : '',
-            className
-          ].join(' ') }
       >
         <div className={ styles.label }>
           { error || label }

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 (
-      <LabelComponent
+      <LabelWrapper
         className={ styles.container }
         label={ label }
       >
@@ -146,7 +146,7 @@ export default class Input extends Component {
           <input />
           { children }
         </SemanticInput>
-      </LabelComponent>
+      </LabelWrapper>
     );
   }
 

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 (
-      <LabelComponent
+      <LabelWrapper
         className={ className }
         label={ label }
       >
@@ -74,7 +76,7 @@ export default class InputChip extends Component {
         <div>
           { tokens.map(this.renderChip) }
         </div>
-      </LabelComponent>
+      </LabelWrapper>
     );
   }
 
@@ -90,21 +92,6 @@ export default class InputChip extends Component {
     );
   }
 
-  chipRenderer = (state, key) => {
-    const { isDisabled, isFocused, handleClick, handleRequestDelete, value } = state;
-
-    return (
-      <Chip
-        isDisabled={ isDisabled }
-        isFocused={ isFocused }
-        key={ key }
-        label={ value }
-        onClick={ handleClick }
-        onDelete={ handleRequestDelete }
-      />
-    );
-  }
-
   handleTokenAdd = (value) => {
     const { tokens } = this.props;
     const newTokens = uniq([].concat(tokens, value));

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 (
-    <LabelComponent
+    <LabelWrapper
       className={ `${styles.container} ${className}` }
       label={ label }
     >
@@ -43,7 +43,7 @@ export default function InputDateTime ({ className, hint, label, onChange, value
           value={ value }
         />
       </div>
-    </LabelComponent>
+    </LabelWrapper>
   );
 }
 

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 }) {
+export default function Label ({ className, children, htmlFor, label }) {
-  if (!label) {
+  if (!label && !children) {
     return null;
   }
 
   return (
-    <label className={ [styles.label, className].join(' ') }>
+    <label
+      className={ `${styles.label} ${className}` }
+      htmlFor={ htmlFor }
+    >
       { label }
+      { children }
     </label>
   );
 }
 
 Label.propTypes = {
   className: PropTypes.string,
-  label: PropTypes.node
+  children: PropTypes.node,
+  htmlFor: PropTypes.string,
+  label: nodeOrStringProptype()
 };

js/src/ui/Form/LabelWrapper/index.js

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './labelComponent';
+export default from './labelWrapper';

js/src/ui/Form/LabelWrapper/labelWrapper.js

@@ -16,19 +16,25 @@
 
 import React, { PropTypes } from 'react';
 
+import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
+
 import Label from '../Label';
 
-export default function LabelComponent ({ className, children, label }) {
+export default function LabelWrapper ({ className, children, htmlFor, label }) {
   return (
     <div className={ className }>
-      <Label label={ label } />
+      <Label
+        htmlFor={ htmlFor }
+        label={ label }
+      />
       { children }
     </div>
   );
 }
 
-LabelComponent.propTypes = {
+LabelWrapper.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
-  label: PropTypes.node
+  htmlFor: PropTypes.string,
+  label: nodeOrStringProptype()
 };

js/src/ui/Form/PasswordStrength/passwordStrength.css

@@ -22,10 +22,3 @@
   font-size: 0.75em;
   margin: -2em 0 1.5em 0;
 }
-
-.label {
-  user-select: none;
-  line-height: 18px;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.498039);
-}

js/src/ui/Form/PasswordStrength/passwordStrength.js

@@ -19,6 +19,7 @@ import { debounce } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import zxcvbn from 'zxcvbn';
 
+import LabelWrapper from '~/ui/Form/LabelWrapper';
 import Progress from '~/ui/Progress';
 
 import styles from './passwordStrength.css';
@@ -64,13 +65,15 @@ export default class PasswordStrength extends Component {
     const { score, feedback } = strength;
 
     return (
-      <div className={ styles.strength }>
+      <LabelWrapper
-        <label className={ styles.label }>
+        className={ styles.strength }
+        label={
           <FormattedMessage
             id='ui.passwordStrength.label'
             defaultMessage='password strength'
           />
-        </label>
+        }
+      >
         <Progress
           color={ this.getStrengthBarColor(score) }
           isDeterminate
@@ -80,7 +83,7 @@ export default class PasswordStrength extends Component {
         <div className={ styles.feedback }>
           { this.renderFeedback(feedback) }
         </div>
-      </div>
+      </LabelWrapper>
     );
   }
 

js/src/ui/Form/RadioButtons/radioButtons.js

@@ -15,19 +15,21 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-    <LabelComponent
+    <LabelWrapper
-      className={ [styles.container, className].join(' ') }
+      className={ `${styles.container} ${className}` }
       label={ label }
     >
       {
@@ -36,12 +38,14 @@ export default function RadioButtons ({ className, label, name, onChange, value,
             className={ styles.radioContainer }
             key={ key }
           >
-            <Radio
+            <SemanticRadio
               checked={ value === key }
               className={ styles.radio }
               label={
-                <label className={ styles.label }>
+                <Label className={ styles.label }>
-                  <div className={ styles.name }>{ label }</div>
+                  <div className={ styles.name }>
+                    { label }
+                  </div>
                   {
                     description && (
                       <div className={ styles.description }>
@@ -49,7 +53,7 @@ export default function RadioButtons ({ className, label, name, onChange, value,
                       </div>
                     )
                   }
-                </label>
+                </Label>
               }
               name={ name }
               onChange={ _onChange }
@@ -58,7 +62,7 @@ export default function RadioButtons ({ className, label, name, onChange, value,
           </div>
         ))
       }
-    </LabelComponent>
+    </LabelWrapper>
   );
 }
 

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 (
-    <LabelComponent label={ label }>
+    <LabelWrapper label={ label }>
       <SemanticRadio
         checked={ toggled }
         className={ className }
@@ -29,7 +29,7 @@ export default function Toggle ({ className, label, onToggle, style, toggled })
         style={ style }
         toggle
       />
-    </LabelComponent>
+    </LabelWrapper>
   );
 }
 

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 (
-        <div className={ styles.inputs }>
+        <LabelWrapper
-          <label>{ label }</label>
+          className={ styles.inputs }
+          label={ label }
+        >
           { fixedLength || readOnly ? null : this.renderLength() }
           { inputs }
-        </div>
+        </LabelWrapper>
       );
     }
 

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 (
-    <LabelComponent label={ label }>
+    <LabelWrapper label={ label }>
       <SemanticList className={ `${styles.list} ${className}` }>
         {
           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 }) {
           ))
         }
       </SemanticList>
-    </LabelComponent>
+    </LabelWrapper>
   );
 }
 

js/src/ui/Steps/steps.js

@@ -28,12 +28,12 @@ export default function Steps ({ activeStep, className, steps }) {
     <div className={ className }>
       <SemanticStep.Group ordered>
         {
-          steps.map((label, index) => (
+          steps.filter((step) => step).map((step, index) => (
             <Step
               isActive={ activeStep === index }
               isCompleted={ activeStep > index }
-              key={ label.key || index }
+              key={ step.key || index }
-              label={ label.label || label }
+              label={ step.label || step }
             />
           ))
         }

js/src/ui/Tabs/Tab/tab.js

@@ -15,18 +15,18 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-    <Menu.Item
+    <SemanticMenu.Item
       active={ isActive }
       index={ index }
       name={ name }
       onClick={ onClick }
     >
       { label }
-    </Menu.Item>
+    </SemanticMenu.Item>
   );
 }
 

js/src/ui/Tabs/tabs.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-    <Menu
+    <SemanticMenu
       className={ className }
       pointing
     >
       {
-        tabs.map((tab, index) => {
+        tabs.filter((tab) => tab).map((tab, index) => (
-          if (!tab) {
+          <Tab
-            return null;
+            isActive={ activeTab === index }
-          }
+            index={ index }
-
+            key={ `tab_${index}` }
-          const key = `tab_${index}`;
+            label={ tab.label || tab }
-
+            onClick={ onTabClick }
-          return (
+          />
-            <Tab
+        ))
-              isActive={ activeTab === index }
-              index={ index }
-              key={ key }
-              label={ tab.label || tab }
-              onClick={ onTabClick }
-            />
-          );
-        })
       }
-    </Menu>
+    </SemanticMenu>
   );
 }