From 95dba71565cdb740688f925786f6ad5f23cc2250 Mon Sep 17 00:00:00 2001
From: Blackbaud-SandhyaRajasabeson <sandhya.rajasabeson@blackbaud.com>
Date: Wed, 21 Jun 2017 15:53:18 -0400
Subject: [PATCH] Drop down primary (#819)

* added primary in html class

* testing for primary dropdown option

* lint errors fixed

* documentation fixes from john

* documentation changes

* changed isPrimary boolean property to buttonStyle string property

* fixed test errors
---
 .../components/dropdown/dropdown-demo.component.html   |  6 +++---
 src/app/components/dropdown/index.html                 |  6 +++---
 src/modules/dropdown/dropdown.component.html           |  2 +-
 src/modules/dropdown/dropdown.component.spec.ts        |  6 +++---
 src/modules/dropdown/dropdown.component.ts             | 10 +++++-----
 .../fixtures/dropdown-parent.component.fixture.ts      |  2 +-
 .../dropdown/fixtures/dropdown.component.fixture.html  |  2 +-
 .../dropdown/fixtures/dropdown.component.fixture.ts    |  2 +-
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/components/dropdown/dropdown-demo.component.html b/src/app/components/dropdown/dropdown-demo.component.html
index 780da69f0..787230112 100644
--- a/src/app/components/dropdown/dropdown-demo.component.html
+++ b/src/app/components/dropdown/dropdown-demo.component.html
@@ -44,7 +44,7 @@
   <li>
     Select primary style:
     <br>
-    <sky-dropdown isPrimary="true">
+    <sky-dropdown buttonStyle="primary">
       <sky-dropdown-button>
         Show dropdown
       </sky-dropdown-button>
@@ -60,7 +60,7 @@
   <li>
     Context menu with primary style:
     <br>
-    <sky-dropdown buttonType="context-menu" isPrimary="true">
+    <sky-dropdown buttonType="context-menu" buttonStyle="primary">
       <sky-dropdown-menu>
         <sky-dropdown-item>
           <button type="button">
@@ -73,7 +73,7 @@
   <li>
     Icon with primary style:
     <br>
-    <sky-dropdown buttonType="folder-open-o" isPrimary="true">
+    <sky-dropdown buttonType="folder-open-o" buttonStyle="primary">
       <sky-dropdown-menu>
         <sky-dropdown-item>
           <button type="button">
diff --git a/src/app/components/dropdown/index.html b/src/app/components/dropdown/index.html
index e14f79aa7..a387820f2 100644
--- a/src/app/components/dropdown/index.html
+++ b/src/app/components/dropdown/index.html
@@ -14,11 +14,11 @@
       Specifies the type of button to render as the dropdown's trigger element.  Specify <code>select</code> to display a button with text and a caret or <code>context-menu</code> to display a round button containing an ellipsis.  You can also specify a font-awesome icon as the content of the dropdown by passing the class name to the <code>buttonType</code> attribute. For example, setting <code>buttonType</code> to <code>filter</code> would set the <code>fa-filter</code> icon as the content of the dropdown button. If you use the <code>select</code> style you will need to include a <code>sky-dropdown-button</code> element to specify the text for the button.
     </sky-demo-page-property>
     <sky-demo-page-property 
-        propertyName="isPrimary"
+        propertyName="buttonStyle"
         isOptional="true"
-        defaultValue="false"
+        defaultValue="default"
     >
-      Indicates whether the button invokes primary action for a page or form. When set to <code>true</code>, the background color is <code>sky-color-blue</code>. By default, the button's background color is <code>sky-color-white</code>.
+      Specifies the background color of the dropdown's trigger element. if unspecified it is set to <code>default</code> for background color <code>sky-color-white</code>. Specify <code>primary</code> to change color to <code>sky-color-blue</code>.
     </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="label"
diff --git a/src/modules/dropdown/dropdown.component.html b/src/modules/dropdown/dropdown.component.html
index ce948c5cb..1f516b22d 100644
--- a/src/modules/dropdown/dropdown.component.html
+++ b/src/modules/dropdown/dropdown.component.html
@@ -5,7 +5,7 @@
       class="sky-btn sky-dropdown-button"
       [ngClass]="[
         'sky-dropdown-button-type-' + buttonType,
-        isPrimary ? 'sky-btn-primary' : 'sky-btn-default'
+        'sky-btn-' + buttonStyle
       ]"
       (document:click)="windowClick()"
       [attr.aria-label]="label"
diff --git a/src/modules/dropdown/dropdown.component.spec.ts b/src/modules/dropdown/dropdown.component.spec.ts
index b0935c479..628e2b8ce 100644
--- a/src/modules/dropdown/dropdown.component.spec.ts
+++ b/src/modules/dropdown/dropdown.component.spec.ts
@@ -333,7 +333,7 @@ describe('Dropdown component', () => {
       expect(getDropdownBtnEl(el)).toHaveCssClass('sky-dropdown-button-type-context-menu');
     });
 
-   it('should have a default button background of "sky-btn-default" aka isPrimary is false', () => {
+   it('should have a default button background of "sky-btn-default"', () => {
       let fixture = TestBed.createComponent(DropdownTestComponent);
       let el: Element = fixture.nativeElement;
 
@@ -342,12 +342,12 @@ describe('Dropdown component', () => {
       expect(getDropdownBtnEl(el)).toHaveCssClass('sky-btn-default');
     });
 
-    it('should set the CSS class to primary when isPrimary is true', () => {
+    it('should set the CSS class based on buttonStyle changes', () => {
       let fixture = TestBed.createComponent(DropdownTestComponent);
       let cmp = fixture.componentInstance;
       let el: Element = fixture.nativeElement;
 
-      cmp.isPrimary = true;
+      cmp.buttonStyle = 'primary';
 
       fixture.detectChanges();
 
diff --git a/src/modules/dropdown/dropdown.component.ts b/src/modules/dropdown/dropdown.component.ts
index 0c2a2c1b1..dd6f12d3b 100644
--- a/src/modules/dropdown/dropdown.component.ts
+++ b/src/modules/dropdown/dropdown.component.ts
@@ -47,12 +47,12 @@ export class SkyDropdownComponent implements OnDestroy {
   public alignment: string = 'left';
 
   @Input()
-  public get isPrimary(): boolean {
-    return this._isPrimary;
+  public get buttonStyle(): string{
+    return this._buttonStyle || 'default';
   }
 
-  public set isPrimary(flag: boolean) {
-    this._isPrimary = flag;
+  public set buttonStyle(value: string) {
+    this._buttonStyle = value;
   }
 
   private open = false;
@@ -61,7 +61,7 @@ export class SkyDropdownComponent implements OnDestroy {
 
   private _buttonType: string;
 
-  private _isPrimary: boolean;
+  private _buttonStyle: string;
 
   private _trigger: string;
 
diff --git a/src/modules/dropdown/fixtures/dropdown-parent.component.fixture.ts b/src/modules/dropdown/fixtures/dropdown-parent.component.fixture.ts
index 486f042ed..d1c34abfe 100644
--- a/src/modules/dropdown/fixtures/dropdown-parent.component.fixture.ts
+++ b/src/modules/dropdown/fixtures/dropdown-parent.component.fixture.ts
@@ -8,5 +8,5 @@ export class DropdownParentTestComponent {
   public trigger: String;
   public buttonType: String;
   public myTitle: string;
-  public isPrimary: boolean;
+  public buttonStyle: String;
 }
diff --git a/src/modules/dropdown/fixtures/dropdown.component.fixture.html b/src/modules/dropdown/fixtures/dropdown.component.fixture.html
index 537bfcc60..877b9ddf9 100644
--- a/src/modules/dropdown/fixtures/dropdown.component.fixture.html
+++ b/src/modules/dropdown/fixtures/dropdown.component.fixture.html
@@ -4,7 +4,7 @@
     [trigger]="trigger"
     [title]="myTitle"
     [alignment]="alignment"
-    [isPrimary]="isPrimary">
+    [buttonStyle]="buttonStyle">
     <sky-dropdown-button>
       Show dropdown
     </sky-dropdown-button>
diff --git a/src/modules/dropdown/fixtures/dropdown.component.fixture.ts b/src/modules/dropdown/fixtures/dropdown.component.fixture.ts
index 5b8cceb10..b10a4a2d9 100644
--- a/src/modules/dropdown/fixtures/dropdown.component.fixture.ts
+++ b/src/modules/dropdown/fixtures/dropdown.component.fixture.ts
@@ -9,5 +9,5 @@ export class DropdownTestComponent {
   public buttonType: String;
   public myTitle: string;
   public alignment: string = 'left';
-  public isPrimary: boolean;
+  public buttonStyle: string;
 }