feat(dropdown): Added width attribute

Author: fragsalat

demo/demo_app.js

@@ -46,7 +46,7 @@ render(
       <WSWeekPicker onChange={({year, week}) => console.log('New week selected:', week)}/>
       <br />
       <br />
-      <WSDropdown text="Multiple" type="button" placeholder="Filter values.." filterable multiple items={[
+      <WSDropdown text="Multiple" type="button" width="500px" placeholder="Filter values.." filterable multiple items={[
         'New',
         'New From Template',
         'Open',
@@ -77,7 +77,7 @@ render(
         'Save'
       ]}/>
       <br />
-      <WSDropdown text="Input" type="select" placeholder="tasd" value="222" inputOnly/>
+      <WSDropdown text="Input" type="select" width="50%" placeholder="tasd" value="222" inputOnly/>
       <br />
       <WSNotification />
       <br />

doc/components/dropdown.md

@@ -46,54 +46,33 @@ An item can be either a simple string or a object containing the following keys:
  - **disabled**: boolean |adds the class .is-disabled to the item
  - **className**: string | classes which get's added to the item</li></ul>
 
-<<<<<<< HEAD
 **Value**:
-=======
-**Value**: 
->>>>>>> master
 You can pass an item as value to the dropdown and it will mark the specific item as selected for you.
 The value you can pass into the dropdown differs from the combination of tags you choose.
 When you specify the `multiple="1"` flag, the value can be a dropdown item or a list of dropdown items.
 In case you specify the `input-only="1"` flag the value must be a simple string!
-<<<<<<< HEAD
-Are those two flags not specified the value can be a dropdown item represented as an object or just it's value as a string.
-=======
 Are those two flags not specified the value can be a dropdown item represented as an object or just it's value as a string. 
->>>>>>> master
 
 ## Simple dropdown menu
 The simple dropdown menu only contains one level of menu items and provides the ability to select only one item at the same time.
 All changes are propagated via a custom change event which contains the selected item.
 
 <ws-dropdown items.bind='["Item 1", "Item 2", "Item 3"]' text="Click me" change.delegate="log('dd1 changed', $event)"></ws-dropdown>
 ```html
-<<<<<<< HEAD
-<ws-dropdown
-  items='["Item 1", "Item 2", "Item 3"]'
-=======
 <ws-dropdown 
-  items='["Item 1", "Item 2", "Item 3"]' 
->>>>>>> master
+  items='["Item 1", "Item 2", "Item 3"]'
   text="Click me">
 </ws-dropdown>
 ```
 
 ## Hierarchical dropdown menu
 Sometimes not everything fits into one menu and we have to group our items and create a hierarchical menu.
-<<<<<<< HEAD
-This happens quite often on page headers or context menu's (right click). To create a hierarchical menu you
-=======
 This happens quite often on page headers or context menu's (right click). To create a hierarchical menu you 
->>>>>>> master
 just have to add the children for the dropdown item as you want.
 
 <ws-dropdown items.bind='["Item 1", {"label": "Item 2", "children": ["Item 2.1", {"label": "Item 2.2", "children": ["Item 2.2.1", "Item 2.2.2", "Item 2.2.3", "Item 2.2.4"]}]}, "Item 3"]' text="Click me" change.delegate="log('dd1 changed', $event)"></ws-dropdown>
 ```html
-<<<<<<< HEAD
-<ws-dropdown
-=======
 <ws-dropdown 
->>>>>>> master
   items='["Item 1", {"label": "Item 2", "children": ["Item 2.1", {"label": "Item 2.2", "children": ["Item 2.2.1", "Item 2.2.2", "Item 2.2.3", "Item 2.2.4"]}]}, "Item 3"]'
   text="Click me">
 </ws-dropdown>
@@ -121,17 +100,10 @@ interpreted as false.
 <ws-dropdown items.bind='["Item 1", "Item 2", "Item 3"]' value="Item 2" multiple="1" text="Select a value" type="select" style="display: inline-block; width: 150px"></ws-dropdown>
 ```html
 <ws-dropdown
-<<<<<<< HEAD
-  items='["Item 1", "Item 2", "Item 3"]'
-  value="Item 2"
-  text="Select a value"
-  multiple="1"
-=======
   items='["Item 1", "Item 2", "Item 3"]' 
   value="Item 2"
   text="Select a value"
   multiple="1" 
->>>>>>> master
   type="select">
 </ws-dropdown>
 ```
@@ -146,21 +118,12 @@ the default filter with the attribute `filter="blue"` and the maximum amount of
 <ws-dropdown items.bind='["Car (Blue)", "Car (Red)", "Car (Orange)", "Bus (Blue)", "Bus (Red)", "Bus (Orange)", "Yet (Blue)", "Yet (Red)", "Yet (Orange)"]' filterable="1" filter="blue" limit="7" text="Select a value" type="select" style="display: inline-block; width: 150px"></ws-dropdown>
 ```html
 <ws-dropdown
-<<<<<<< HEAD
-  items.bind='["Car (Blue)", "Car (Red)", "Car (Orange)", "Bus (Blue)", "Bus (Red)", "Bus (Orange)", "Yet (Blue)", "Yet (Red)", "Yet (Orange)"]'
-  filterable="1"
-  filter="blue"
-  limit="7"
-  text="Select a value"
-  type="select"
-=======
   items.bind='["Car (Blue)", "Car (Red)", "Car (Orange)", "Bus (Blue)", "Bus (Red)", "Bus (Orange)", "Yet (Blue)", "Yet (Red)", "Yet (Orange)"]' 
   filterable="1" 
   filter="blue" 
   limit="7"
   text="Select a value" 
   type="select" 
->>>>>>> master
   style="display: inline-block; width: 150px">
 </ws-dropdown>
 ```
@@ -174,24 +137,27 @@ the `value` attribute also the `placeholder` attribute to set the placeholder fo
 
 <ws-dropdown type="button" text="Click me" placeholder="Insert a text" value="Default value" input-only="1"></ws-dropdown>
 ```html
-<<<<<<< HEAD
-<ws-dropdown
+<ws-dropdown 
   type="button"
   text="Click me"
-  placeholder="Insert a text"
-  value="Default value"
+  placeholder="Insert a text" 
+  value="Default value" 
   input-only="1">
 </ws-dropdown>
 ```
 
-=======
-<ws-dropdown 
-  type="button"
+## Custom width
+Per default the dropdown has a width of 200px when the type is not select. For those select dropdown elements the default
+width is 100%. This means the dropdown is as wide as the select box. To change the width you can add the attribute
+`width` and give it a pixel, percent or any size value.
+
+<ws-dropdown items.bind='["Item 1", "Item 2", "Item 3"]' text="Click me" type="button" width="500px"></ws-dropdown>
+```html
+<ws-dropdown
+  items='["Item 1", "Item 2", "Item 3"]' 
   text="Click me"
-  placeholder="Insert a text" 
-  value="Default value" 
-  input-only="1">
+  type="button"
+  width="500px">
 </ws-dropdown>
 ```
 
->>>>>>> master

src/ws-dropdown/ws-dropdown.js

@@ -40,6 +40,7 @@ export class WSDropdown extends Component {
     limit: 10,
     orientation: 'left',
     placeholder: '',
+    width: '',
     value: null,
     onChange: () => {},
     disabled: false
@@ -60,6 +61,7 @@ export class WSDropdown extends Component {
     limit: PropTypes.number,
     orientation: PropTypes.oneOf(['left', 'right']),
     placeholder: PropTypes.string,
+    width: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
     onChange: PropTypes.func,
     disabled: PropTypes.bool
@@ -388,12 +390,13 @@ export class WSDropdown extends Component {
    * @returns {Object}
    */
   render() {
-    const isWide = this.props.type === 'select' ? 'mod-wide' : '';
+    const isWide = this.props.type === 'select';
     return (
       <div className="dropdown" ref={element => { if (element) { this.element = element; } }}>
         {this.renderTrigger()}
         <div
-          className={`dropdown-container ${this.props.orientation} ${isWide}`}
+          className={`dropdown-container ${this.props.orientation}`}
+          style={{width: this.props.width || (isWide ? '100%' : 'auto')}}
           ref={element => { if (element) { this.dropdownContainer = element; } }}
         >
           {this.renderContent()}