Merge branch 'master' of https://github.com/blackbaud/skyux2 into fix…

…-timepicker-input-clear

CHANGELOG.md

@@ -1,11 +1,31 @@
+# 2.17.0 (2018-07-05)
+
+- Added primary action button to flyout component toolbar. [#1766](https://github.com/blackbaud/skyux2/pull/1766) (Thanks @Blackbaud-StewartStephens)
+- Updated accessibility for colorpicker component. [#1789](https://github.com/blackbaud/skyux2/pull/1789)
+- Updated accessibility for dropdown button component. [#1781](https://github.com/blackbaud/skyux2/pull/1781)
+- Updated accessibility for tabset component. [#1786](https://github.com/blackbaud/skyux2/pull/1786)
+- Updated accessibility for action button component. [#1778](https://github.com/blackbaud/skyux2/pull/1778)
+- Updated accessibility for link records component. [#1782](https://github.com/blackbaud/skyux2/pull/1782)
+
+# 2.16.0 (2018-07-02)
+
+- Restructured list toolbar component to meet design guidelines. [#1645](https://github.com/blackbaud/skyux2/pull/1645) (Thanks @Blackbaud-TrevorBurch)
+- Added ARIA labels to datepicker component. [#1753](https://github.com/blackbaud/skyux2/pull/1753)
+- Added ARIA roles to dropdown component. [#1749](https://github.com/blackbaud/skyux2/pull/1749)
+- Added default value for timepicker component's `timeFormat` input. [#1736](https://github.com/blackbaud/skyux2/pull/1736)
+- Fixed paging component's `maxPages` input to correctly display the maximum number of pages. [#1735](https://github.com/blackbaud/skyux2/pull/1735)
+- Added hyperlink anchor tags to demos for alert and toast components. [#1723](https://github.com/blackbaud/skyux2/pull/1723)
+- Fixed race condition in wait service during teardown of wait component. [#1739](https://github.com/blackbaud/skyux2/pull/1739)
+- Fixed incorrect tab indexes for conditionally rendered tabs. [#1738](https://github.com/blackbaud/skyux2/pull/1738)
+
 # 2.15.0 (2018-06-18)
 
 - Added debounce time to search component. [#1726](https://github.com/blackbaud/skyux2/pull/1726) (Thanks @Blackbaud-LoganJahnke)
-- Added `startingDay` input to datepicker directive. [#1732](https://github.com/blackbaud/skyux2/pull/1732)
-- Fixed datepicker not clearing value from underlying input element. [#1730](https://github.com/blackbaud/skyux2/pull/1730)
-- Fixed repeater not initializing correctly when consumed by a component with a change detection strategy of `OnPush`. [#1724](https://github.com/blackbaud/skyux2/pull/1724)
-- Fixed numeric service not using accurate localization symbols. [#1716](https://github.com/blackbaud/skyux2/pull/1716)
-- Fixed issue with modal trying to close itself on route change if it is already closed. [#1741](https://github.com/blackbaud/skyux2/pull/1741)
+- Added `startingDay` to datepicker input directive. [#1732](https://github.com/blackbaud/skyux2/pull/1732)
+- Fixed datepicker input directive to clear value from underlying input element. [#1730](https://github.com/blackbaud/skyux2/pull/1730)
+- Fixed repeater component to correctly initialize when consumed by component with change detection strategy of `OnPush`. [#1724](https://github.com/blackbaud/skyux2/pull/1724)
+- Fixed numeric service to use accurate localization symbols. [#1716](https://github.com/blackbaud/skyux2/pull/1716)
+- Fixed issue with modal component trying to close itself on route change if it is already closed. [#1741](https://github.com/blackbaud/skyux2/pull/1741)
 
 # 2.14.0 (2018-06-05)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blackbaud/skyux",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "description": "SKY UX built on Angular 2",
   "author": "Blackbaud, Inc.",
   "homepage": "https://github.com/blackbaud/skyux2",

skyux-spa-visual-tests/config/utils/start-visual.js

@@ -201,4 +201,3 @@ function spawnBuild(skyPagesConfig, webpack) {
     });
   });
 }
-

skyux-spa-visual-tests/src/app/app-extras.module.ts

@@ -12,6 +12,8 @@ import { ModalTiledDemoComponent } from './modal/modal-tiled-demo.component';
 import { Tile1Component } from './tiles/tile1.component';
 import { Tile2Component } from './tiles/tile2.component';
 
+require('style-loader!./visual.scss');
+
 // Specify entry components, module-level providers, etc. here.
 @NgModule({
   providers: [],

skyux-spa-visual-tests/src/app/confirm/confirm-visual.component.html

@@ -12,6 +12,13 @@
   Yes/cancel confirm
 </button>
 
+<button
+    type="button"
+    class="sky-btn sky-btn-primary sky-confirm-btn-body"
+    (click)="openConfirmWithBody()">
+    Confirm with body
+  </button>
+
 <button
   type="button"
   class="sky-btn sky-btn-primary sky-confirm-btn-yesnocancel"

skyux-spa-visual-tests/src/app/confirm/confirm-visual.component.ts

@@ -28,6 +28,14 @@ export class ConfirmVisualComponent {
     });
   }
 
+  public openConfirmWithBody() {
+   this.confirmService.open({
+      message: 'Do you wish to continue?',
+      body: 'This could be dangerous!',
+      type: SkyConfirmType.YesCancel
+    });
+  }
+
   public openYesNoCancelConfirm() {
     this.confirmService.open({
       message: 'Do you wish to continue?',

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

@@ -39,6 +39,24 @@ describe('Confirm', () => {
       });
   });
 
+  it('should match previous body screenshot', () => {
+    return SkyVisualTest
+      .setupTest('confirm')
+      .then(() => {
+        element(by.css('.sky-confirm-btn-body')).click();
+
+        SkyVisualTest.moveCursorOffScreen();
+
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'confirm-body',
+          selector: '.sky-modal'
+        });
+      })
+      .then(() => {
+        element(by.css('.sky-confirm-buttons .sky-btn-primary')).click();
+      });
+  });
+
   it('should match previous YesNoCancel screenshot', () => {
     return SkyVisualTest
       .setupTest('confirm')
@@ -111,6 +129,24 @@ describe('Confirm', () => {
       });
   });
 
+  it('should match previous body screenshot on small screens', () => {
+    return SkyVisualTest
+      .setupTest('confirm', 480)
+      .then(() => {
+        element(by.css('.sky-confirm-btn-body')).click();
+
+        SkyVisualTest.moveCursorOffScreen();
+
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'confirm-body',
+          selector: '.sky-modal'
+        });
+      })
+      .then(() => {
+        element(by.css('.sky-confirm-buttons .sky-btn-primary')).click();
+      });
+  });
+
   it('should match previous YesNoCancel screenshot on small screens', () => {
     return SkyVisualTest
       .setupTest('confirm', 480)

skyux-spa-visual-tests/src/app/filter/filter-visual.component.html

@@ -1,7 +1,16 @@
 <div id="screenshot-filter-button">
   <sky-filter-button
     [active]="filtersActive"
-    (filterButtonClick)="filtersActive = !filtersActive">
+    (filterButtonClick)="filtersActive = !filtersActive"
+    [showButtonText]="false">
+  </sky-filter-button>
+</div>
+
+<div id="screenshot-filter-button-text">
+  <sky-filter-button
+    [active]="filtersActive"
+    (filterButtonClick)="filtersActive = !filtersActive"
+    [showButtonText]="true">
   </sky-filter-button>
 </div>
 

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

@@ -15,6 +15,28 @@ describe('Filter', () => {
 
   });
 
+  it('should match the previous screenshot for filter button when text is shown', () => {
+    return SkyVisualTest.setupTest('filter')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'filter-button-text',
+        selector: '#screenshot-filter-button-text'
+      });
+    });
+
+  });
+
+  it('should match the previous screenshot for filter button when text is on but the screen is small', () => {
+    return SkyVisualTest.setupTest('filter', 400)
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'filter-button-text-small',
+        selector: '#screenshot-filter-button-text'
+      });
+    });
+
+  });
+
   it('should match previous screenshot for active filter button', () => {
     return SkyVisualTest.setupTest('filter')
     .then(() => {

skyux-spa-visual-tests/src/app/list-column-selector-action/index.html

@@ -0,0 +1 @@
+<list-column-selector-action-visual></list-column-selector-action-visual>

skyux-spa-visual-tests/src/app/list-column-selector-action/list-column-selector-action-visual.component.html

@@ -0,0 +1,25 @@
+<div id="screenshot-list-column-selector-action">
+  <sky-list [data]="data">
+    <sky-list-toolbar>
+      <sky-list-column-selector-action [gridView]="grid"></sky-list-column-selector-action>
+    </sky-list-toolbar>
+    <sky-list-view-grid fit="scroll">
+      <sky-grid-column field="column1" heading="Column1"></sky-grid-column>
+      <sky-grid-column field="column2" heading="Column2"></sky-grid-column>
+    </sky-list-view-grid>
+  </sky-list>
+</div>
+
+<div id="screenshot-list-column-selector-action-deprecated">
+  <sky-list [data]="data">
+    <sky-list-toolbar>
+      <sky-list-secondary-actions>
+        <sky-list-column-selector-action [gridView]="grid"></sky-list-column-selector-action>
+      </sky-list-secondary-actions>
+    </sky-list-toolbar>
+    <sky-list-view-grid fit="scroll" #grid>
+      <sky-grid-column field="column1" heading="Column1"></sky-grid-column>
+      <sky-grid-column field="column2" heading="Column2"></sky-grid-column>
+    </sky-list-view-grid>
+  </sky-list>
+</div>

skyux-spa-visual-tests/src/app/list-column-selector-action/list-column-selector-action-visual.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+@Component({
+  selector: 'list-column-selector-action-visual',
+  templateUrl: './list-column-selector-action-visual.component.html'
+})
+export class ListColumnSelectorActionVisualComponent {
+
+  public data: Observable<Array<any>> = Observable.of([
+    { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples'},
+    { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
+    { id: '3', column1: 303, column2: 'Pear', column3: 'Patty eats pears' },
+    { id: '4', column1: 404, column2: 'Grape', column3: 'George eats grapes' },
+    { id: '5', column1: 505, column2: 'Banana', column3: 'Becky eats bananas' },
+    { id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
+    { id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
+  ]);
+}

skyux-spa-visual-tests/src/app/list-column-selector-action/list-column-selector-action.visual-spec.ts

@@ -0,0 +1,42 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+import { element, by } from 'protractor';
+
+describe('list-column-selector-action component', () => {
+
+  it('should display toolbar with the column chooser', () => {
+    return SkyVisualTest
+      .setupTest('list-column-selector-action')
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'list-column-selector-action',
+          selector: '#screenshot-list-column-selector-action'
+        });
+      });
+  });
+
+  it('should display toolbar with the column chooser without text when a small screen', () => {
+    return SkyVisualTest
+      .setupTest('list-column-selector-action', 400)
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'list-column-selector-action-small',
+          selector: '#screenshot-list-column-selector-action'
+        });
+      });
+  });
+
+  it('should display toolbar with the column chooser in the deprecated manner', () => {
+    return SkyVisualTest
+      .setupTest('list-column-selector-action')
+      .then(() => {
+        return element(by.css('#screenshot-list-column-selector-action-deprecated .sky-list-secondary-actions .sky-dropdown-button'))
+          .click() as any;
+      })
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'list-column-selector-action-deprecated',
+          selector: '#screenshot-list-column-selector-action-deprecated'
+        });
+      });
+  });
+});

skyux-spa-visual-tests/src/app/list-toolbar/index.html

@@ -0,0 +1 @@
+<list-toolbar-visual></list-toolbar-visual>

skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.html

@@ -0,0 +1,44 @@
+<div id="screenshot-list-toolbar">
+  <sky-list [data]="data">
+    <sky-list-toolbar>
+      <sky-list-secondary-actions>
+        <sky-list-secondary-action>
+          <button type="button">
+            Option
+          </button>
+        </sky-list-secondary-action>
+      </sky-list-secondary-actions>
+      <sky-list-column-selector-action [gridView]="grid"></sky-list-column-selector-action>
+      <sky-list-toolbar-sort
+        label="Custom"
+        field="column1"
+        type="string"
+        [descending]="false">
+      </sky-list-toolbar-sort>
+      <sky-list-filter-button>
+        <sky-filter-button [showButtonText]="true">
+        </sky-filter-button>
+      </sky-list-filter-button>
+      <sky-list-toolbar-view-actions>
+        <button
+          class="sky-btn sky-btn-default"
+          title="Sort descending"
+          type="button"
+        >
+          <i class="fa fa-angle-double-down" aria-hidden="true"></i>
+        </button>
+        <button
+          class="sky-btn sky-btn-default"
+          title="Sort ascending"
+          type="button"
+        >
+          <i class="fa fa-angle-double-up" aria-hidden="true"></i>
+        </button>
+      </sky-list-toolbar-view-actions>
+    </sky-list-toolbar>
+    <sky-list-view-grid fit="scroll" #grid>
+      <sky-grid-column field="column1" heading="Column1"></sky-grid-column>
+      <sky-grid-column field="column2" heading="Column2"></sky-grid-column>
+    </sky-list-view-grid>
+  </sky-list>
+</div>

skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar-visual.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+@Component({
+  selector: 'list-toolbar-visual',
+  templateUrl: './list-toolbar-visual.component.html'
+})
+export class ListToolbarVisualComponent {
+
+  public data: Observable<Array<any>> = Observable.of([
+    { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples'},
+    { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
+    { id: '3', column1: 303, column2: 'Pear', column3: 'Patty eats pears' },
+    { id: '4', column1: 404, column2: 'Grape', column3: 'George eats grapes' },
+    { id: '5', column1: 505, column2: 'Banana', column3: 'Becky eats bananas' },
+    { id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
+    { id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
+  ]);
+}

skyux-spa-visual-tests/src/app/list-toolbar/list-toolbar.visual-spec.ts

@@ -0,0 +1,35 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+import { element, by } from 'protractor';
+
+describe('list-toolbar component', () => {
+
+  it('should display toolbar with the column chooser', () => {
+    return SkyVisualTest
+      .setupTest('list-toolbar')
+      .then(() => {
+        return element(by.css('#screenshot-list-toolbar .sky-list-secondary-actions .sky-dropdown-button'))
+          .click() as any;
+      })
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'list-toolbar',
+          selector: '#screenshot-list-toolbar'
+        });
+      });
+  });
+
+  it('should display toolbar correctly when a small screen', () => {
+    return SkyVisualTest
+      .setupTest('list-toolbar', 400)
+      .then(() => {
+        return element(by.css('#screenshot-list-toolbar .sky-list-secondary-actions .sky-dropdown-button'))
+          .click() as any;
+      })
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'list-toolbar-small',
+          selector: '#screenshot-list-toolbar'
+        });
+      });
+  });
+});