New property "label"

components/dropdown/index.cjsx

@@ -1,5 +1,8 @@
 ###
 @todo
+
+- Disable options
+- can set a icon like dispatcher
 ###
 
 require './style'
@@ -12,6 +15,7 @@ module.exports = React.createClass
     className   : React.PropTypes.string
     dataSource  : React.PropTypes.object
     value       : React.PropTypes.string
+    label       : React.PropTypes.string
 
   getDefaultProps: ->
     type        : "normal"
@@ -34,10 +38,11 @@ module.exports = React.createClass
     className = @props.className
     if @state.active is true
       className += " active"
-      stylesheet = height: @getDOMNode().offsetHeight * Object.keys(@props.dataSource).length
-    <div data-component-dropdown={@props.type}
-         className={className}>
-      <span onClick={@onSelect}>{@props.dataSource[@state.value]}</span>
+      stylesheet = height: @refs.value.getDOMNode().offsetHeight * Object.keys(@props.dataSource).length
+
+    <div data-component-dropdown={@props.type} className={className}>
+      { <label>{@props.label}</label> if @props.label }
+      <span ref="value" onClick={@onSelect}>{@props.dataSource[@state.value]}</span>
       <ul onClick={@onItem} style={stylesheet}>
       {
         for key, label of @props.dataSource

components/dropdown/style.styl

@@ -3,7 +3,7 @@
 [data-component-dropdown]
   position                        : relative
   margin-bottom                   : SPACE
-  height                          : INPUT_HEIGHT
+  // height                          : INPUT_HEIGHT
   width                           : inherit
   color                           : COLOR
   border-bottom                   : 1px solid lighten(COLOR, 75%)
@@ -28,8 +28,14 @@
   // -- Children
   > *
     width                         : 100%
+  > label
+    position                      : relative
+    bottom                        : -(SPACE / 4)
+    font-size                     : FONT_SIZE_TINY
+    color                         : THEME
   > span
     display                       : block
+    height                        : INPUT_HEIGHT
     line-height                   : INPUT_HEIGHT
     font-size                     : FONT_SIZE_NORMAL
     transition-property             opacity, transform
@@ -40,7 +46,7 @@
       position                    : absolute
       content                     : ""
       right                       : (SPACE / 2)
-      top                         : SPACE
+      bottom                      : SPACE
       width                       : 0
       height                      : 0
       border-left                 : BORDER = SIZE solid transparent

spec/components/dropdown.cjsx

@@ -29,7 +29,7 @@ module.exports = React.createClass
     <section>
       <h2>Dropdown</h2>
       <p>lorem ipsum...</p>
-      <Dropdown ref="dropdown" dataSource={@state.countries_obj} />
+      <Dropdown ref="dropdown" dataSource={@state.countries_obj} label="Countries"/>
       <Dropdown ref="dropdown" dataSource={@state.countries_obj}
                 value={countries_obj_selected} />
     </section>