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