Contrib > Change components over to using sky-icon (#1949)

* Moved over @Remulus2006 's changes * minor style fixes * added skyicon module. Reorged imports * forced sky-icon component to be the size of the text within
blackbaud · Sep 7, 2018 · 51bdc66 · 51bdc66
1 parent 4e33160
commit 51bdc66
Show file tree

Hide file tree

Showing 39 changed files with 475 additions and 189 deletions.
diff --git a/skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html b/skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html
@@ -25,14 +25,14 @@
           title="Sort descending"
           type="button"
         >
-          <i class="fa fa-angle-double-down" aria-hidden="true"></i>
+          <sky-icon icon="angle-double-down"></sky-icon>
         </button>
         <button
           class="sky-btn sky-btn-default"
           title="Sort ascending"
           type="button"
         >
-          <i class="fa fa-angle-double-up" aria-hidden="true"></i>
+          <sky-icon icon="angle-double-up"></sky-icon>
         </button>
       </sky-list-toolbar-view-actions>
     </sky-list-toolbar>

diff --git a/src/demos/autocomplete/autocomplete-demo.component.html b/src/demos/autocomplete/autocomplete-demo.component.html
@@ -192,6 +192,6 @@ <h2 class="sky-section-heading">
 <ng-template
   let-item="item"
   #oceanSearchResultTemplate>
-  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
+  <sky-icon icon="long-arrow-right"></sky-icon>
   {{ item.title }} &bull; ID {{ item.id }}
 </ng-template>
diff --git a/src/demos/flyout/flyout-demo.component.html b/src/demos/flyout/flyout-demo.component.html
@@ -29,7 +29,7 @@
     class="sky-btn sky-btn-default"
     title="Close record"
     (click)="closeFlyout()">
-    <i class="fa fa-close" aria-hidden="true"></i>
+    <sky-icon icon="close"></sky-icon>
   </button>
 </ng-template>
 
@@ -42,7 +42,7 @@
     type="button"
     class="sky-btn sky-btn-default"
     (click)="removeFlyout()">
-    <i class="fa fa-trash" aria-hidden="true"></i>
+    <sky-icon icon="trash"></sky-icon>
     Delete flyout
   </button>
 </div>

diff --git a/src/demos/list-toolbar/list-toolbar-demo.component.html b/src/demos/list-toolbar/list-toolbar-demo.component.html
@@ -13,7 +13,7 @@
           buttonStyle="primary"
         >
           <sky-dropdown-button>
-            <i class="fa fa-plus-circle" aria-hidden="true"></i>
+            <sky-icon icon="plus-circle"></sky-icon>
             Add
           </sky-dropdown-button>
         </sky-dropdown>

diff --git a/src/modules/alert/alert.component.html b/src/modules/alert/alert.component.html
@@ -18,6 +18,6 @@
       [attr.aria-label]="'alert_close' | skyResources"
       [hidden]="!closeable"
   >
-    <span aria-hidden="true"><i class="fa fa-close"></i></span>
+    <span aria-hidden="true"><sky-icon icon="close"></sky-icon></span>
   </button>
 </div>
diff --git a/src/modules/alert/alert.module.ts b/src/modules/alert/alert.module.ts
@@ -1,12 +1,28 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
 
-import { SkyAlertComponent } from './alert.component';
-import { SkyResourcesModule } from '../resources';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyIconModule
+} from '../icon';
+
+import {
+  SkyAlertComponent
+} from './alert.component';
 
 @NgModule({
   declarations: [SkyAlertComponent],
-  imports: [CommonModule, SkyResourcesModule],
+  imports: [
+    CommonModule,
+    SkyResourcesModule,
+    SkyIconModule
+  ],
   exports: [SkyAlertComponent]
 })
 export class SkyAlertModule { }
diff --git a/src/modules/autocomplete/autocomplete.module.ts b/src/modules/autocomplete/autocomplete.module.ts
@@ -1,12 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+import {
+  FormsModule
+} from '@angular/forms';
 
-import { SkyDropdownModule } from '../dropdown';
-import { SkyTextHighlightModule } from '../text-highlight';
+import {
+  SkyDropdownModule
+} from '../dropdown';
+import {
+  SkyTextHighlightModule
+} from '../text-highlight';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyAutocompleteComponent } from './autocomplete.component';
-import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
+import {
+  SkyAutocompleteComponent
+} from './autocomplete.component';
+import {
+  SkyAutocompleteInputDirective
+} from './autocomplete-input.directive';
 
 @NgModule({
   declarations: [
@@ -17,7 +34,8 @@ import { SkyAutocompleteInputDirective } from './autocomplete-input.directive';
     CommonModule,
     FormsModule,
     SkyTextHighlightModule,
-    SkyDropdownModule
+    SkyDropdownModule,
+    SkyIconModule
   ],
   exports: [
     SkyAutocompleteComponent,

diff --git a/src/modules/datepicker/datepicker.module.ts b/src/modules/datepicker/datepicker.module.ts
@@ -1,21 +1,47 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
+import {
+  FormsModule
+} from '@angular/forms';
 
-import { SkyDatepickerCalendarComponent } from './datepicker-calendar.component';
-import { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';
-import { SkyDayPickerComponent } from './daypicker.component';
-import { SkyMonthPickerComponent } from './monthpicker.component';
-import { SkyYearPickerComponent } from './yearpicker.component';
+import {
+  SkyResourcesModule
+} from '../resources';
+import {
+  SkyDropdownModule
+} from '../dropdown';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyDatepickerComponent } from './datepicker.component';
-
-import { SkyDatepickerConfigService } from './datepicker-config.service';
-import { SkyResourcesModule } from '../resources';
-
-import { SkyDropdownModule } from '../dropdown';
-
-import { SkyDatepickerInputDirective } from './datepicker-input.directive';
+import {
+  SkyDatepickerCalendarComponent
+} from './datepicker-calendar.component';
+import {
+  SkyDatepickerCalendarInnerComponent
+} from './datepicker-calendar-inner.component';
+import {
+  SkyDayPickerComponent
+} from './daypicker.component';
+import {
+  SkyMonthPickerComponent
+} from './monthpicker.component';
+import {
+  SkyYearPickerComponent
+} from './yearpicker.component';
+import {
+  SkyDatepickerComponent
+} from './datepicker.component';
+import {
+  SkyDatepickerConfigService
+} from './datepicker-config.service';
+import {
+  SkyDatepickerInputDirective
+} from './datepicker-input.directive';
 
 @NgModule({
   declarations: [
@@ -31,7 +57,8 @@ import { SkyDatepickerInputDirective } from './datepicker-input.directive';
     CommonModule,
     SkyResourcesModule,
     SkyDropdownModule,
-    FormsModule
+    FormsModule,
+    SkyIconModule
   ],
   exports: [
     SkyDatepickerCalendarComponent,

diff --git a/src/modules/datepicker/daypicker.component.html b/src/modules/datepicker/daypicker.component.html
@@ -13,7 +13,7 @@
           tabindex="-1"
           aria-hidden="true"
           >
-          <i class="fa fa-chevron-left"></i>
+          <sky-icon icon="chevron-left"></sky-icon>
         </button>
       </th>
       <th [attr.colspan]="5 + (datepicker.showWeeks ? 1 : 0)" scope="col">
@@ -38,7 +38,7 @@
           tabindex="-1"
           aria-hidden="true"
           >
-          <i class="fa fa-chevron-right"></i>
+          <sky-icon icon="chevron-right"></sky-icon>
         </button>
       </th>
     </tr>

diff --git a/src/modules/datepicker/monthpicker.component.html b/src/modules/datepicker/monthpicker.component.html
@@ -8,7 +8,7 @@
           (click)="datepicker.moveCalendar($event, -1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-left"></i>
+          <sky-icon icon="chevron-left"></sky-icon>
         </button></th>
       <th [attr.colspan]="((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2">
         <button
@@ -30,7 +30,7 @@
           (click)="datepicker.moveCalendar($event, 1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-right"></i>
+          <sky-icon icon="chevron-right"></sky-icon>
         </button>
       </th>
     </tr>

diff --git a/src/modules/datepicker/yearpicker.component.html b/src/modules/datepicker/yearpicker.component.html
@@ -8,7 +8,7 @@
           (click)="datepicker.moveCalendar($event, -1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-left"></i>
+          <sky-icon icon="chevron-left"></sky-icon>
         </button>
       </th>
       <th [attr.colspan]="((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2">
@@ -32,7 +32,7 @@
           (click)="datepicker.moveCalendar($event, 1)"
           tabindex="-1"
           >
-          <i class="fa fa-chevron-right"></i>
+          <sky-icon icon="chevron-right"></sky-icon>
         </button>
       </th>
     </tr>

diff --git a/src/modules/dropdown/dropdown.component.html b/src/modules/dropdown/dropdown.component.html
@@ -19,7 +19,7 @@
 
     <div [ngSwitch]="buttonType">
       <ng-template ngSwitchCase="context-menu">
-        <i class="fa fa-ellipsis-h"></i>
+        <sky-icon icon="ellipsis-h"></sky-icon>
       </ng-template>
 
       <ng-template ngSwitchDefault>
@@ -32,7 +32,7 @@
             </ng-content>
           </div>
           <div class="sky-dropdown-button-icon-container">
-            <i class="fa fa-caret-down sky-dropdown-caret"></i>
+            <sky-icon icon="caret-down" class="sky-dropdown-caret"></sky-icon>
           </div>
         </div>
         <div

diff --git a/src/modules/dropdown/dropdown.module.ts b/src/modules/dropdown/dropdown.module.ts
@@ -1,13 +1,32 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+import {
+  CommonModule
+} from '@angular/common';
 
-import { SkyWindowRefService } from '../window';
-import { SkyPopoverModule } from '../popover';
+import {
+  SkyWindowRefService
+} from '../window';
+import {
+  SkyPopoverModule
+} from '../popover';
+import {
+  SkyIconModule
+} from '../icon';
 
-import { SkyDropdownButtonComponent } from './dropdown-button.component';
-import { SkyDropdownItemComponent } from './dropdown-item.component';
-import { SkyDropdownMenuComponent } from './dropdown-menu.component';
-import { SkyDropdownComponent } from './dropdown.component';
+import {
+  SkyDropdownButtonComponent
+} from './dropdown-button.component';
+import {
+  SkyDropdownItemComponent
+} from './dropdown-item.component';
+import {
+  SkyDropdownMenuComponent
+} from './dropdown-menu.component';
+import {
+  SkyDropdownComponent
+} from './dropdown.component';
 
 @NgModule({
   declarations: [
@@ -18,7 +37,8 @@ import { SkyDropdownComponent } from './dropdown.component';
   ],
   imports: [
     CommonModule,
-    SkyPopoverModule
+    SkyPopoverModule,
+    SkyIconModule
   ],
   exports: [
     SkyDropdownButtonComponent,

diff --git a/src/modules/fileattachments/file-drop.component.html b/src/modules/fileattachments/file-drop.component.html
@@ -33,23 +33,23 @@
         <div class="sky-file-drop-text">
           {{ 'file_upload_or_click_to_browse' | skyResources }}
         </div>
-        <i class="fa fa-cloud-upload sky-file-upload-icon"></i>
+        <sky-icon icon="cloud-upload" class="sky-file-upload-icon"></sky-icon>
       </div>
 
       <!-- This will appear when file is dragged over and is valid -->
       <div class="sky-file-drop-contents-accept" >
         <div class="sky-file-drop-text-header sky-headline">
           {{ 'file_upload_drop_files_here' | skyResources }}
         </div>
-        <i class="fa fa-bullseye sky-file-upload-icon"></i>
+        <sky-icon icon="bullseye" class="sky-file-upload-icon"></sky-icon>
       </div>
 
       <!-- This will appear when file is dragged over and is invalid -->
       <div class="sky-file-drop-contents-reject" >
         <div class="sky-file-drop-text-header sky-headline">
           {{ 'file_upload_invalid_file' | skyResources }}
         </div>
-        <i class="fa fa-times-circle sky-file-upload-icon"></i>
+        <sky-icon icon="times-circle" class="sky-file-upload-icon"></sky-icon>
       </div>
     </div>
 

diff --git a/src/modules/fileattachments/file-drop.component.scss b/src/modules/fileattachments/file-drop.component.scss
@@ -96,6 +96,7 @@ button.sky-file-drop {
 .sky-file-upload-icon {
   display: block;
   font-size: 40px;
+  max-height: 40px;
   margin-top: $sky-margin;
 }
 

diff --git a/src/modules/fileattachments/file-item.component.html b/src/modules/fileattachments/file-item.component.html
@@ -11,7 +11,7 @@
         </div>
         <div class="sky-pull-right">
           <button type="button" class="sky-btn sky-btn-default sky-file-item-btn-delete" [attr.aria-label]="'file_item_delete' | skyResources" (click)="itemDelete()">
-              <i class="fa fa-lg fa-trash-o"></i>
+            <sky-icon icon="trash-o" size="lg"></sky-icon>
           </button>
         </div>
     </div>