CSS classes (#119)

* ✨ Allow custom CSS classes to be added to notification component Fixes #118 * 📚 Updating dummy app, docs
mansona · Nov 7, 2016 · 0d4826d · 0d4826d
1 parent 8950780
commit 0d4826d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/addon/components/notification-message.js b/addon/components/notification-message.js
@@ -14,6 +14,10 @@ export default Component.extend({
     'processedType'
   ],
 
+  classNameBindings: [
+    'notification.cssClasses'
+  ],
+
   paused: false,
 
   dismissClass: computed('notification.dismiss', function() {

diff --git a/addon/services/notification-messages-service.js b/addon/services/notification-messages-service.js
@@ -20,7 +20,8 @@ export default Ember.ArrayProxy.extend({
             autoClear: (Ember.isEmpty(options.autoClear) ? this.get('defaultAutoClear') : options.autoClear),
             clearDuration: options.clearDuration || this.get('defaultClearDuration'),
             onClick: options.onClick,
-            htmlContent: options.htmlContent || false
+            htmlContent: options.htmlContent || false,
+            cssClasses: options.cssClasses
         });
 
         this.pushObject(notification);

diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
@@ -10,6 +10,7 @@ export default Controller.extend({
   clearDuration: 2400,
   htmlContent: false,
   position: 'top',
+  cssClasses: 'profile-saved-success-notification',
 
   notifications: service('notification-messages'),
 
@@ -27,6 +28,7 @@ export default Controller.extend({
         this.get('notifications').clearAll();
       }
       this.get('notifications').addNotification({
+        cssClasses: this.get('cssClasses'),
         message: this.get('computedMessage'),
         type: this.get('type'),
         autoClear: this.get('autoClear'),

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -198,6 +198,17 @@ this.get('notifications').success('Saved successfully!', {
       <button class="btn btn-primary" {{action "showNotifcation"}}>Show</button>
     </div>
   </div>
+  <div class="py2">
+    <h2>Notification with custom CSS</h2>
+    <hr>
+    <p>Pass a string of CSS classes to the notification component.</p>
+    {{#themed-syntax lang="js" theme="dark" class="h5" withBuffers=false}}
+this.get('notifications').success('Saved successfully!', {
+  autoClear: true,
+  cssClasses: 'profile-saved-success-notification'
+});
+    {{/themed-syntax}}
+  </div>
   <div class="py2">
     <h2>Notification with callback</h2>
     <hr>