Simplify Dropdown, pass label correctly

js/src/ui/Dropdown/dropdown.js

@@ -1,87 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-
-// Parity is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// Parity is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-
-/** USAGE:
-  Options = [
-    {
-      text: 'Jenny Hess',
-      value: 'Jenny Hess',
-      image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
-    },
-   ...
-  ]
-
-  <Dropdown placeholder='Select Friend' fluid selection options={Options} />
-**/
-
-import React, { PropTypes } from 'react';
-import { Dropdown as SemanticDropdown } from 'semantic-ui-react';
-
-import styles from './dropdown.css';
-
-export default function Dropdown ({ defaultValue, disabled, fullWidth, fluid, hint, icon, name, onBlur, onChange, onClick, onClose, onFocus, options, placeholder, scrolling, search, selection, text, value }) {
-  return (
-    <SemanticDropdown
-      className={ styles.dropdown }
-      defaultValue={ defaultValue }
-      disabled={ disabled }
-      fluid={ fullWidth | fluid }
-      icon={ icon }
-      name={ name }
-      onBlur={ onBlur }
-      onChange={ onChange }
-      onClick={ onClick }
-      onClose={ onClose }
-      onFocus={ onFocus }
-      options={ options }
-      placeholder={ hint | placeholder }
-      scrolling={ scrolling }
-      search={ search }
-      selection={ selection }
-      text={ text }
-      value={ value }
-    />
-  );
-}
-
-Dropdown.propTypes = {
-  defaultValue: PropTypes.number,    // Initial value via index.
-  disabled: PropTypes.bool,          // A disabled dropdown menu or item does not allow user interaction.
-  fullWidth: PropTypes.bool,         // A dropdown can take the full width of its parent.
-  fluid: PropTypes.bool,             // A dropdown can take the full width of its parent.
-  icon: PropTypes.any,               // Shorthand for Icon.
-  name: PropTypes.func,              // Name of the hidden input which holds the value.
-  onBlur: PropTypes.func,            // Called on blur.
-  onChange: PropTypes.func,          // Called when the user attempts to change the value.
-  onClick: PropTypes.func,           // Called on click.
-  onClose: PropTypes.func,           // Called on close.
-  onFocus: PropTypes.func,           // Called on focus.
-  options: PropTypes.any,            // Array of Dropdown.Item props e.g. `{ text: '', value: '' }`
-  hint: PropTypes.string,            // Placeholder text.
-  placeholder: PropTypes.string,     // Placeholder text.
-  scrolling: PropTypes.bool,         // A dropdown can have its menu scroll.
-  search: PropTypes.bool,            // A selection dropdown can allow a user to search through a large list of choices.
-  selection: PropTypes.any,          // A dropdown can be used to select between choices in a form.
-  text: PropTypes.string,            // The text displayed in the dropdown, usually for the active item.
-  value: PropTypes.any               // Current value. Creates a controlled component.
-};
-
-Dropdown.defaultProps = {
-  disabled: false,
-  fluid: true,
-  search: true,
-  selection: true
-};

js/src/ui/Form/Dropdown/dropdown.js

@@ -0,0 +1,54 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { PropTypes } from 'react';
+import { Dropdown as SemanticDropdown } from 'semantic-ui-react';
+
+import LabelComponent from '../labelComponent';
+
+import styles from './dropdown.css';
+
+// FIXME: Currently does not display the selected icon alongside
+export default function Dropdown ({ className, disabled = false, fullWidth = true, hint, label, onChange, options, value }) {
+  return (
+    <LabelComponent label={ label }>
+      <SemanticDropdown
+        className={ `${styles.dropdown} ${className}` }
+        disabled={ disabled }
+        fluid={ fullWidth }
+        onChange={ onChange }
+        options={ options }
+        placeholder={ hint }
+        scrolling
+        search
+        selection
+        value={ value }
+      />
+    </LabelComponent>
+  );
+}
+
+Dropdown.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,          // A disabled dropdown menu or item does not allow user interaction.
+  fullWidth: PropTypes.bool,         // A dropdown can take the full width of its parent.
+  hint: PropTypes.string,            // Placeholder text.
+  label: PropTypes.node,
+  name: PropTypes.func,              // Name of the hidden input which holds the value.
+  onChange: PropTypes.func,          // Called when the user attempts to change the value.
+  options: PropTypes.any,            // Array of Dropdown.Item props e.g. `{ text: '', value: '' }`
+  value: PropTypes.any               // Current value. Creates a controlled component.
+};

js/src/ui/Form/LabelComponent/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// 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';

js/src/ui/Form/LabelComponent/labelComponent.css

@@ -0,0 +1,24 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  .label {
+    color: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    user-select: none;
+  }
+}

js/src/ui/Form/LabelComponent/labelComponent.js

@@ -0,0 +1,44 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { PropTypes } from 'react';
+
+import styles from './labelComponent.css';
+
+export default function LabelComponent ({ children, label }) {
+  return (
+    <div className={ styles.container }>
+      {
+        label
+          ? (
+            <label
+              className={ styles.label }
+              htmlFor=''
+            >
+              { label }
+            </label>
+          )
+          : null
+      }
+      { children }
+    </div>
+  );
+}
+
+LabelComponent.propTypes = {
+  label: PropTypes.node,
+  children: PropTypes.node.isRequired
+};

js/src/ui/Form/form.css

@@ -15,7 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .form {
-  margin-top: -1em;
   width: 100%;
 }
 

js/src/ui/Form/index.js

@@ -17,6 +17,7 @@
 export AddressSelect from './AddressSelect';
 export Checkbox from './Checkbox';
 export DappUrlInput from './DappUrlInput';
+export Dropdown from './Dropdown';
 export FileSelect from './FileSelect';
 export FormWrap from './FormWrap';
 export Input from './Input';

js/src/ui/index.js

@@ -31,10 +31,9 @@ export CurrencySymbol from './CurrencySymbol';
 export DappCard from './DappCard';
 export DappIcon from './DappIcon';
 export DappLink from './DappLink';
-export Dropdown from './Dropdown';
 export Errors from './Errors';
 export Features, { FEATURES, FeaturesStore } from './Features';
-export Form, { AddressSelect, Checkbox, DappUrlInput, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form';
+export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form';
 export GasPriceEditor from './GasPriceEditor';
 export GasPriceSelector from './GasPriceSelector';
 export IconCache from './IconCache';

js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js

@@ -33,16 +33,6 @@ const WARNING_LABELS = {
   )
 };
 
-const FUND_ACCCOUNT_FROM = {
-  display: 'block',
-  paddingTop: '15px',
-  paddingBottom: '5px',
-  fontSize: '16px',
-  pointerEvents: 'none',
-  userSelect: 'none',
-  color: 'rgba(0, 0, 0, 0.298039)'
-};
-
 @observer
 export default class OptionsStep extends Component {
   static propTypes = {
@@ -69,17 +59,20 @@ export default class OptionsStep extends Component {
     return (
       <div className={ styles.body }>
         <Form>
-          <div style={ FUND_ACCCOUNT_FROM }>
+          <Dropdown
+            className={ styles.coinselector }
+            hint={
+              <FormattedMessage
+                id='shapeshift.optionsStep.typeSelect.hint'
+                defaultMessage='the type of crypto conversion to do'
+              />
+            }
+            label={
               <FormattedMessage
                 id='shapeshift.optionsStep.typeSelect.label'
                 defaultMessage='Fund account from'
               />
-          </div>
+            }
-          <Dropdown
-            placeholder='Choose a crypto-currency'
-            fluid
-            search
-            selection
             options={ coins }
             onChange={ this.onSelectCoin }
             value={ coinSymbol }
@@ -126,9 +119,9 @@ export default class OptionsStep extends Component {
     const { image, name, symbol } = coin;
 
     return {
-      image: image,
+      image,
-      value: symbol,
+      text: name,
-      text: name
+      value: symbol
     };
   }