Merge branch 'master' into fix-colorpicker-rgb

CHANGELOG.md

@@ -1,11 +1,22 @@
+# 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.16.0",
   "description": "SKY UX built on Angular 2",
   "author": "Blackbaud, Inc.",
   "homepage": "https://github.com/blackbaud/skyux2",

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'
+        });
+      });
+  });
+});

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

@@ -1,7 +1,22 @@
 <div id="screenshot-sort-full" style="height: 500px;">
   <sky-toolbar>
     <sky-toolbar-item>
-      <sky-sort>
+      <sky-sort [showButtonText]="false">
+        <sky-sort-item
+          *ngFor="let item of sortOptions"
+          [active]="initialState === item.id"
+          (itemSelect)="sortItems(item)">
+          {{item.label}}
+        </sky-sort-item>
+      </sky-sort>
+    </sky-toolbar-item>
+  </sky-toolbar>
+</div>
+
+<div id="screenshot-sort-text" style="height: 500px;">
+  <sky-toolbar>
+    <sky-toolbar-item>
+      <sky-sort [showButtonText]="true">
         <sky-sort-item
           *ngFor="let item of sortOptions"
           [active]="initialState === item.id"

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

@@ -27,4 +27,26 @@ describe('Sort component', () => {
 
   });
 
+  it('should match the baseline sort screenshot when text is shown', () => {
+    return SkyVisualTest.setupTest('sort')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sort-text',
+        selector: '#screenshot-sort-text'
+      });
+    });
+
+  });
+
+  it('should match the baseline sort screenshot when text is on but the screen is small', () => {
+    return SkyVisualTest.setupTest('sort', 400)
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'sort-text-small',
+        selector: '#screenshot-sort-text'
+      });
+    });
+
+  });
+
 });

src/demos/alert/alert-demo.component.html

@@ -2,7 +2,7 @@
   [alertType]="alertType"
   [closeable]="closeable"
   [closed]="closed">
-  This is a sample alert.
+  This is a sample alert. If an alert includes a <a href="">hyperlink</a>, it is automatically styled to maintain accessibility.
 </sky-alert>
 <select [(ngModel)]="alertType">
   <option value="info">info</option>

src/demos/filter/filter-demo.component.html

@@ -3,6 +3,7 @@
     <sky-toolbar-section>
       <sky-toolbar-item>
         <sky-filter-button
+          [showButtonText]="true"
           (filterButtonClick)="filterButtonClicked()">
         </sky-filter-button>
       </sky-toolbar-item>

src/demos/filter/filter-inline-demo.component.html

@@ -4,6 +4,7 @@
       <sky-toolbar-item>
         <sky-filter-button
           [active]="filtersActive"
+          [showButtonText]="true"
           (filterButtonClick)="filterButtonClicked()">
         </sky-filter-button>
       </sky-toolbar-item>

src/demos/flyout/flyout-demo.component.html

@@ -58,3 +58,15 @@
     Open flyout with a URL permalink
   </button>
 </div>
+
+<div>
+  <p>
+    The following button will open a flyout with a button which invokes a custom action callback in the header.
+  </p>
+  <button
+    type="button"
+    class="sky-btn sky-btn-default"
+    (click)="openFlyoutWithPrimaryAction()">
+    Open flyout with a primary action
+  </button>
+</div>

src/demos/flyout/flyout-demo.component.ts

@@ -92,4 +92,23 @@ export class SkyFlyoutDemoComponent {
       }
     });
   }
+
+  public openFlyoutWithPrimaryAction() {
+    this.flyoutService.open(SkyFlyoutDemoInternalComponent, {
+      providers: [{
+        provide: FlyoutDemoContext,
+        useValue: {
+          id: '2',
+          name: 'Partridge'
+        }
+      }],
+      primaryAction: {
+        label: 'Invoke primary action',
+        callback: () => {
+          alert('Primary action invoked');
+        },
+        closeAfterInvoking: true
+      }
+    });
+  }
 }