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

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">

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"

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"

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();
 

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;
 

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;
 }

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>

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;
 }