From 5e68d59881ab3272bf14dee7f4833edbfc67a829 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Tue, 28 Apr 2015 13:38:52 -0400
Subject: [PATCH] Add a css class to the positioned div of the form
 `ember-modal-dialog-[alignment]`, to make applying css based on alignment
 easier.

---
 addon/components/modal-dialog.js            | 8 ++++++++
 addon/templates/components/modal-dialog.hbs | 2 +-
 tests/acceptance/modal-dialogs-test.js      | 5 ++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/addon/components/modal-dialog.js b/addon/components/modal-dialog.js
index 053e76b3..126982b1 100644
--- a/addon/components/modal-dialog.js
+++ b/addon/components/modal-dialog.js
@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import template from '../templates/components/modal-dialog';
+var dasherize = Ember.String.dasherize;
 
 var computed = Ember.computed;
 var computedJoin = function(prop) {
@@ -23,6 +24,13 @@ export default Ember.Component.extend({
 
   concatenatedProperties: ['containerClassNames', 'overlayClassNames'],
 
+  alignmentClass: computed('alignment', function(){
+    var alignment = this.get('alignment');
+    if (alignment) {
+      return `ember-modal-dialog-${dasherize(alignment)}`;
+    }
+  }),
+
   destinationElementId: null, // injected
   alignmentTarget: null, // view instance, passed in
   alignment: 'center', // passed in
diff --git a/addon/templates/components/modal-dialog.hbs b/addon/templates/components/modal-dialog.hbs
index 452e603b..deb88ef9 100644
--- a/addon/templates/components/modal-dialog.hbs
+++ b/addon/templates/components/modal-dialog.hbs
@@ -2,7 +2,7 @@
   {{#if hasOverlay}}
     <div {{bind-attr class="overlayClassNamesString translucentOverlay:translucent overlay-class"}} {{action 'close'}}></div>
   {{/if}}
-  {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString container-class"
+  {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString alignmentClass container-class"
                                 alignment=alignment
                                 alignmentTarget=alignmentTarget}}
     {{yield}}
diff --git a/tests/acceptance/modal-dialogs-test.js b/tests/acceptance/modal-dialogs-test.js
index 650cc49a..a5a43c8a 100644
--- a/tests/acceptance/modal-dialogs-test.js
+++ b/tests/acceptance/modal-dialogs-test.js
@@ -116,7 +116,10 @@ test('opening and closing modals', function(assert) {
     openSelector: '#example-alignment-target-selector button',
     dialogText: 'Alignment Target - Selector',
     closeSelector: dialogCloseButton,
-    hasOverlay: false
+    hasOverlay: false,
+    whileOpen: function(){
+      assert.ok(Ember.$(`${modalRootElementSelector} ${dialogSelector}`).hasClass('ember-modal-dialog-right'), 'has alignment class name');
+    }
   });
 
   assert.dialogOpensAndCloses({