fix(Button): deprecate incorrect spelling of collapsible

Also general cleanup

Author: benjamincharity

demo/app/components/button/button.component.html

@@ -132,28 +132,28 @@ <h3 tsCardTitle tsVerticalSpacing>
     <ts-button
       theme="primary"
       iconName="add"
-      [format]="formatCollapsable"
+      [format]="formatCollapsible"
       tsVerticalSpacing
     >New Campaign / New Tactic</ts-button>
 
     <ts-button
       theme="accent"
       iconName="add"
-      [format]="formatCollapsable"
+      [format]="formatCollapsible"
       tsVerticalSpacing
     >New Campaign / New Tactic</ts-button>
 
     <ts-button
       theme="warn"
       iconName="add"
-      [format]="formatCollapsable"
+      [format]="formatCollapsible"
       tsVerticalSpacing
     >New Campaign / New Tactic</ts-button>
 
     <ts-button
       theme="primary"
       iconName="add"
-      [format]="formatCollapsable"
+      [format]="formatCollapsible"
       [isDisabled]="true"
       tsVerticalSpacing
     >Rounded - Disabled</ts-button>

demo/app/components/button/button.component.ts

@@ -9,23 +9,22 @@ import { TsStyleThemeTypes } from '@terminus/ui/utilities';
   styleUrls: ['./button.component.scss'],
 })
 export class ButtonComponent {
-  style = 'primary';
-  style2 = 'accent';
-  disabled = false;
-  progress1 = false;
-  progress2 = false;
-  icon = 'home';
-  formatCollapsable = 'collapsable';
-  formats: TsButtonFormatTypes[] = ['filled', 'hollow', 'collapsable'];
-  myFormat = 'filled';
-  myTheme: TsStyleThemeTypes = 'primary';
-  themes: TsStyleThemeTypes[] = ['primary', 'accent', 'warn'];
-  layoutIsRightAligned = false;
-  get layout(): string {
+  public style = 'primary';
+  public disabled = false;
+  public progress1 = false;
+  public progress2 = false;
+  public icon = 'home';
+  public formatCollapsible = 'collapsible';
+  public formats: TsButtonFormatTypes[] = ['filled', 'hollow', 'collapsible'];
+  public myFormat = 'filled';
+  public myTheme: TsStyleThemeTypes = 'primary';
+  public themes: TsStyleThemeTypes[] = ['primary', 'accent', 'warn'];
+  public layoutIsRightAligned = false;
+  public get layout(): string {
     return this.layoutIsRightAligned ? 'right' : 'left';
   }
 
-  run(progress: string): void {
+  public run(progress: string): void {
     console.log('Demo: In run!');
 
     if (progress === 'progress1') {

terminus-ui/button/src/button.component.scss

@@ -88,7 +88,7 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
 .c-button {
   // Define theme styles
   $themes: primary accent warn;
-  $collapsable-radius: 2em;
+  $collapsible-radius: 2em;
 
   &[disabled] {
     @include cursor(not-allowed);
@@ -155,8 +155,9 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
     }
   }
 
-  // When collapsable AND disabled
-  &.c-button--collapsable {
+  // When collapsible AND disabled
+  &.c-button--collapsable,
+  &.c-button--collapsible {
     &[disabled] {
       &:not(:hover) {
         &:not(:focus) {
@@ -168,7 +169,6 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
 
   // Loop through using each theme name to create styles
   @each $theme in $themes {
-
     // Theme class sets the colors for standard buttons
     &.c-button--#{$theme} {
       background-color: color(#{$theme});
@@ -178,9 +178,10 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
         color: color(utility);
       }
 
-      // Collapsable button
-      &.c-button--collapsable {
-        border-radius: $collapsable-radius;
+      // Collapsible button
+      &.c-button--collapsable,
+      &.c-button--collapsible {
+        border-radius: $collapsible-radius;
 
         // Fix left alignment when the icon is the first item
         .c-icon {
@@ -205,7 +206,7 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
         }
 
         .mat-ripple {
-          border-radius: $collapsable-radius;
+          border-radius: $collapsible-radius;
         }
       }