Merge branch 'dev'

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+### v0.8.1 2016-08-17
+
+* When button components become active the css box-shadow is inset.
+
+* Change the OK button for alert and confirm modal dialog components to blue background with white text.
+
+* Use ButtonComponent instead of button elements in the built in model dialog components.
+
+
+
+
 ### v0.8.0 2016-06-18
 
 * [FEATURE] Use ember-wormhole to enable rendering the `ContextMenuComponent` to a specified DOM element.

addon/styles/ember-ui-components.css

@@ -71,9 +71,16 @@ button.uic-cancel-button[disabled]:hover,
 }
 button.uic-button:active,
 button.uic-ok-button:active,
+button.uic-cancel-button:active {
+  box-shadow: 1px 1px 1px #888 inset;
+}
+button.uic-button:active,
 button.uic-cancel-button:active {
   color: #000;
 }
+button.uic-ok-button:active {
+  color: #FFF;
+}
 button.uic-button.large {
   padding: 10px 30px;
   font-size: 1rem;
@@ -87,14 +94,16 @@ button.uic-button.extra-small {
   font-size: .6rem;
 }
 button.uic-button.blue,
-.uic-button-group.blue button.uic-button {
+.uic-button-group.blue button.uic-button,
+button.uic-ok-button {
   color: #fff;
   background: #388FFF;
   box-sizing: border-box;
   border: 1px solid transparent;
 }
 button.uic-button[disabled].blue,
-.uic-button-group.blue button.uic-button[disabled] {
+.uic-button-group.blue button.uic-button[disabled],
+button.uic-ok-button[disabled] {
   color: rgba(255, 255, 255, 0.5);
   background: rgba(56, 143, 255, 0.3);
 }

addon/templates/components/uic-modal-alert.hbs

@@ -5,5 +5,5 @@
   <p>{{dialog.body}}</p>
 {{/if}}
 <div class="uic-modal-button-container">
-  <button class="uic-ok-button" {{action "ok"}}>OK</button>
+  {{#uic-button class="uic-ok-button" action="ok"}}OK{{/uic-button}}
 </div>

addon/templates/components/uic-modal-confirm.hbs

@@ -5,6 +5,6 @@
   <p>{{dialog.body}}</p>
 {{/if}}
 <div class="uic-modal-button-container">
-  <button class="uic-cancel-button" {{action "cancel"}}>Cancel</button>
-  <button class="uic-ok-button" {{action "confirm"}}>OK</button>
+  {{#uic-button class="uic-cancel-button" action="cancel"}}Cancel{{/uic-button}}
+  {{#uic-button class="uic-ok-button" action="confirm"}}OK{{/uic-button}}
 </div>

addon/templates/components/uic-modal.hbs

@@ -3,5 +3,5 @@
 {{else}}
   <h2>{{dialog.title}}</h2>
   <p>{{dialog.body}}</p>
-  <button {{action 'closeModal'}}>Close</button>
+  {{#uic-button action='closeModal'}}Close{{/uic-button}}
 {{/if}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-ui-components",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A collection of common user interface components",
   "directories": {
     "doc": "doc",

tests/dummy/app/controllers/modal-dialog-component.js

@@ -14,7 +14,7 @@ export default Ember.Controller.extend({
       }).then(() => {
         this.set('result', 'Confirmed');
       }, () => {
-        this.set('result', 'Canceled');
+        this.set('result', 'Cancelled');
       });
     },
 

tests/unit/components/uic-modal-alert-test.js

@@ -2,7 +2,9 @@ import { moduleForComponent, test } from 'ember-qunit';
 import Ember from 'ember';
 
 moduleForComponent('uic-modal-alert', 'Unit | Component | uic modal alert', {
-  // needs: [],
+  needs: [
+    'component:uic-button'
+  ],
   unit: true
 });
 

tests/unit/components/uic-modal-confirm-test.js

@@ -2,7 +2,9 @@ import { moduleForComponent, test } from 'ember-qunit';
 import Ember from 'ember';
 
 moduleForComponent('uic-modal-confirm', 'Unit | Component | uic modal confirm', {
-  // needs: [],
+  needs: [
+    'component:uic-button'
+  ],
   unit: true
 });
 

tests/unit/components/uic-modal-dialog-test.js

@@ -6,7 +6,8 @@ const run = Ember.run;
 moduleForComponent('uic-modal-dialog', 'Unit | Component | uic modal dialog', {
   needs: [
     'component:uic-content-mask',
-    'component:uic-modal'
+    'component:uic-modal',
+    'component:uic-button'
   ],
   unit: true
 });

tests/unit/components/uic-modal-test.js

@@ -2,7 +2,9 @@ import { moduleForComponent, test } from 'ember-qunit';
 import Ember from 'ember';
 
 moduleForComponent('uic-modal', 'Unit | Component | uic modal', {
-  // needs: [],
+  needs: [
+    'component:uic-button'
+  ],
   unit: true
 });