feat(Button): support icon-only mode

ISSUES CLOSED: #1714
GetTerminus · Oct 24, 2019 · 3575d3a · 3575d3a
1 parent 77a1ea2
commit 3575d3a
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 52 deletions.
diff --git a/demo/app/components/button/button.component.html b/demo/app/components/button/button.component.html
@@ -1,47 +1,62 @@
 <ts-card tsVerticalSpacing>
-  <h3 tsCardTitle tsVerticalSpacing="small--0">Demo Controls</h3>
-
-  <div tsVerticalSpacing>
-    <label>
-      Theme:
-      <select name="myTheme" [(ngModel)]="myTheme">
-        <option value="{{ theme }}" *ngFor="let theme of themes">
-          {{ theme | titlecase }}
-        </option>
-      </select>
-    </label>
-  </div>
-
-  <div tsVerticalSpacing>
-    <label>
-      Format:
-      <select name="myFormat" [(ngModel)]="myFormat">
-        <option value="{{ format }}" *ngFor="let format of formats">
-          {{ format | titlecase }}
-        </option>
-      </select>
-    </label>
-  </div>
-
-  <div tsVerticalSpacing>
-    <label tsVerticalSpacing>
-      Right-align layout:
-      <input type="checkbox" [(ngModel)]="layoutIsRightAligned">
-    </label>
-  </div>
-</ts-card>
-
-
-<ts-card tsVerticalSpacing>
-  <div [style.textAlign]="layout">
-    <ts-button
-      [theme]="myTheme"
-      (clicked)="run('progress2')"
-      [isDisabled]="disabled"
-      [showProgress]="progress2"
-      [iconName]="icon"
-      [format]="myFormat"
-    >Click Me!</ts-button>
+  <div fxLayout="row" fxLayoutGap="2em">
+    <div>
+      <div tsVerticalSpacing>
+        <label>
+          Theme:
+          <select name="myTheme" [(ngModel)]="myTheme">
+            <option value="{{ theme }}" *ngFor="let theme of themes">
+              {{ theme | titlecase }}
+            </option>
+          </select>
+        </label>
+      </div>
+
+      <div tsVerticalSpacing>
+        <label>
+          Format:
+          <select name="myFormat" [(ngModel)]="myFormat">
+            <option value="{{ format }}" *ngFor="let format of formats">
+              {{ format | titlecase }}
+            </option>
+          </select>
+        </label>
+      </div>
+
+      <div tsVerticalSpacing>
+        <label tsVerticalSpacing>
+          Right-align layout:
+          <input type="checkbox" [(ngModel)]="layoutIsRightAligned">
+        </label>
+      </div>
+    </div>
+
+    <div [style.textAlign]="layout">
+      <div fxLayout="column">
+        <div tsVerticalSpacing="small--0">
+          <ts-button
+            [theme]="myTheme"
+            (clicked)="run('progress2')"
+            [isDisabled]="disabled"
+            [showProgress]="progress2"
+            [iconName]="icon"
+            [format]="myFormat"
+          >Click Me!</ts-button>
+        </div>
+
+        <div>
+          <ts-button
+            [theme]="myTheme"
+            (clicked)="run('progress2')"
+            [isDisabled]="disabled"
+            [showProgress]="progress2"
+            [format]="myFormat"
+          >
+            <ts-icon>build</ts-icon>
+          </ts-button>
+        </div>
+      </div>
+    </div>
   </div>
 </ts-card>
 

diff --git a/demo/app/components/button/button.module.ts b/demo/app/components/button/button.module.ts
@@ -4,6 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { TsButtonModule } from '@terminus/ui/button';
 import { TsCardModule } from '@terminus/ui/card';
+import { TsIconModule } from '@terminus/ui/icon';
 import { TsSpacingModule } from '@terminus/ui/spacing';
 
 import { ButtonRoutingModule } from './button-routing.module';
@@ -18,6 +19,7 @@ import { ButtonComponent } from './button.component';
     FormsModule,
     TsButtonModule,
     TsCardModule,
+    TsIconModule,
     TsSpacingModule,
   ],
   declarations: [

diff --git a/terminus-ui/button/src/button.component.html b/terminus-ui/button/src/button.component.html
@@ -1,4 +1,3 @@
-<!-- NOTE: `disabled` is an Angular Material @Input - not an HTML attribute -->
 <button
   mat-raised-button
   class="c-button mat-raised-button qa-button"

diff --git a/terminus-ui/button/src/button.component.scss b/terminus-ui/button/src/button.component.scss
@@ -6,6 +6,8 @@
 @import './../../scss/helpers/typography';
 
 
+// FIXME: Refactor to use CSS variables. Currently we are generating a lot of duplicate CSS.
+
 // This makes the bottom padding space look better than the default 36px
 $button-line-height: 35px;
 $rotation: 360deg;
@@ -40,6 +42,7 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
   // collapse the text content
   .c-button__content {
     max-width: 0;
+    padding: 0;
   }
 }
 
@@ -65,11 +68,10 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
     line-height: $button-line-height;
     // Overwrite material min-width
     min-width: auto;
-    // stylelint-disable declaration-no-important
-    // Important needed to override the `!important` within the ladda styles
+    padding: 0 spacing(small);
+    // NOTE: Important needed to override the `!important` within the ladda styles
+    // stylelint-disable-next-line declaration-no-important
     transition: $color-transition, $background-transition, $shadow-transition !important;
-    // stylelint-enable declaration-no-important
-    will-change: background, color, contents;
   }
 
   // Target instances nested inside the TsSearchComponent
@@ -106,12 +108,16 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
     }
   }
 
+  // Target the prefix icon
+  &__icon {
+    $horizontal-alignment-fix: .2em;
+    margin-right: $horizontal-alignment-fix;
+  }
+
+  // Target any icon inside a button
   // Adjust icon vertical layout
   .c-icon {
-    $horizontal-alignment-fix: .2em;
     $vertical-alignment-fix: -.15em;
-
-    margin-right: $horizontal-alignment-fix;
     // Fix small vertical aligment issue between icon & text
     margin-top: $vertical-alignment-fix;
     transition: transform $icon-transition-duration-expand $g-easing;
@@ -185,9 +191,15 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
           display: inline-block;
           max-width: 400px;
           overflow: hidden;
+          padding: 0 spacing(small);
           transition: max-width $content-transition-duration $g-easing;
           white-space: nowrap;
-          will-change: max-width;
+
+          .ts-icon {
+            --negative-padding-adjustment: -4px;
+            margin-left: var(--negative-padding-adjustment);
+            margin-right: var(--negative-padding-adjustment);
+          }
         }
 
         .mat-ripple {