Merge pull request #87 from sandersky/master

Add support for placeholder on frost-select
ciena-frost · Apr 29, 2016 · 4768446 · 4768446
2 parents 0759e9c + 69a2443
commit 4768446
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/addon/templates/components/frost-multi-select.hbs b/addon/templates/components/frost-multi-select.hbs
@@ -1,11 +1,12 @@
 <input
   class="trigger"
-  type="text"
-  value={{prompt}}
-  onFocus={{action 'onFocus'}}
+  disabled={{disableInput}}
   onBlur={{action 'onBlur'}}
+  onFocus={{action 'onFocus'}}
   onInput={{action 'onChange'}}
-  disabled={{disableInput}}
+  placeholder={{placeholder}}
+  type="text"
+  value={{prompt}}
 >
 
 <div class="down-arrow" onClick={{action 'onClickArrow'}}>

diff --git a/addon/templates/components/frost-select.hbs b/addon/templates/components/frost-select.hbs
@@ -5,6 +5,7 @@
   onFocus={{action 'onFocus'}}
   onBlur={{action 'onBlur'}}
   onInput={{action 'onChange'}}
+  placeholder={{placeholder}}
   type="text"
   value={{prompt}}
 >

diff --git a/frost-select.md b/frost-select.md
@@ -15,6 +15,7 @@
 |    | | `true` | sets select component to error state |
 | `onChange`     | `string` | `<action-name>` | The action callback to call when the value of the select component changes |
 | `onInput`      | `string` | `<action-name>` | The action callback to call when the value of the filter changes as the user types |
+| `placeholder` | `string` | | Placeholder text for when nothing is selected. |
 
 
 ## Examples

diff --git a/tests/dummy/app/pods/select/template.hbs b/tests/dummy/app/pods/select/template.hbs
@@ -27,6 +27,24 @@
   <hr>
   <div class="section">
 
+    <div class="example">
+      <div class="title">placeholder</div>
+      <div class="demo">
+        {{frost-select
+          data=data
+          placeholder="Superhero"
+        }}
+      </div>
+      <div class="snippet">
+        {{format-markdown "```handlebars
+{{frost-select
+  data=data
+  placeholder='Superhero'
+}}
+```"}}
+      </div>
+    </div>
+
     <div class="example">
       <div class="title">selected</div>
       <div class="demo">
@@ -205,6 +223,24 @@
   <hr>
   <div class="section">
 
+    <div class="example">
+      <div class="title">placeholder</div>
+      <div class="demo">
+        {{frost-multi-select
+          data=data
+          placeholder="Superheroes"
+        }}
+      </div>
+      <div class="snippet">
+        {{format-markdown "```handlebars
+{{frost-multi-select
+  data=data
+  placeholder='Superheroes'
+}}
+```"}}
+      </div>
+    </div>
+
     <div class="example">
       <div class="title">selected</div>
       <div class="demo">

diff --git a/tests/integration/components/frost-select-test.js b/tests/integration/components/frost-select-test.js
@@ -8,10 +8,11 @@ import _ from 'lodash'
 import Ember from 'ember'
 
 const testTemplate = hbs`{{frost-select
-  onChange=onChange
   data=data
-  selected=selected
   greeting=greeting
+  onChange=onChange
+  placeholder=placeholder
+  selected=selected
   selectedValue=selVal
 }}`
 
@@ -56,6 +57,7 @@ describeComponent(
       props = {
         selected: 1,
         onChange: sinon.spy(),
+        placeholder: 'Select something already',
         data: [
           {
             value: 'Lex Diamond',
@@ -94,6 +96,7 @@ describeComponent(
         done()
       })
     })
+
     it('closes when down arrow clicked a second time', (done) => {
       this.$('.frost-select .down-arrow').click()
       this.$('.frost-select .down-arrow').click()
@@ -296,5 +299,10 @@ describeComponent(
         })
       })
     })
+
+    it('supports placeholder', function () {
+      const $input = this.$('.frost-select input')
+      expect($input.attr('placeholder')).to.eql('Select something already')
+    })
   }
 )