feat(button): add fullWidth mode (#591)

src/framework/theme/components/button/button.component.scss

@@ -22,4 +22,8 @@
   &:hover, &:focus {
     text-decoration: none;
   }
+
+  &.btn-full-width {
+    width: 100%;
+  }
 }

src/framework/theme/components/button/button.component.ts

@@ -39,6 +39,9 @@ import { convertToBoolProperty } from '../helpers';
  * and `a`:
  * @stacked-example(Button Elements, button/button-types.component.html)
  *
+ * Button can be made `fullWidth`:
+ * @stacked-example(Full Width Button, button/button-full-width.component.html)
+ *
  * @styles
  *
  * btn-fg:
@@ -192,6 +195,9 @@ export class NbButtonComponent {
     return this.disabled ? '-1' : '0';
   }
 
+  @HostBinding('class.btn-full-width')
+  fullWidth = false;
+
   /**
    * Button size, available sizes:
    * `xxsmall`, `xsmall`, `small`, `medium`, `large`
@@ -239,6 +245,15 @@ export class NbButtonComponent {
     this.disabled = convertToBoolProperty(val);
   }
 
+  /**
+   * If set element will fill its container
+   * @param {boolean}
+   */
+  @Input('fullWidth')
+  set setFullWidth(value) {
+    this.fullWidth = convertToBoolProperty(value);
+  }
+
   /**
    * Adds `outline` styles
    * @param {boolean} val

src/framework/theme/components/button/button.spec.ts

@@ -65,4 +65,13 @@ describe('Component: NbButton', () => {
         .debugElement.nativeElement.classList.contains('btn-semi-round'))
       .toBeTruthy()
   });
+
+  it('should set full-width class', () => {
+    button.fullWidth = true;
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.classList.contains('btn-full-width'))
+      .toBeTruthy()
+  });
 });

src/playground/button/button-full-width.component.html

@@ -0,0 +1,10 @@
+<nb-card>
+  <nb-card-header>Button Full Width</nb-card-header>
+  <nb-card-body>
+    <button nbButton fullWidth status="primary">Primary</button>
+    <button nbButton fullWidth status="success">Success</button>
+    <button nbButton fullWidth status="info">Info</button>
+    <button nbButton fullWidth status="warning">Warning</button>
+    <button nbButton fullWidth status="danger">Danger</button>
+  </nb-card-body>
+</nb-card>

src/playground/button/button-full-width.component.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-button-full-width',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './button-full-width.component.html',
+  styles: [`
+    [nbButton] {
+      margin-bottom: 1rem;
+    }
+  `],
+})
+export class NbButtonFullWidthComponent {
+}

src/playground/playground-routing.module.ts

@@ -133,6 +133,7 @@ import { NbButtonHeroComponent } from './button/button-hero.component';
 import { NbButtonOutlineComponent } from './button/button-outline.component';
 import { NbButtonSizesComponent } from './button/button-sizes.component';
 import { NbButtonTypesComponent } from './button/button-types.component';
+import { NbButtonFullWidthComponent } from './button/button-full-width.component';
 import { NbInputsShowcaseComponent } from './input/input-showcase.component';
 import { NbInputColorsComponent } from './input/input-colors.component';
 import { NbInputSizesComponent } from './input/input-sizes.component';
@@ -206,6 +207,10 @@ export const routes: Routes = [
             path: 'button-types.component',
             component: NbButtonTypesComponent,
           },
+          {
+            path: 'button-full-width.component',
+            component: NbButtonFullWidthComponent,
+          },
         ],
       },
       {

src/playground/playground.module.ts

@@ -163,6 +163,7 @@ import { NbButtonHeroComponent } from './button/button-hero.component';
 import { NbButtonOutlineComponent } from './button/button-outline.component';
 import { NbButtonSizesComponent } from './button/button-sizes.component';
 import { NbButtonTypesComponent } from './button/button-types.component';
+import { NbButtonFullWidthComponent } from './button/button-full-width.component';
 import { NbInputsShowcaseComponent } from './input/input-showcase.component';
 import { NbInputColorsComponent } from './input/input-colors.component';
 import { NbInputSizesComponent } from './input/input-sizes.component';
@@ -323,6 +324,7 @@ export const NB_EXAMPLE_COMPONENTS = [
   NbButtonOutlineComponent,
   NbButtonSizesComponent,
   NbButtonTypesComponent,
+  NbButtonFullWidthComponent,
   NbInputsShowcaseComponent,
   NbInputColorsComponent,
   NbInputSizesComponent,