Merge remote-tracking branch 'upstream/master'

CHANGELOG.md

@@ -1,3 +1,16 @@
+# 2.12.0 (2018-04-23)
+
+- Added select field component. [#1629](https://github.com/blackbaud/skyux2/pull/1629) (Thanks @Blackbaud-JaminQuimby)
+- Added shadow and border-radius CSS classes. [#1571](https://github.com/blackbaud/skyux2/pull/1571)
+- Added support for Builder `1.13.0`. [#1627](https://github.com/blackbaud/skyux2/pull/1627)
+- Adjusted button styles. [#1605](https://github.com/blackbaud/skyux2/pull/1605), [#1641](https://github.com/blackbaud/skyux2/pull/1641)
+- Updated text expand component to automatically expand when the `maxLength` property is set. [#1615](https://github.com/blackbaud/skyux2/pull/1615) (Thanks @Blackbaud-MikitaYankouski)
+- Refactored list secondary actions to use dropdown directly. [#1600](https://github.com/blackbaud/skyux2/pull/1600)
+- Removed the internal `TestUtility` helper from components in favor of Builder's `SkyAppTestUtility`. [#1598](https://github.com/blackbaud/skyux2/pull/1598)
+- Fixed dropdown not scrolling in IE11. [#1642](https://github.com/blackbaud/skyux2/pull/1642) (Thanks @blackbaud-conorwright)
+- Fixed dropdown scroll behavior in a scrollable container. [#1634](https://github.com/blackbaud/skyux2/pull/1634)
+- Fixed custom click events to fire on the dropdown tag. [#1640](https://github.com/blackbaud/skyux2/pull/1640)
+
 # 2.11.0 (2018-03-30)
 
 - Added ability to resize width of flyouts. [#1539](https://github.com/blackbaud/skyux2/pull/1539) (Thanks @Blackbaud-StacyCarlos)

package.json

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

skyux-spa-visual-tests/src/app/select-field/index.html

@@ -0,0 +1 @@
+<select-field-visual></select-field-visual>

skyux-spa-visual-tests/src/app/select-field/select-field-visual.component.html

@@ -0,0 +1,24 @@
+
+<div id="screenshot-select-field-single-mode">
+  <sky-select-field
+    selectMode="single"
+    name="single"
+    [ngModel]="model.single"
+    [data]="data">
+  </sky-select-field>
+</div>
+<div id="screenshot-select-field-multiple-mode">
+  <sky-select-field
+    selectMode="multiple"
+    name="multiple"
+    [ngModel]="model.multiple"
+    [data]="data">
+  </sky-select-field>
+</div>
+
+<button
+  type="button"
+  id="select-field-populate-selected-btn"
+  (click)="populateSelected()">
+  Populate selected
+</button>

skyux-spa-visual-tests/src/app/select-field/select-field-visual.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component
+} from '@angular/core';
+
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Component({
+  selector: 'select-field-visual',
+  templateUrl: './select-field-visual.component.html'
+})
+export class SelectFieldVisualComponent {
+  public staticData = [
+    { id: '1', category: 'Pome', label: 'Apple', description: 'Anne eats apples' },
+    { id: '2', category: 'Berry', label: 'Banana', description: 'Ben eats bananas' },
+    { id: '3', category: 'Pome', label: 'Pear', description: 'Patty eats pears' },
+    { id: '4', category: 'Berry', label: 'Grape', description: 'George eats grapes' },
+    { id: '5', category: 'Berry', label: 'Banana', description: 'Becky eats bananas' },
+    { id: '6', category: 'Citrus', label: 'Lemon', description: 'Larry eats lemons' },
+    { id: '7', category: 'Aggregate fruit', label: 'Strawberry', description: 'Sally eats strawberries' }
+  ];
+
+  public data = new BehaviorSubject<any[]>(this.staticData);
+  public model: any = {};
+
+  public populateSelected() {
+    this.model.multiple = [
+      this.staticData[1],
+      this.staticData[2],
+      this.staticData[3]
+    ];
+    this.model.single = this.staticData[3];
+  }
+}

skyux-spa-visual-tests/src/app/select-field/select-field.visual-spec.ts

@@ -0,0 +1,84 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+import { element, by } from 'protractor';
+
+describe('Select field', () => {
+  it('should match previous multiple mode screenshot', () => {
+    return SkyVisualTest
+      .setupTest('select-field')
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'select-field-multiple',
+          selector: '#screenshot-select-field-multiple-mode'
+        });
+      });
+  });
+
+  it('should match previous single mode screenshot', () => {
+    return SkyVisualTest
+      .setupTest('select-field')
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'select-field-single',
+          selector: '#screenshot-select-field-single-mode'
+        });
+      });
+  });
+
+  it('should match previous multiple mode selected screenshot', () => {
+    return SkyVisualTest
+      .setupTest('select-field')
+      .then(() => {
+        element(by.css('#select-field-populate-selected-btn')).click();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'select-field-multiple-selected',
+          selector: '#screenshot-select-field-multiple-mode'
+        });
+      });
+  });
+
+  it('should match previous single mode selected screenshot', () => {
+    return SkyVisualTest
+      .setupTest('select-field')
+      .then(() => {
+        element(by.css('#select-field-populate-selected-btn')).click();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'select-field-single-selected',
+          selector: '#screenshot-select-field-single-mode'
+        });
+      });
+  });
+
+  it('should match previous single mode picker screenshot', () => {
+    return SkyVisualTest
+      .setupTest('select-field')
+      .then(() => {
+        element(by.css('#screenshot-select-field-single-mode .sky-input-group.sky-btn')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'select-field-single-picker',
+          selector: '.sky-modal',
+          checkAccessibility: false // changing to false because of a modal axe error
+        });
+      })
+      .then(() => {
+        element(by.css('.sky-modal-btn-close')).click();
+      });
+  });
+
+  it('should match previous multiple mode picker screenshot', () => {
+    return SkyVisualTest
+      .setupTest('select-field')
+      .then(() => {
+        element(by.css('#screenshot-select-field-multiple-mode .sky-btn.sky-btn-default')).click();
+        SkyVisualTest.moveCursorOffScreen();
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'select-field-multiple-picker',
+          selector: '.sky-modal',
+          checkAccessibility: false // changing to false because of a modal axe error
+        });
+      })
+      .then(() => {
+        element(by.css('.sky-modal-btn-close')).click();
+      });
+  });
+});

src/core.ts

@@ -57,6 +57,7 @@ import { SkyRadioModule } from './modules/radio';
 import { SkyRepeaterModule } from './modules/repeater';
 import { SkySearchModule } from './modules/search';
 import { SkySectionedFormModule } from './modules/sectioned-form';
+import { SkySelectFieldModule } from './modules/select-field';
 import { SkySortModule } from './modules/sort';
 import { SkyTabsModule } from './modules/tabs';
 import { SkyTextExpandModule } from './modules/text-expand';
@@ -116,6 +117,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyRepeaterModule,
     SkySearchModule,
     SkySectionedFormModule,
+    SkySelectFieldModule,
     SkySortModule,
     SkyTabsModule,
     SkyTextExpandModule,
@@ -179,6 +181,8 @@ export * from './modules/radio';
 export * from './modules/repeater';
 export * from './modules/search';
 export * from './modules/sectioned-form';
+export * from './modules/select-field';
+export * from './modules/select-field/types';
 export * from './modules/sort';
 export * from './modules/tabs';
 export * from './modules/text-expand';

src/demo.ts

@@ -63,6 +63,7 @@ import {
   SkyDemoAddressFormComponent,
   SkyDemoInformationFormComponent,
   SkyDemoPhoneFormComponent,
+  SkySelectFieldDemoComponent,
   SkySortDemoComponent,
   SkyTabsDemoComponent,
   SkyTextExpandDemoComponent,
@@ -140,7 +141,7 @@ const components = [
   SkyDemoAddressFormComponent,
   SkyDemoInformationFormComponent,
   SkyDemoPhoneFormComponent,
-
+  SkySelectFieldDemoComponent,
   SkySortDemoComponent,
   SkyTabsDemoComponent,
   SkyTextExpandDemoComponent,

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

@@ -130,7 +130,7 @@ <h3 class="sky-subsection-heading">
   </div>
 
   <button
-    class="sky-btn sky-btn-primary"
+    class="sky-btn sky-btn-default"
     type="submit">
     Submit
   </button>
@@ -174,7 +174,7 @@ <h2 class="sky-section-heading">
   </div>
 
   <button
-    class="sky-btn sky-btn-primary"
+    class="sky-btn sky-btn-default"
     type="submit">
     Submit
   </button>

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

@@ -160,6 +160,6 @@ <h3>
     type="button"
     class="sky-btn sky-btn-default"
     (click)="toggleResetButton()">
-    Toggle Reset Button
+    Toggle reset button
   </button>
 </p>

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

@@ -1,33 +1,29 @@
 <div style="margin-bottom: 20px;">
   <button
     type="button"
-    class="sky-btn sky-btn-primary"
+    class="sky-btn sky-btn-default"
     (click)="openOKConfirm()">
-    <i class="fa fa-question-circle"></i>
     OK confirm
   </button>
 
   <button
     type="button"
-    class="sky-btn sky-btn-primary"
+    class="sky-btn sky-btn-default"
     (click)="openYesCancelConfirm()">
-    <i class="fa fa-question-circle"></i>
     Yes/cancel confirm
   </button>
 
   <button
     type="button"
-    class="sky-btn sky-btn-primary"
+    class="sky-btn sky-btn-default"
     (click)="openYesNoCancelConfirm()">
-    <i class="fa fa-question-circle"></i>
     Yes/no/cancel confirm
   </button>
 
   <button
     type="button"
     class="sky-btn sky-btn-default"
     (click)="openCustomConfirm()">
-    <i class="fa fa-cog"></i>
     Custom confirm
   </button>
 </div>

src/demos/demo.service.ts

@@ -45,6 +45,7 @@ import {
   SkyRepeaterDemoComponent,
   SkySearchDemoComponent,
   SkySectionedFormDemoComponent,
+  SkySelectFieldDemoComponent,
   SkySortDemoComponent,
   SkyTabsDemoComponent,
   SkyTextExpandDemoComponent,
@@ -882,6 +883,26 @@ export class SkyDemoService {
         }
       ]
     },
+    {
+      name: 'Select field',
+      component: SkySelectFieldDemoComponent,
+      files: [
+        {
+          name: 'select-field-demo.component.html',
+          fileContents: require('!!raw-loader!./select-field/select-field-demo.component.html')
+        },
+        {
+          name: 'select-field-demo.component.scss',
+          fileContents: require('!!raw-loader!./select-field/select-field-demo.component.scss')
+        },
+        {
+          name: 'select-field-demo.component.ts',
+          fileContents: require('!!raw-loader!./select-field/select-field-demo.component.ts'),
+          componentName: 'SkySelectFieldDemoComponent',
+          bootstrapSelector: 'sky-select-field-demo'
+        }
+      ]
+    },
     {
       name: 'Sort',
       component: SkySortDemoComponent,

src/demos/index.ts

@@ -38,6 +38,7 @@ export * from './radio';
 export * from './repeater';
 export * from './search';
 export * from './sectioned-form';
+export * from './select-field';
 export * from './sort';
 export * from './tabs';
 export * from './text-expand';

src/demos/link-records/link-records-demo.component.html

@@ -58,7 +58,7 @@ <h3>
 </sky-link-records>
 
 <button
-  class="sky-btn sky-btn-primary"
+  class="sky-btn sky-btn-default"
   (click)="showResults()">
   Show Results
 </button>
@@ -89,7 +89,7 @@ <h3>
 </ng-template>
 
 <button
-  class="sky-btn sky-btn-primary"
+  class="sky-btn sky-btn-default"
   (click)="showResults()">
   Show Results
 </button>

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

@@ -1,6 +1,6 @@
 <button
   style="margin-bottom: 5px;"
-  class="sky-btn sky-btn-primary"
+  class="sky-btn sky-btn-default"
   (click)="changeData()">
   Change data
 </button>

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

@@ -41,7 +41,7 @@
   </div>
 
   <button
-    class="sky-btn sky-btn-primary"
+    class="sky-btn sky-btn-default"
     type="submit">
     Submit
   </button>

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

@@ -1,23 +1,23 @@
-<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('defaultModal')">
+<button type="button" class="sky-btn sky-btn-default" (click)="openModal('defaultModal')">
   Open modal
 </button>
 
-<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('smallModal')">
+<button type="button" class="sky-btn sky-btn-default" (click)="openModal('smallModal')">
   Open small modal
 </button>
 
-<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('largeModal')">
+<button type="button" class="sky-btn sky-btn-default" (click)="openModal('largeModal')">
   Open large modal
 </button>
 
-<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('fullScreenModal')">
+<button type="button" class="sky-btn sky-btn-default" (click)="openModal('fullScreenModal')">
  Open full-screen modal
 </button>
 
-<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('tiledModal')">
+<button type="button" class="sky-btn sky-btn-default" (click)="openModal('tiledModal')">
   Open tiled modal
 </button>
 
-<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('withHelpHeader')">
+<button type="button" class="sky-btn sky-btn-default" (click)="openModal('withHelpHeader')">
   Open modal with help header
 </button>

src/demos/sectioned-form/sectioned-form-demo.component.html

@@ -15,6 +15,6 @@ <h3>Sectioned form — Index: {{ activeIndexDisplay }}</h3>
 </div>
 
 <h3>With a modal</h3>
-<button type="button" class="sky-btn sky-btn-primary" (click)="openModal()">
+<button type="button" class="sky-btn sky-btn-default" (click)="openModal()">
   Open sectioned form
 </button>

src/demos/select-field/index.ts

@@ -0,0 +1 @@
+export * from './select-field-demo.component';