Merge pull request #178 from yapplabs/deprecate-kebab-case

Use camelCase properties, deprecate public kebab case properties

README.md

@@ -87,11 +87,11 @@ Property              | Purpose
 `onClickOverlay`      | An action to be called when the overlay is clicked. This action will be called instead of closing the modal when the overlay is clicked.
 `attachment`          | A string of the form 'vert-attachment horiz-attachment', e.g. `'middle left'` (see "Positioning" section below)
 `targetAttachment`    | A string of the form 'vert-attachment horiz-attachment', e.g. `'middle left'` (see "Positioning" section below)
-`container-class`     | CSS class name(s) to append to container divs. Set this from template.
+`containerClass`     | CSS class name(s) to append to container divs. Set this from template.
 `containerClassNames` | CSS class names to append to container divs. This is a concatenated property, so it does **not** replace the default container class (default: `'ember-modal-dialog'`. If you subclass this component, you may define this in your subclass.)
-`overlay-class`       | CSS class name(s) to append to overlay divs. Set this from template.
+`overlayClass`       | CSS class name(s) to append to overlay divs. Set this from template.
 `overlayClassNames`   | CSS class names to append to overlay divs. This is a concatenated property, so it does **not** replace the default overlay class (default: `'ember-modal-overlay'`. If you subclass this component, you may define this in your subclass.)
-`wrapper-class`       | CSS class name(s) to append to wrapper divs. Set this from template.
+`wrapperClass`       | CSS class name(s) to append to wrapper divs. Set this from template.
 `wrapperClassNames`   | CSS class names to append to wrapper divs. This is a concatenated property, so it does **not** replace the default container class (default: `'ember-modal-wrapper'`. If you subclass this component, you may define this in your subclass.)
 
 ### tether-dialog

addon/components/modal-dialog.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import layout from '../templates/components/modal-dialog';
+import { deprecate } from '@ember/debug';
 
 const { dasherize } = Ember.String;
 const { $, computed, guidFor, inject } = Ember;
@@ -17,15 +18,54 @@ export default Ember.Component.extend({
   modalService: inject.service('modal-dialog'),
   destinationElementId: oneWay('modalService.destinationElementId'),
 
-  // container-class - set this from templates
+  // containerClass - set this from templates
+  "container-class": computed('containerClass', {
+    get() {
+      return this.get('containerClass');
+    },
+    set(key, value) {
+      deprecate(
+        'Passing `container-class` (kebab-case) is deprecated in favor of `containerClass` (camelCase). Will be removed in 3.0.0.',
+        false,
+        { id: 'ember-modal-dialog.kebab-props', until: '3.0.0' }
+      );
+      this.set('containerClass', value);
+    },
+  }),
   containerClassNames: ['ember-modal-dialog'], // set this in a subclass definition
   containerClassNamesString: computedJoin('containerClassNames'),
 
-  // 'overlay-class - set this from templates
+  // overlayClass - set this from templates
+  "overlay-class": computed('overlayClass', {
+    get() {
+      return this.get('overlayClass');
+    },
+    set(key, value) {
+      deprecate(
+        'Passing `overlay-class` (kebab-case) is deprecated in favor of `overlayClass` (camelCase). Will be removed in 3.0.0.',
+        false,
+        { id: 'ember-modal-dialog.kebab-props', until: '3.0.0' }
+      );
+      this.set('overlayClass', value);
+    },
+  }),
   overlayClassNames: ['ember-modal-overlay'], // set this in a subclass definition
   overlayClassNamesString: computedJoin('overlayClassNames'),
 
-  // 'wrapper-class - set this from templates
+  // wrapperClass - set this from templates
+  "wrapper-class": computed('wrapperClass', {
+    get() {
+      return this.get('wrapperClass');
+    },
+    set(key, value) {
+      deprecate(
+        'Passing `wrapper-class` (kebab-case) is deprecated in favor of `wrapperClass` (camelCase). Will be removed in 3.0.0.',
+        false,
+        { id: 'ember-modal-dialog.kebab-props', until: '3.0.0' }
+      );
+      this.set('wrapperClass', value);
+    },
+  }),
   wrapperClassNames: ['ember-modal-wrapper'], // set this in a subclass definition
   wrapperClassNamesString: computedJoin('wrapperClassNames'),
 

addon/templates/components/modal-dialog.hbs

@@ -1,10 +1,10 @@
 {{#ember-wormhole to=destinationElementId renderInPlace=renderInPlace}}
-  <div class="{{wrapperClassNamesString}} {{wrapper-class}}">
+  <div class="{{wrapperClassNamesString}} {{wrapperClass}}">
     {{#modal-dialog-overlay
-        classNameBindings='overlayClassNamesString translucentOverlay:translucent overlay-class'
+        classNameBindings='overlayClassNamesString translucentOverlay:translucent overlayClass'
         action='clickedOverlay'
     }}
-      {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString targetAttachmentClass container-class"
+      {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString targetAttachmentClass containerClass"
           targetAttachment=targetAttachment
           target=target
       }}

addon/templates/components/tether-dialog.hbs

@@ -1,21 +1,21 @@
 {{#ember-wormhole to=destinationElementId renderInPlace=renderInPlace}}
   {{#if hasOverlay}}
     {{modal-dialog-overlay
-        classNameBindings='overlayClassNamesString translucentOverlay:translucent overlay-class'
+        classNameBindings='overlayClassNamesString translucentOverlay:translucent overlayClass'
         action='clickedOverlay'
     }}
   {{/if}}
 {{/ember-wormhole}}
 {{#if renderInPlace}}
-  {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString targetAttachmentClass container-class"
+  {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString targetAttachmentClass containerClass"
       targetAttachment=targetAttachment
       target=target
       renderInPlace=renderInPlace
   }}
     {{yield}}
   {{/ember-modal-dialog-positioned-container}}
 {{else}}
-  {{#ember-tether classNameBindings="containerClassNamesString container-class"
+  {{#ember-tether classNameBindings="containerClassNamesString containerClass"
       target=target
       attachment=attachment
       targetAttachment=targetAttachment

tests/acceptance/modal-dialog-test.js

@@ -78,7 +78,7 @@ test('modal with custom styles', function(assert) {
     dialogText: 'Custom Styles',
     closeSelector: overlaySelector,
     whileOpen() {
-      assert.ok(Ember.$(`${modalRootElementSelector} ${overlaySelector}`).hasClass('custom-styles-modal'), 'has provided overlay-class');
+      assert.ok(Ember.$(`${modalRootElementSelector} ${overlaySelector}`).hasClass('custom-styles-modal'), 'has provided overlayClass');
       assert.ok(Ember.$(`${modalRootElementSelector} ${dialogSelector}`).hasClass('custom-styles-modal-container'), 'has provided container-class');
     }
   });

tests/dummy/app/templates/-modal-dialog.hbs

@@ -55,8 +55,8 @@
     {{!-- BEGIN-SNIPPET custom-styles-modal-dialog --}}
     {{#modal-dialog close='toggleCustomStyles'
                     targetAttachment='none'
-                    container-class=customContainerClassNames
-                    overlay-class='custom-styles-modal' }}
+                    containerClass=customContainerClassNames
+                    overlayClass='custom-styles-modal' }}
       <h1>Stop! Modal Time!</h1>
       <p>Custom Styles</p>
       <button {{action 'toggleCustomStyles'}}>Close</button>
@@ -141,8 +141,8 @@
           close='toggleInPlace'
           renderInPlace=true
           targetAttachment='none'
-          container-class='ember-modal-dialog-in-place'
-          overlay-class='ember-modal-overlay-in-place'
+          containerClass='ember-modal-dialog-in-place'
+          overlayClass='ember-modal-overlay-in-place'
       }}
         <h1>Stop! Modal Time!</h1>
         <p>In Place</p>