Merge branch '0.1.2' of https://github.com/appiphony/appiphony-lightn…

…ing-js into 0.1.2 # By Victor Carreon # Via Victor Carreon * '0.1.2' of https://github.com/appiphony/appiphony-lightning-js: Ember Modals documentation Ember Modals - adding 'show' as a method for $.modal calls Ember Notifications - added support to customize classes that get applied to the sods-notify div Ember Tabs - updated classes that are applied to template markup to comply with SLDS 0.12.0
appiphony · Nov 20, 2015 · 7961ac9 · 7961ac9
2 parents 87d5228 + a9c9330
commit 7961ac9
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 9 deletions.
diff --git a/aljs-ember-app/templates/_modalsEmber.hbs b/aljs-ember-app/templates/_modalsEmber.hbs
@@ -133,6 +133,12 @@
 	                    <td data-label="Values">Any custom class names</td>
 	                    <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
 	                </tr>
+                    <tr>
+                        <th scope="row"><code>hasCustomCloseButton</code></th>
+                        <td data-label="Purpose">Added this attribute if you want to use custom markup for the modal's close button</td>
+                        <td data-label="Values"><code>"true"</code>, do not use when false</td>
+                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
+                    </tr>
 	            </tbody>
 	        </table>
 	    </div>

diff --git a/dist/ember_components/ember.aljs-modal.js b/dist/ember_components/ember.aljs-modal.js
@@ -63,7 +63,8 @@ _AljsApp.AljsModalComponent = Ember.Component.extend(Ember.Evented, {
 
             $('body').on('click.' + modalId, '[data-aljs-show="' + modalId + '"]', this, this.openModal);
 
-            this.$().find('.slds-modal').on('dismiss.' + modalId, this, this.closeModal);
+            this.$().find('.slds-modal').on('dismiss.' + modalId, this, this.closeModal)
+                                        .on('show.' + modalId, this, this.openModal);
         });
     },
     willDestroyElement: function() {

diff --git a/dist/ember_components/ember.aljs-notification.js b/dist/ember_components/ember.aljs-notification.js
@@ -7,6 +7,9 @@ _AljsApp.AljsNotificationComponent = Ember.Component.extend({
     	var $el = this.$();
     	var dismissClass = this.get('dismissClass');
 
+        this.$().find('.slds-notify').addClass(this.get('class'));
+        this.$().attr('class', '');
+
     	if (!Ember.isEmpty(dismissClass)) {
     		$el.find('.' + dismissClass).one('click', function(e) {
     			$el.addClass('slds-hide');

diff --git a/dist/ember_components/ember.aljs-simple-tabs.js b/dist/ember_components/ember.aljs-simple-tabs.js
@@ -11,6 +11,22 @@ _AljsApp.AljsSimpleTabsComponent = Ember.Component.extend({
 
         return !Ember.isEmpty(sldsTabsClass) ? sldsTabsClass[0] + '__nav' : null;
     }.property(),
+    sldsTabsItemClass: function() {
+        var classes = this.get('classNames');
+        var sldsTabsClass = classes.filter(function(className) {
+            return !Ember.isEmpty(className.match('slds-tabs'));
+        });
+
+        return !Ember.isEmpty(sldsTabsClass) ? sldsTabsClass[0] + '__item slds-text-heading--label' : null;
+    }.property(),
+    sldsTabsLinkClass: function() {
+        var classes = this.get('classNames');
+        var sldsTabsClass = classes.filter(function(className) {
+            return !Ember.isEmpty(className.match('slds-tabs'));
+        });
+
+        return !Ember.isEmpty(sldsTabsClass) ? sldsTabsClass[0] + '__link' : null;
+    }.property(),
     tabLinks: function() {
         var activeTabIndex = this.get('activeTabIndex');
         return this.get('tabObjects').map(function(tab, index) {

diff --git a/dist/ember_components/templates/components/aljs-modal.hbs b/dist/ember_components/templates/components/aljs-modal.hbs
@@ -2,12 +2,14 @@
 	<div class="slds-modal__container">
 		<div class="slds-modal__header" data-qa-container="modalHeader">
             <headerYield></headerYield>
-            <button class="slds-button slds-modal__close slds-button--icon-inverse" data-aljs-dismiss="{{unbound modalId}}">
-                <svg aria-hidden="true" class="slds-button__icon slds-button__icon--inverse slds-button__icon--large">
-                    <use xlink:href="{{unbound assetsLocation}}/assets/icons/action-sprite/svg/symbols.svg#close"></use>
-                </svg>
-                <span class="slds-assistive-text">Close</span>
-            </button>
+            {{#unless hasCustomCloseButton}}
+                <button class="slds-button slds-modal__close slds-button--icon-inverse" data-aljs-dismiss="{{unbound modalId}}" data-qa-button="closeModal">
+                    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--inverse slds-button__icon--large">
+                        <use xlink:href="{{unbound assetsLocation}}/assets/icons/action-sprite/svg/symbols.svg#close"></use>
+                    </svg>
+                    <span class="slds-assistive-text">Close</span>
+                </button>
+            {{/unless}}
         </div>
         <div class="slds-modal__content">
             <div data-qa-container="modalBody">
@@ -20,4 +22,4 @@
 		{{yield}}
 	</div>
 </div>
-<div {{bind-attr class=":slds-backdrop isModalOpen:slds-backdrop--open"}}></div>
+<div {{bind-attr class=":slds-modal-backdrop isModalOpen:slds-modal-backdrop--open"}}></div>
diff --git a/dist/ember_components/templates/components/aljs-simple-tabs.hbs b/dist/ember_components/templates/components/aljs-simple-tabs.hbs
@@ -1,6 +1,6 @@
 <ul {{bind-attr class="sldsTabsNavClass"}} role="tablist">
 	{{#each tabLink in tabLinks}}
-		<li {{bind-attr class=":slds-tabs__item :slds-text-heading--label tabLink.isActive:slds-active" title="tabLink.label" tabindex="tabLink.index"}} role="presentation" {{action "clickTab" tabLink}}><a href="#" role="tab" {{bind-attr aria-selected="tabLink.isActive:true:false" aria-controls="tabLink.partialId"}}>{{tabLink.label}}</a></li>
+		<li {{bind-attr class="sldsTabsItemClass tabLink.isActive:slds-active" title="tabLink.label" tabindex="tabLink.index"}} role="presentation" {{action "clickTab" tabLink}}><a {{bind-attr class="sldsTabsLinkClass"}} href="#" role="tab" {{bind-attr aria-selected="tabLink.isActive:true:false" aria-controls="tabLink.partialId"}}>{{tabLink.label}}</a></li>
 	{{/each}}
 </ul>
 <div class="slds-tabs__content" role="tabpanel">