feat(playground): update examples to use the new nbButton (#559)

akveo · Jul 16, 2018 · 657147b · 657147b
1 parent 89d429d
commit 657147b
Show file tree

Hide file tree

Showing 23 changed files with 86 additions and 88 deletions.
diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
@@ -40,7 +40,7 @@ const docs = require('../output.json');
     NbCheckboxModule,
     NbProgressBarModule,
     NbMenuModule.forRoot(),
-    NbThemeModule.forRoot({ name: '' }),
+    NbThemeModule.forRoot({ name: 'default' }),
     NgdThemeModule.forRoot(),
     NbSidebarModule.forRoot(),
     RouterModule.forRoot(routes, { useHash: false }),

diff --git a/src/framework/theme/components/button/button.component.scss b/src/framework/theme/components/button/button.component.scss
@@ -14,7 +14,6 @@
   -moz-appearance: none;
   text-align: center;
   text-decoration: none;
-  margin: 0;
   display: inline-block;
   white-space: nowrap;
   vertical-align: middle;

diff --git a/src/playground/accordion/accordion-toggle.component.html b/src/playground/accordion/accordion-toggle.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-body>
-    <button class="btn btn-primary" (click)="toggle()">Toggle First Item</button>
+    <button nbButton (click)="toggle()">Toggle First Item</button>
   </nb-card-body>
 </nb-card>
 

diff --git a/src/playground/menu/menu-test.component.ts b/src/playground/menu/menu-test.component.ts
@@ -92,16 +92,16 @@ export class NbMenuItem4Component { }
           <nb-card-body>
             <nb-menu id="menu-first" tag="firstMenu" [items]="menuItems" [autoCollapse]="true"></nb-menu>
             <router-outlet></router-outlet>
-            <button class="btn btn-primary" id="addBtn" (click)="addMenuItem()">Add</button>
-            <button class="btn btn-primary" id="homeBtn" (click)="navigateHome()">Home</button>
+            <button nbButton id="addBtn" (click)="addMenuItem()">Add</button>
+            <button nbButton id="homeBtn" (click)="navigateHome()">Home</button>
           </nb-card-body>
         </nb-card>
         <nb-card size="xxlarge">
           <nb-card-body>
             <nb-menu id="menu-second" tag="SecondMenu" [items]="menuItems1"></nb-menu>
             <router-outlet></router-outlet>
-            <button class="btn btn-primary" id="addBtn" (click)="addMenuItem()">Add</button>
-            <button class="btn btn-primary" id="homeBtn" (click)="navigateHome()">Home</button>
+            <button nbButton id="addBtn" (click)="addMenuItem()">Add</button>
+            <button nbButton id="homeBtn" (click)="navigateHome()">Home</button>
           </nb-card-body>
         </nb-card>
         <nb-card size="xxlarge">

diff --git a/src/playground/oauth2-password/oauth2-password-login.component.ts b/src/playground/oauth2-password/oauth2-password-login.component.ts
@@ -27,7 +27,7 @@ import { getDeepFromObject } from '../../framework/auth/helpers';
             <p>Current User Access Token: {{ token.getValue() | json }}</p>
             <p>Current User Access Token Payload : {{getClaims(token.getValue()) | json}}</p>
             <p>Current User Refresh Token: {{ token.getRefreshToken() | json }}</p>
-            <button class="btn btn-warning" *ngIf="token" (click)="logout()">Sign Out</button>
+            <button nbButton status="warning" *ngIf="token" (click)="logout()">Sign Out</button>
           </nb-card-body>
           <nb-card-body *ngIf="! token"><p>No User Authenticated</p></nb-card-body>
         </nb-card>
@@ -71,8 +71,8 @@ import { getDeepFromObject } from '../../framework/auth/helpers';
                     {{ getConfigValue('forms.validation.password.maxLength') }} characters
                   </small>
                 </div>
-                <button [disabled]="submitted || !form.valid" class="btn btn-block btn-hero-success"
-                        [class.btn-pulse]="submitted"> Sign In
+                <button nbButton status="success" hero
+                        [disabled]="submitted || !form.valid" [class.btn-pulse]="submitted"> Sign In
                 </button>
               </form>
             </nb-auth-block>

diff --git a/src/playground/oauth2/oauth2-login.component.ts b/src/playground/oauth2/oauth2-login.component.ts
@@ -18,8 +18,8 @@ import { takeWhile } from 'rxjs/operators';
             <p>Current User Authenticated: {{ !!token }}</p>
             <p>Current User Token: {{ token|json }}</p>
 
-            <button class="btn btn-success" *ngIf="!token" (click)="login()">Sign In with Google</button>
-            <button class="btn btn-warning" *ngIf="token" (click)="logout()">Sign Out</button>
+            <button nbButton status="success" *ngIf="!token" (click)="login()">Sign In with Google</button>
+            <button nbButton status="warning" *ngIf="token" (click)="logout()">Sign Out</button>
           </nb-card-body>
         </nb-card>
       </nb-layout-column>

diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts
@@ -29,6 +29,7 @@ import {
   NbSpinnerModule,
   NbStepperModule,
   NbAccordionModule,
+  NbButtonModule,
 } from '@nebular/theme';
 
 import { NbPlaygroundRoutingModule } from './playground-routing.module';
@@ -154,7 +155,6 @@ import { NbAccordionMultiComponent } from './accordion/accordion-multi.component
 import { NbLayoutSidebarSubheaderComponent } from './layout/layout-sidebar-subheader.component';
 import { NbLayoutSubheaderComponent } from './layout/layout-subheader.component';
 import { NbButtonShowcaseComponent } from './button/button-showcase.component';
-import { NbButtonModule } from '@nebular/theme/components/button/button.module';
 import { NbButtonColorsComponent } from './button/button-colors.component';
 import { NbButtonShapesComponent } from './button/button-shapes.component';
 import { NbButtonHeroComponent } from './button/button-hero.component';

diff --git a/src/playground/popover/popover-custom-component.component.html b/src/playground/popover/popover-custom-component.component.html
@@ -1,4 +1,4 @@
-<button class="btn btn-outline-primary"
+<button nbButton
         [nbPopover]="customComponent"
         [nbPopoverContext]="{text: 'Example context'}">
   Custom component

diff --git a/src/playground/popover/popover-custom-component.component.ts b/src/playground/popover/popover-custom-component.component.ts
@@ -7,7 +7,6 @@
 import { Component } from '@angular/core';
 import { NbDynamicToAddComponent } from '../shared/dynamic.component';
 
-
 @Component({
   selector: 'nb-popover-custom-component',
   templateUrl: './popover-custom-component.component.html',

diff --git a/src/playground/popover/popover-modes.component.html b/src/playground/popover/popover-modes.component.html
@@ -1,13 +1,13 @@
 <div class="btn-group btn-divided-group btn-outline-divided-group">
-  <button class="btn btn-outline-primary" nbPopover="Click Mode" nbPopoverMode="click">
+  <button nbButton outline nbPopover="Click Mode" nbPopoverMode="click">
     Click Mode
   </button>
 
-  <button class="btn btn-outline-primary" nbPopover="Hint Mode" nbPopoverMode="hint">
+  <button nbButton outline nbPopover="Hint Mode" nbPopoverMode="hint">
     Hint Mode
   </button>
 
-  <button class="btn btn-outline-primary" nbPopover="Hover Mode" nbPopoverMode="hover">
+  <button nbButton outline nbPopover="Hover Mode" nbPopoverMode="hover">
     Hover Mode
   </button>
 </div>
diff --git a/src/playground/popover/popover-placements.component.html b/src/playground/popover/popover-placements.component.html
@@ -1,23 +1,23 @@
-<button class="btn btn-outline-primary" nbPopover="Right Popover!" nbPopoverPlacement="right">
+<button nbButton outline nbPopover="Right Popover!" nbPopoverPlacement="right">
   Right
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
+<button nbButton outline nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
   Bottom
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Top Popover!" nbPopoverPlacement="top">
+<button nbButton outline nbPopover="Top Popover!" nbPopoverPlacement="top">
   Top
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Left Popover!" nbPopoverPlacement="left">
+<button nbButton outline nbPopover="Left Popover!" nbPopoverPlacement="left">
   Left
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Start Popover!" nbPopoverPlacement="start">
+<button nbButton outline nbPopover="Start Popover!" nbPopoverPlacement="start">
   Start
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="End Popover!" nbPopoverPlacement="end">
+<button nbButton outline nbPopover="End Popover!" nbPopoverPlacement="end">
   End
 </button>
diff --git a/src/playground/popover/popover-placements.component.ts b/src/playground/popover/popover-placements.component.ts
@@ -15,7 +15,7 @@ import { Component } from '@angular/core';
       margin: 2rem 0;
       display: block;
     }
-    .btn {
+    button {
       margin: 1rem;
     }
   `],

diff --git a/src/playground/popover/popover-showcase.component.html b/src/playground/popover/popover-showcase.component.html
@@ -1 +1 @@
-<button class="btn btn-outline-primary" nbPopover="Hi, I'm popover!" nbPopoverPlacement="bottom">Open Popover</button>
+<button nbButton outline nbPopover="Hi, I'm popover!" nbPopoverPlacement="bottom">Open Popover</button>
diff --git a/src/playground/popover/popover-template-ref.component.html b/src/playground/popover/popover-template-ref.component.html
@@ -1,4 +1,4 @@
-<button class="btn btn-outline-primary"
+<button nbButton outline
         [nbPopover]="template"
         [nbPopoverContext]="{text: 'Example context'}"
         nbPopoverPlacement="right">

diff --git a/src/playground/popover/popover-test.component.ts b/src/playground/popover/popover-test.component.ts
@@ -14,7 +14,7 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
     <nb-card>
       <nb-card-header>Content Type</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-info" [nbPopover]="popoverTemplate"
+        <button [nbPopover]="popoverTemplate"
                 [nbPopoverContext]="{text: 'Example context'}"
                 nbPopoverPlacement="right">
           Template Ref Test
@@ -47,97 +47,97 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
     <nb-card>
       <nb-card-header>Placement</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverPlacement="right">
+        <button nbPopover="Right Popover!" nbPopoverPlacement="right">
           Right
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
+        <button nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
           Bottom
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverPlacement="top">
+        <button nbPopover="Top Popover!" nbPopoverPlacement="top">
           Top
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverPlacement="left">
+        <button nbPopover="Left Popover!" nbPopoverPlacement="left">
           Left
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Start Popover!" nbPopoverPlacement="start">
+        <button nbPopover="Start Popover!" nbPopoverPlacement="start">
           Start
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="End Popover!" nbPopoverPlacement="end">
+        <button nbPopover="End Popover!" nbPopoverPlacement="end">
           End
         </button>
       </nb-card-body>
     </nb-card>
     <nb-card>
       <nb-card-header>Multiple Hints</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
       </nb-card-body>
     </nb-card>
     <nb-card>
       <nb-card-header>Trigger mode</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-secondary" nbPopover="Click Popover!">
+        <button nbPopover="Click Popover!">
           Click
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Hover Popover!" nbPopoverMode="hover">
+        <button nbPopover="Hover Popover!" nbPopoverMode="hover">
           Hover
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Hint Popover!" nbPopoverMode="hint">
+        <button nbPopover="Hint Popover!" nbPopoverMode="hint">
           HInt
         </button>
       </nb-card-body>
     </nb-card>
     <nb-card>
       <nb-card-header>Popover</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-success" nbPopover="Click Popover!">
+        <button nbPopover="Click Popover!">
           Show me popover
         </button>
       </nb-card-body>

diff --git a/src/playground/sidebar/sidebar-fixed.component.html b/src/playground/sidebar/sidebar-fixed.component.html
@@ -1,6 +1,6 @@
 <nb-layout>
   <nb-layout-header fixed>
-    <button class="btn btn-success btn-tn" (click)="toggle()">Toggle</button>
+    <button nbButton status="success" size="xsmall" (click)="toggle()">Toggle</button>
   </nb-layout-header>
   <nb-sidebar fixed></nb-sidebar>
 

diff --git a/src/playground/sidebar/sidebar-toggle.component.html b/src/playground/sidebar/sidebar-toggle.component.html
@@ -1,7 +1,7 @@
 <nb-layout>
   <nb-layout-header fixed>
-    <button class="btn btn-success btn-tn" (click)="toggle()">Toggle</button>
-    <button class="btn btn-info btn-tn" (click)="toggleCompact()">Toggle Compact</button>
+    <button nbButton status="success" size="xsmall" (click)="toggle()">Toggle</button>
+    <button nbButton status="info" size="xsmall" (click)="toggleCompact()">Toggle Compact</button>
   </nb-layout-header>
 
   <nb-sidebar tag="left"></nb-sidebar>

diff --git a/src/playground/spinner/spinner-button.component.ts b/src/playground/spinner/spinner-button.component.ts
@@ -12,32 +12,32 @@ import { Component } from '@angular/core';
      <nb-card accent="primary" size="small">
       <nb-card-body>
         <div class="d-flex align-items-start">
-          <button class="button-container btn btn-success btn-lg" (click)="toggleLoadingAnimation()"
+          <button nbButton status="success" size="large" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-primary btn-lg" (click)="toggleLoadingAnimation()"
+          <button nbButton status="primary" size="large" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-warning btn-lg" (click)="toggleLoadingAnimation()"
+          <button nbButton status="warning" size="large" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-danger btn-md" (click)="toggleLoadingAnimation()"
+          <button nbButton status="danger" size="medium" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="danger" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-info btn-md" (click)="toggleLoadingAnimation()"
+          <button nbButton status="info" size="medium" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-info btn-sm" (click)="toggleLoadingAnimation()"
+          <button nbButton status="info" size="medium" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="xsmall" nbSpinnerMessage="">
             Download
           </button>
@@ -46,7 +46,7 @@ import { Component } from '@angular/core';
     </nb-card>
   `,
   styles: [`
-    :host .button-container {
+    button {
       margin: 1rem;
     }
   `],

diff --git a/src/playground/spinner/spinner-card.component.ts b/src/playground/spinner/spinner-card.component.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
           A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
           Originally, nebula was a name for any diffuse astronomical object.
         </p>
-        <button class="btn btn-info btn-sm" (click)="toggleLoadingAnimation()">Reload</button>
+        <button nbButton status="info" size="small" (click)="toggleLoadingAnimation()">Reload</button>
 
       </nb-card-body>
     </nb-card>

diff --git a/src/playground/stepper/stepper-playground.component.scss b/src/playground/stepper/stepper-playground.component.scss
@@ -1,6 +1,6 @@
 :host ::ng-deep nb-stepper .step-content {
   text-align: center;
-  .btn {
+  button {
     cursor: pointer;
     margin: 0.5rem;
   }