fix(callout): updated CSS when separator used

Adding `ms-Callout-action` class to buttons inside `uif-callout-actions` directive when `uif-action-text` or `uif-separator` used on main `uif-callout` directive. `ms-Callout-actionText` class is also added to `span` elements inside those buttons. Closes #122. Closes #146.
ngOfficeUIFabric · Feb 1, 2016 · 9d600a9 · 9d600a9
1 parent eca2abf
commit 9d600a9
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 
 #### Fixes
 - **uif-callout**: fixed regression introduced in Angular 1.4.9 (by @jjczopek; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139))
+- **uif-callout**: fixed CSS when separator used (by @jjczopek; closes [#122](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/122))
 - **uif-contextual-menu**: fixed regression introduced in Angular 1.4.9 (by @s-KaiNet; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139))
 - **uif-toggle**: fixed regression introduced in Angular 1.4.9 (by @rolandoldengarm; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139))
 - **uif-searchbox**: fixed regression introduced in Angular 1.4.9 (by @andrewconnell; closes [#139](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/139))

diff --git a/src/components/callout/calloutDirective.spec.ts b/src/components/callout/calloutDirective.spec.ts
@@ -528,7 +528,7 @@ describe('calloutDirectives:', () => {
       '<uif-callout-actions><a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a></uif-callout-actions>' +
       '</uif-callout>');
 
-      scope = $rootScope;
+      scope = $rootScope.$new();
       $compile(element)(scope);
       scope.$digest();
 
@@ -547,6 +547,75 @@ describe('calloutDirectives:', () => {
       expect(header[0].tagName === 'UIF-CALLOUT-HEADER').toBeTruthy();
     });
 
+    it('action buttons get proper CSS when uif-actiontext is used', inject(($compile: ng.ICompileService) => {
+      element = ng.element('<uif-callout uif-action-text>' +
+      '<uif-callout-actions>' +
+      '<button class="ms-Button ms-Button--command">' +
+      '<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>' +
+      '<span class="ms-Button-label">Save</span>' +
+      '</button>' +
+      '<button class="ms-Button ms-Button--command">' +
+      '<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--x"></i></span>' +
+      '<span class="ms-Button-label">Cancel</span>' +
+      '</button>' +
+      '</uif-callout-actions>' +
+      '</uif-callout>');
+
+      $compile(element)(scope);
+      scope.$digest();
+
+      element = jQuery(element[0]);
+
+      let buttons: JQuery = element.find('button.ms-Button');
+      expect(buttons.length).toBe(2);
+      // expect(buttons).toHaveClass('ms-Callout-action');
+
+      let firstButton: JQuery = buttons.eq(0);
+      let secondButton: JQuery = buttons.eq(1);
+
+      expect(firstButton).toHaveClass('ms-Callout-action');
+      expect(secondButton).toHaveClass('ms-Callout-action');
+
+
+      let firstButtonSpans: JQuery = firstButton.find('span');
+      expect(firstButtonSpans.length).toBe(2);
+      expect(firstButtonSpans).toHaveClass('ms-Callout-actionText');
+
+      let secondButtonSpans: JQuery = secondButton.find('span');
+      expect(secondButtonSpans.length).toBe(2);
+      expect(secondButtonSpans).toHaveClass('ms-Callout-actionText');
+    }));
+
+    it('action links get proper CSS when uif-actiontext is used', inject(($compile: ng.ICompileService) => {
+      element = ng.element('<uif-callout uif-action-text>' +
+      '<uif-callout-actions>' +
+      '<a class="ms-Button ms-Button--command">' +
+      '<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--x"></i></span>' +
+      '<span class="ms-Button-label">Cancel</span>' +
+      '</a>' +
+      '</uif-callout-actions>' +
+      '</uif-callout>');
+
+      $compile(element)(scope);
+      scope.$digest();
+
+      element = jQuery(element[0]);
+
+      let actions: JQuery = element.find('a');
+      expect(actions.length).toBe(1);
+      // expect(buttons).toHaveClass('ms-Callout-action');
+
+      let firstAction: JQuery = actions.eq(0);
+
+      expect(firstAction).toHaveClass('ms-Callout-action');
+
+      let firstActionSpans: JQuery = firstAction.find('span');
+      expect(firstActionSpans.length).toBe(2);
+      expect(firstActionSpans).toHaveClass('ms-Callout-actionText');
+
+    }));
+
+
   });
 
 });

diff --git a/src/components/callout/calloutDirective.ts b/src/components/callout/calloutDirective.ts
@@ -17,8 +17,8 @@ import {CalloutArrow} from './calloutArrowEnum';
  *
  */
 export class CalloutController {
-  public static $inject: string[] = ['$log'];
-  constructor(public $log: ng.ILogService) { }
+  public static $inject: string[] = ['$scope', '$log'];
+  constructor(public $scope: ICalloutScope, public $log: ng.ILogService) { }
 }
 
 /**
@@ -115,12 +115,45 @@ export class CalloutActionsDirective implements ng.IDirective {
   public replace: boolean = false;
   public scope: boolean = false;
   public template: string = '<div class="ms-Callout-actions" ng-transclude></div>';
+  public require: string = '^?uifCallout';
 
   public static factory(): ng.IDirectiveFactory {
     const directive: ng.IDirectiveFactory = () => new CalloutActionsDirective();
     return directive;
   }
 
+  public link(scope: ICalloutScope, instanceElement: ng.IAugmentedJQuery, attrs: any, calloutController: CalloutController): void {
+
+    if (ng.isObject(calloutController)) {
+      calloutController.$scope.$watch('hasSeparator', (hasSeparator: boolean) => {
+        let actionChildren: JQuery = instanceElement.children().eq(0).children();
+
+        for (let buttonIndex: number = 0; buttonIndex < actionChildren.length; buttonIndex++) {
+          let action: JQuery = actionChildren.eq(buttonIndex);
+          // handle CSS on button
+          if (hasSeparator) {
+            action.addClass('ms-Callout-action');
+          } else {
+            action.removeClass('ms-Callout-action');
+          }
+
+          // take care of span inside buttons
+          let actionSpans: JQuery = action.find('span');
+
+          for (let spanIndex: number = 0; spanIndex < actionSpans.length; spanIndex++) {
+            let actionSpan: JQuery = actionSpans.eq(spanIndex);
+
+            if (hasSeparator) {
+              actionSpan.addClass('ms-Callout-actionText');
+            } else {
+              actionSpan.removeClass('ms-Callout-actionText');
+            }
+          }
+        }
+      });
+    }
+  }
+
 }
 
 /**

diff --git a/src/components/callout/demo/index.html b/src/components/callout/demo/index.html
@@ -120,13 +120,13 @@ <h1 class="ms-font-su">Callout Demo | &lt;uif-callout&gt;</h1>
     &lt;uif-callout-header&gt;All of your favorite people&lt;/uif-callout-header&gt;
     &lt;uif-callout-content&gt;People automatically puts together all of the people you care most about in one place.&lt;/uif-callout-header&gt;
     &lt;uif-callout-actions&gt;
-      &lt;button class=&quot;ms-Callout-action ms-Button ms-Button--command&quot;&gt;
-        &lt;span class=&quot;ms-Callout-actionText ms-Button-icon&quot;&gt;&lt;i class=&quot;ms-Icon ms-Icon--check&quot;&gt;&lt;/i&gt;&lt;/span&gt;
+      &lt;button class=&quot;ms-Button ms-Button--command&quot;&gt;
+        &lt;span class=&quot;ms-Button-icon&quot;&gt;&lt;i class=&quot;ms-Icon ms-Icon--check&quot;&gt;&lt;/i&gt;&lt;/span&gt;
         &lt;span class=&quot;ms-Button-label&quot;&gt;Save&lt;/span&gt;
       &lt;/button&gt;
-      &lt;button class=&quot;ms-Callout-action ms-Button ms-Button--command&quot;&gt;
+      &lt;button class=&quot;ms-Button ms-Button--command&quot;&gt;
         &lt;span class=&quot;ms-Button-icon&quot;&gt;&lt;i class=&quot;ms-Icon ms-Icon--x&quot;&gt;&lt;/i&gt;&lt;/span&gt;
-        &lt;span class=&quot;ms-Callout-actionText ms-Button-label&quot;&gt;Cancel&lt;/span&gt;
+        &lt;span class=&quot;ms-Button-label&quot;&gt;Cancel&lt;/span&gt;
       &lt;/button&gt;
     &lt;/uif-callout-actions&gt;
   &lt;/uif-callout&gt;
@@ -138,13 +138,13 @@ <h1 class="ms-font-su">Callout Demo | &lt;uif-callout&gt;</h1>
         <uif-callout-header>All of your favorite people</uif-callout-header>
         <uif-callout-content>People automatically puts together all of the people you care most about in one place.</uif-callout-header>
         <uif-callout-actions>
-          <button class="ms-Callout-action ms-Button ms-Button--command">
-            <span class="ms-Callout-actionText ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>
+          <button class="ms-Button ms-Button--command">
+            <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--check"></i></span>
             <span class="ms-Button-label">Save</span>
           </button>
-          <button class="ms-Callout-action ms-Button ms-Button--command">
+          <button class="ms-Button ms-Button--command">
             <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--x"></i></span>
-            <span class="ms-Callout-actionText ms-Button-label">Cancel</span>
+            <span class="ms-Button-label">Cancel</span>
           </button>
         </uif-callout-actions>
       </uif-callout>