feat(button-toggle): add option for vertical toggle groups (#1936)

* feat(button-toggle): add option for vertical toggle groups

Adds a new input for showing the associated toggles in a group vertically.

Closes #1892.

* Prefix md-vertical class with component name

Author: devversion

src/demo-app/button-toggle/button-toggle-demo.html

@@ -1,7 +1,11 @@
+<p>
+  <md-checkbox (change)="isVertical = $event.checked">Show Button Toggles Vertical</md-checkbox>
+</p>
+
 <h1>Exclusive Selection</h1>
 
 <section class="demo-section">
-  <md-button-toggle-group name="alignment">
+  <md-button-toggle-group name="alignment" [vertical]="isVertical">
     <md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle>
     <md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle>
     <md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle>
@@ -12,7 +16,7 @@ <h1>Exclusive Selection</h1>
 <h1>Disabled Group</h1>
 
 <section class="demo-section">
-  <md-button-toggle-group name="checkbox" disabled>
+  <md-button-toggle-group name="checkbox" [vertical]="isVertical" disabled>
     <md-button-toggle value="bold">
       <md-icon class="md-24">format_bold</md-icon>
     </md-button-toggle>
@@ -27,7 +31,7 @@ <h1>Disabled Group</h1>
 
 <h1>Multiple Selection</h1>
 <section class="demo-section">
-  <md-button-toggle-group multiple>
+  <md-button-toggle-group multiple [vertical]="isVertical">
     <md-button-toggle>Flour</md-button-toggle>
     <md-button-toggle>Eggs</md-button-toggle>
     <md-button-toggle>Sugar</md-button-toggle>
@@ -40,7 +44,7 @@ <h1>Single Toggle</h1>
 
 <h1>Dynamic Exclusive Selection</h1>
 <section class="demo-section">
-  <md-button-toggle-group name="pies" [(ngModel)]="favoritePie">
+  <md-button-toggle-group name="pies" [(ngModel)]="favoritePie" [vertical]="isVertical">
     <md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
       {{pie}}
     </md-button-toggle>

src/demo-app/button-toggle/button-toggle-demo.ts

@@ -8,6 +8,7 @@ import {MdUniqueSelectionDispatcher} from '@angular/material';
   providers: [MdUniqueSelectionDispatcher],
 })
 export class ButtonToggleDemo {
+  isVertical = false;
   favoritePie = 'Apple';
   pieOptions = [
     'Apple',

src/lib/button-toggle/README.md

@@ -124,6 +124,7 @@ Output:
 | `disabled` | boolean | Optional, default = `false`. |
 | `value` | any | The current value for the group. Will be set to the value of the selected toggle or a list of values from the selected toggles. |
 | `selected` | `mdButtonToggle` | The current selected toggle or a list of the selected toggles. |
+| `vertical` | boolean | Whether the group should show the toggles vertically. Default is `false`. |
 
 ### Attributes
 

src/lib/button-toggle/button-toggle.scss

@@ -9,11 +9,25 @@ md-button-toggle-group {
   @include md-elevation(2);
   position: relative;
   display: inline-flex;
+  flex-direction: row;
+
   border-radius: $md-button-toggle-border-radius;
+
   cursor: pointer;
   white-space: nowrap;
 }
 
+.md-button-toggle-vertical {
+  flex-direction: column;
+
+  .md-button-toggle-label-content {
+    // Vertical button toggles shouldn't be an inline-block, because the toggles should
+    // fill the available width in the group.
+    display: block;
+  }
+}
+
+
 .md-button-toggle-disabled .md-button-toggle-label-content {
   cursor: default;
 }

src/lib/button-toggle/button-toggle.spec.ts

@@ -126,6 +126,15 @@ describe('MdButtonToggle', () => {
       expect(groupInstance.value);
     });
 
+    it('should change the vertical state', () => {
+      expect(groupNativeElement.classList).not.toContain('md-button-toggle-vertical');
+
+      groupInstance.vertical = true;
+      fixture.detectChanges();
+
+      expect(groupNativeElement.classList).toContain('md-button-toggle-vertical');
+    });
+
     it('should emit a change event from button toggles', fakeAsync(() => {
       expect(buttonToggleInstances[0].checked).toBe(false);
 
@@ -412,6 +421,15 @@ describe('MdButtonToggle', () => {
       expect(buttonToggleInstances[0].checked).toBe(true);
     });
 
+    it('should change the vertical state', () => {
+      expect(groupNativeElement.classList).not.toContain('md-button-toggle-vertical');
+
+      groupInstance.vertical = true;
+      fixture.detectChanges();
+
+      expect(groupNativeElement.classList).toContain('md-button-toggle-vertical');
+    });
+
     it('should deselect a button toggle when selected twice', () => {
       buttonToggleNativeElements[0].click();
       fixture.detectChanges();
@@ -506,7 +524,7 @@ describe('MdButtonToggle', () => {
 
 @Component({
   template: `
-  <md-button-toggle-group [disabled]="isGroupDisabled" [value]="groupValue">
+  <md-button-toggle-group [disabled]="isGroupDisabled" [vertical]="isVertical" [value]="groupValue">
     <md-button-toggle value="test1">Test1</md-button-toggle>
     <md-button-toggle value="test2">Test2</md-button-toggle>
     <md-button-toggle value="test3">Test3</md-button-toggle>
@@ -515,6 +533,7 @@ describe('MdButtonToggle', () => {
 })
 class ButtonTogglesInsideButtonToggleGroup {
   isGroupDisabled: boolean = false;
+  isVertical: boolean = false;
   groupValue: string = null;
 }
 
@@ -539,7 +558,7 @@ class ButtonToggleGroupWithNgModel {
 
 @Component({
   template: `
-  <md-button-toggle-group [disabled]="isGroupDisabled" multiple>
+  <md-button-toggle-group [disabled]="isGroupDisabled" [vertical]="isVertical" multiple>
     <md-button-toggle value="eggs">Eggs</md-button-toggle>
     <md-button-toggle value="flour">Flour</md-button-toggle>
     <md-button-toggle value="sugar">Sugar</md-button-toggle>
@@ -548,6 +567,7 @@ class ButtonToggleGroupWithNgModel {
 })
 class ButtonTogglesInsideButtonToggleGroupMultiple {
   isGroupDisabled: boolean = false;
+  isVertical: boolean = false;
 }
 
 @Component({

src/lib/button-toggle/button-toggle.ts

@@ -47,6 +47,7 @@ export class MdButtonToggleChange {
   providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
   host: {
     'role': 'radiogroup',
+    '[class.md-button-toggle-vertical]': 'vertical'
   },
   exportAs: 'mdButtonToggleGroup',
 })
@@ -60,6 +61,9 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   /** Disables all toggles in the group. */
   private _disabled: boolean = null;
 
+  /** Whether the button toggle group should be vertical. */
+  private _vertical: boolean = false;
+
   /** The currently selected button toggle, should match the value. */
   private _selected: MdButtonToggle = null;
 
@@ -109,6 +113,15 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
     this._disabled = coerceBooleanProperty(value);
   }
 
+  @Input()
+  get vertical(): boolean {
+    return this._vertical;
+  }
+
+  set vertical(value) {
+    this._vertical = coerceBooleanProperty(value);
+  }
+
   @Input()
   get value(): any {
     return this._value;
@@ -207,11 +220,17 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
 @Directive({
   selector: 'md-button-toggle-group[multiple]',
   exportAs: 'mdButtonToggleGroup',
+  host: {
+    '[class.md-button-toggle-vertical]': 'vertical'
+  }
 })
 export class MdButtonToggleGroupMultiple {
   /** Disables all toggles in the group. */
   private _disabled: boolean = null;
 
+  /** Whether the button toggle group should be vertical. */
+  private _vertical: boolean = false;
+
   @Input()
   get disabled(): boolean {
     return this._disabled;
@@ -220,6 +239,16 @@ export class MdButtonToggleGroupMultiple {
   set disabled(value) {
     this._disabled = (value != null && value !== false) ? true : null;
   }
+
+  @Input()
+  get vertical(): boolean {
+    return this._vertical;
+  }
+
+  set vertical(value) {
+    this._vertical = coerceBooleanProperty(value);
+  }
+
 }
 
 @Component({