Merge branch 'master' into toastr-fromscratch

skyux-spa-visual-tests/src/app/flyout/flyout-demo.component.html

@@ -1 +1,15 @@
 <b>Flyout component</b>
+<sky-dropdown buttonType="context-menu">
+    <sky-dropdown-menu>
+        <sky-dropdown-item>
+            <button type="button">
+            Option 1
+            </button>
+        </sky-dropdown-item>
+        <sky-dropdown-item>
+            <button type="button">
+            Option 2
+            </button>
+        </sky-dropdown-item>
+    </sky-dropdown-menu>
+</sky-dropdown>

skyux-spa-visual-tests/src/app/flyout/flyout.visual-spec.ts

@@ -1,6 +1,6 @@
 import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
 
-import { element, by } from 'protractor';
+import { element, by, browser } from 'protractor';
 
 describe('Flyout', () => {
 
@@ -31,4 +31,21 @@ describe('Flyout', () => {
         });
       });
   });
+
+  it('should handle absolutely positioned items inside the flyout', () => {
+    return SkyVisualTest.setupTest('flyout')
+      .then(() => {
+        element(by.css('.sky-btn-primary')).click();
+        browser.sleep(250);
+        element(by.css('.sky-flyout .sky-dropdown-button')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest
+          .compareScreenshot({
+            screenshotName: 'flyout-open-dropdown',
+            selector: 'body'
+        }).then(() => {
+          element(by.css('.sky-flyout .sky-flyout-btn-close')).click();
+        });
+      });
+  });
 });

src/locales/resources_en_US.json

@@ -523,6 +523,10 @@
     "_description": "Placeholder text in grid search box",
     "message": "Find in this list"
   },
+  "help_inline_button_title": {
+    "_description": "The title for the help button.",
+    "message": "Show help content"
+  },
   "link_records_item_info_match": {
     "_description": "",
     "message": "A possible match has been identified for this record. Would you like to link it?"

src/modules/flyout/flyout.component.ts

@@ -44,7 +44,7 @@ const FLYOUT_CLOSED_STATE = 'flyoutClosed';
   styleUrls: ['./flyout.component.scss'],
   animations: [
     trigger('flyoutState', [
-      state(FLYOUT_OPEN_STATE, style({ transform: 'translateX(0)' })),
+      state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
       state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
       transition('void => *', [
         style({ transform: 'translateX(100%)' }),

src/modules/help-inline/fixtures/help-inline-fixtures.module.ts

@@ -1,19 +1,24 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
 
-import { SkyHelpInlineModule } from '../';
+import {
+  CommonModule
+} from '@angular/common';
+
+import { SkyHelpInlineModule } from '../help-inline.module';
 import { HelpInlineTestComponent } from './help-inline.component.fixture';
 
 @NgModule({
-    declarations: [
-        HelpInlineTestComponent
-    ],
-    imports: [
-        CommonModule,
-        SkyHelpInlineModule
-    ],
-    exports: [
-        HelpInlineTestComponent
-    ]
+  declarations: [
+    HelpInlineTestComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyHelpInlineModule
+  ],
+  exports: [
+    HelpInlineTestComponent
+  ]
 })
 export class SkyInlineHlpeFixturesModule { }

src/modules/help-inline/fixtures/help-inline.component.fixture.html

@@ -1,3 +1,3 @@
 <sky-help-inline
-    (actionClick)="buttonClicked()">
+  (actionClick)="buttonClicked()">
 </sky-help-inline>

src/modules/help-inline/fixtures/help-inline.component.fixture.ts

@@ -1,13 +1,15 @@
-import { Component } from '@angular/core';
+import {
+  Component
+} from '@angular/core';
 
 @Component({
-    selector: 'sky-test-cmp',
-    templateUrl: './help-inline.component.fixture.html'
+  selector: 'sky-test-cmp',
+  templateUrl: './help-inline.component.fixture.html'
 })
 export class HelpInlineTestComponent {
-    public buttonIsClicked: boolean = false;
+  public buttonIsClicked = false;
 
-    public buttonClicked() {
-        this.buttonIsClicked = true;
-    }
+  public buttonClicked() {
+    this.buttonIsClicked = true;
+  }
 }

src/modules/help-inline/help-inline.component.html

@@ -1,6 +1,7 @@
 <button
-    class="sky-help-inline fa fa-info-circle"
-    (click)="buttonClicked()"
-    [attr.aria-label]="'show_help_content' | skyResources"
-    >
-</button>
+  class="sky-help-inline"
+  type="button"
+  (click)="onClick()"
+  [attr.title]="'help_inline_button_title' | skyResources">
+  <i class="fa fa-info-circle" aria-hidden="true"></i>
+</button>

src/modules/help-inline/help-inline.component.scss

@@ -6,8 +6,10 @@
   background-color: transparent;
   border: none;
   display: inline-block;
+
   &:hover {
     color: darken($sky-text-color-action-primary, 10%);
     transition: color $sky-transition-time-short;
+    cursor: pointer;
   }
 }

src/modules/help-inline/help-inline.component.spec.ts

@@ -1,39 +1,46 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+import {
+  DebugElement
+} from '@angular/core';
 
-import { BrowserModule, By } from '@angular/platform-browser';
+import {
+  ComponentFixture,
+  TestBed
+} from '@angular/core/testing';
+
+import {
+  BrowserModule,
+  By
+} from '@angular/platform-browser';
 
-import { HelpInlineTestComponent } from './fixtures/help-inline.component.fixture';
 import { SkyHelpInlineModule } from '../help-inline/help-inline.module';
+import { HelpInlineTestComponent } from './fixtures/help-inline.component.fixture';
 
 describe('Help inline component', () => {
-    let fixture: ComponentFixture<HelpInlineTestComponent>;
-    let cmp: HelpInlineTestComponent;
-    let el: HTMLElement;
-    let debugElement: DebugElement;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [
-                HelpInlineTestComponent
-            ],
-            imports: [
-                BrowserModule,
-                SkyHelpInlineModule
-            ]
-        });
-
-        fixture = TestBed.createComponent(HelpInlineTestComponent);
-        cmp = fixture.componentInstance as HelpInlineTestComponent;
-        el = fixture.nativeElement as HTMLElement;
-        debugElement = fixture.debugElement;
-
-        fixture.detectChanges();
-    });
+  let fixture: ComponentFixture<HelpInlineTestComponent>;
+  let cmp: HelpInlineTestComponent;
+  let debugElement: DebugElement;
 
-    it('should emit a click event on button click', () => {
-        debugElement.query(By.css('.sky-help-inline')).triggerEventHandler('click', undefined);
-        fixture.detectChanges();
-        expect(cmp.buttonIsClicked).toBe(true);
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        HelpInlineTestComponent
+      ],
+      imports: [
+        BrowserModule,
+        SkyHelpInlineModule
+      ]
     });
+
+    fixture = TestBed.createComponent(HelpInlineTestComponent);
+    cmp = fixture.componentInstance as HelpInlineTestComponent;
+    debugElement = fixture.debugElement;
+
+    fixture.detectChanges();
+  });
+
+  it('should emit a click event on button click', () => {
+    debugElement.query(By.css('.sky-help-inline')).triggerEventHandler('click', undefined);
+    fixture.detectChanges();
+    expect(cmp.buttonIsClicked).toBe(true);
+  });
 });

src/modules/help-inline/help-inline.component.ts

@@ -1,15 +1,19 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Output
+} from '@angular/core';
 
 @Component({
-    selector: 'sky-help-inline',
-    styleUrls: ['./help-inline.component.scss'],
-    templateUrl: './help-inline.component.html'
+  selector: 'sky-help-inline',
+  templateUrl: './help-inline.component.html',
+  styleUrls: ['./help-inline.component.scss']
 })
 export class SkyHelpInlineComponent {
-    @Output()
-    public actionClick = new EventEmitter<any>();
+  @Output()
+  public actionClick = new EventEmitter<any>();
 
-    public buttonClicked() {
-        this.actionClick.emit();
-    }
+  public onClick() {
+    this.actionClick.emit();
+  }
 }

src/modules/help-inline/help-inline.module.ts

@@ -1,19 +1,27 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
+
+import {
+  CommonModule
+} from '@angular/common';
+
+import {
+  SkyResourcesModule
+} from '../resources';
 
 import { SkyHelpInlineComponent } from './help-inline.component';
-import { SkyResourcesModule } from '../resources';
 
 @NgModule({
-    declarations: [
-        SkyHelpInlineComponent
-    ],
-    imports: [
-        CommonModule,
-        SkyResourcesModule
-    ],
-    exports: [
-        SkyHelpInlineComponent
-    ]
+  declarations: [
+    SkyHelpInlineComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyResourcesModule
+  ],
+  exports: [
+    SkyHelpInlineComponent
+  ]
 })
 export class SkyHelpInlineModule { }