feat(button): strong decorator

ionic-team · Nov 29, 2016 · fa0579f · fa0579f
1 parent 4219eae
commit fa0579f
Show file tree

Hide file tree

Showing 13 changed files with 157 additions and 4 deletions.
diff --git a/src/components/action-sheet/test/basic/app-module.ts b/src/components/action-sheet/test/basic/app-module.ts
@@ -158,7 +158,7 @@ export class E2EPage {
     <ion-header>
       <ion-toolbar>
         <ion-buttons start>
-          <button ion-button (click)="dismiss()">Close</button>
+          <button ion-button (click)="dismiss()" strong>Close</button>
         </ion-buttons>
         <ion-title>Modal</ion-title>
       </ion-toolbar>

diff --git a/src/components/alert/test/basic/app-module.ts b/src/components/alert/test/basic/app-module.ts
@@ -297,7 +297,7 @@ export class E2EPage {
     <ion-header>
       <ion-toolbar>
         <ion-buttons>
-          <button ion-button (click)="dismiss()">Close</button>
+          <button ion-button (click)="dismiss()" strong>Close</button>
         </ion-buttons>
         <ion-title>Modal</ion-title>
       </ion-toolbar>

diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss
@@ -312,3 +312,11 @@ $button-ios-round-border-radius:                    $button-round-border-radius
   @include ios-button-outline($color-name, $color-base, $color-contrast);
   @include ios-button-clear($color-name, $color-base, $color-contrast);
 }
+
+
+// iOS strong Button
+// --------------------------------------------------
+
+.button-strong-ios {
+  font-weight: bold;
+}
diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss
@@ -424,3 +424,11 @@ $button-md-round-border-radius:                 $button-round-border-radius !def
   @include md-button-outline($color-name, $color-base, $color-contrast);
   @include md-button-clear($color-name, $color-base, $color-contrast);
 }
+
+
+// MD strong Button
+// --------------------------------------------------
+
+.button-strong-md {
+  font-weight: bold;
+}
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -138,6 +138,9 @@ export class Button extends Ion {
   /** @private */
   _display: string; // block/full
 
+  /** @private */
+  _decorator: string; // strong
+
   /** @private */
   _init: boolean;
 
@@ -213,6 +216,14 @@ export class Button extends Ion {
     this._attr('_display', 'full', val);
   }
 
+  /**
+   * @input {boolean} A button that has strong importance, ie. it represents an important action.
+   */
+  @Input()
+  set strong(val: boolean) {
+    this._attr('_decorator', 'strong', val);
+  }
+
   /**
    * @input {string} The mode to apply to this component.
    */
@@ -301,6 +312,7 @@ export class Button extends Ion {
       this._setClass(this._shape, assignCssClass); // button-round
       this._setClass(this._display, assignCssClass); // button-full
       this._setClass(this._size, assignCssClass); // button-small
+      this._setClass(this._decorator, assignCssClass); // button-strong
       this._updateColor(this._color, assignCssClass); // button-secondary, bar-button-secondary
     }
   }

diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss
@@ -315,3 +315,11 @@ $button-wp-round-border-radius:                           $button-round-border-r
   @include wp-button-outline($color-name, $color-base, $color-contrast);
   @include wp-button-clear($color-name, $color-base, $color-contrast);
 }
+
+
+// WP strong Button
+// --------------------------------------------------
+
+.button-strong-wp {
+  font-weight: bold;
+}
diff --git a/src/components/button/test/decorator/app-module.ts b/src/components/button/test/decorator/app-module.ts
@@ -0,0 +1,32 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  strong = false;
+}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/button/test/decorator/e2e.ts b/src/components/button/test/decorator/e2e.ts
@@ -0,0 +1,4 @@
+
+it('should click edit button', function() {
+  element(by.css('.e2eButtonEdit')).click();
+});
diff --git a/src/components/button/test/decorator/main.html b/src/components/button/test/decorator/main.html
@@ -0,0 +1,57 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Outline Buttons</ion-title>
+    <ion-buttons end>
+      <button ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
+        {{strong ? 'Done' : 'Edit' }}
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" class="outer-content">
+
+  <p>
+    <button ion-button [strong]="strong" small>Default (small)</button>
+    <button ion-button strong small>Default (small)</button>
+  </p>
+
+  <p>
+    <button ion-button outline [strong]="strong" color="secondary">Outline</button>
+    <button ion-button outline strong color="secondary">Outline</button>
+  </p>
+
+  <p>
+    <button ion-button block [strong]="strong" color="danger" large>Block (large)</button>
+    <button ion-button block strong color="danger" large>Block (large)</button>
+  </p>
+
+  <p>
+    <button ion-button full [strong]="strong" color="dark">Full</button>
+    <button ion-button full strong color="dark">Default</button>
+  </p>
+
+  <p>
+    <button ion-button raised [strong]="strong" color="light">Raised</button>
+    <button ion-button raised strong color="light">Raised</button>
+  </p>
+
+  <p>
+    <button ion-button round [strong]="strong">Round</button>
+    <button ion-button round strong>Round</button>
+  </p>
+
+  <p>
+    <button ion-button clear [strong]="strong">Clear</button>
+    <button ion-button clear strong>Clear</button>
+  </p>
+
+  <p>
+    <button ion-button clear [strong]="strong">Default</button>
+    <button ion-button clear strong>Default</button>
+  </p>
+
+</ion-content>
diff --git a/src/components/modal/test/basic/app-module.ts b/src/components/modal/test/basic/app-module.ts
@@ -329,7 +329,7 @@ export class ToolbarModal {
     <ion-header>
       <ion-toolbar color="secondary">
         <ion-buttons start>
-          <button ion-button (click)="dismiss()">Close</button>
+          <button ion-button (click)="dismiss()" strong>Close</button>
         </ion-buttons>
         <ion-title>Modal w/ Inputs</ion-title>
       </ion-toolbar>
@@ -415,7 +415,7 @@ export class ContactUs {
       <ion-navbar>
         <ion-title>First Page Header</ion-title>
         <ion-buttons start>
-          <button ion-button class="e2eCloseMenu" (click)="dismiss()">Close</button>
+          <button ion-button class="e2eCloseMenu" (click)="dismiss()" strong>Close</button>
         </ion-buttons>
       </ion-navbar>
     </ion-header>

diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
@@ -359,3 +359,11 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
   @include ios-bar-button-outline($color-name, $color-base, $color-contrast);
   @include ios-bar-button-solid($color-name, $color-base, $color-contrast);
 }
+
+
+// iOS strong Button
+// --------------------------------------------------
+
+.bar-button-strong-ios {
+  font-weight: bold;
+}
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
@@ -381,3 +381,11 @@ $navbar-md-height:                       $toolbar-md-height !default;
   @include md-bar-button-outline($color-name, $color-base, $color-contrast);
   @include md-bar-button-solid($color-name, $color-base, $color-contrast);
 }
+
+
+// MD strong Button
+// --------------------------------------------------
+
+.bar-button-strong-md {
+  font-weight: bold;
+}
diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
@@ -328,3 +328,11 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
   @include wp-bar-button-outline($color-name, $color-base, $color-contrast);
   @include wp-bar-button-solid($color-name, $color-base, $color-contrast);
 }
+
+
+// WP strong Button
+// --------------------------------------------------
+
+.bar-button-strong-wp {
+  font-weight: bold;
+}