From 5b0305eb481e234ea58ab2fc76e62993caa68243 Mon Sep 17 00:00:00 2001 From: "BLACKBAUD\\Trevor.Burch" Date: Wed, 14 Nov 2018 15:38:34 -0500 Subject: [PATCH 1/4] Fixed stylings around invalid select fields --- .../select-field/select-field-visual.component.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/app/visual/select-field/select-field-visual.component.scss diff --git a/src/app/visual/select-field/select-field-visual.component.scss b/src/app/visual/select-field/select-field-visual.component.scss new file mode 100644 index 0000000..ddd9ece --- /dev/null +++ b/src/app/visual/select-field/select-field-visual.component.scss @@ -0,0 +1,10 @@ +.select-field-demo-alert { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #cdcfd2; + border-radius: 3px; +} + +.select-field-demo-alert pre { + margin: 0; +} From 5108d445cfedb1bb4f26bb132fbbad9af4a16009 Mon Sep 17 00:00:00 2001 From: "BLACKBAUD\\Trevor.Burch" Date: Thu, 15 Nov 2018 11:26:01 -0500 Subject: [PATCH 2/4] Fixed invalid commit --- .../modules/select-field/select-field.component.scss | 7 +++++++ .../select-field/select-field-visual.component.scss | 10 ---------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/app/public/modules/select-field/select-field.component.scss b/src/app/public/modules/select-field/select-field.component.scss index f101b84..5d01bd0 100644 --- a/src/app/public/modules/select-field/select-field.component.scss +++ b/src/app/public/modules/select-field/select-field.component.scss @@ -1,3 +1,6 @@ +@import "~@skyux/theme/scss/mixins"; +@import "~@skyux/theme/scss/_compat/mixins"; + .sky-select-field-multiple-select-mode { > .sky-btn { margin-bottom: 10px; @@ -30,3 +33,7 @@ } } } + +:host(.ng-invalid.ng-touched) .sky-input-group { + @include sky-field-status(invalid); +} diff --git a/src/app/visual/select-field/select-field-visual.component.scss b/src/app/visual/select-field/select-field-visual.component.scss index ddd9ece..e69de29 100644 --- a/src/app/visual/select-field/select-field-visual.component.scss +++ b/src/app/visual/select-field/select-field-visual.component.scss @@ -1,10 +0,0 @@ -.select-field-demo-alert { - padding: 10px; - margin-bottom: 10px; - border: 1px solid #cdcfd2; - border-radius: 3px; -} - -.select-field-demo-alert pre { - margin: 0; -} From 3887607ae52c46cc052f573d1c431f3c006877e6 Mon Sep 17 00:00:00 2001 From: Trevor Burch Date: Thu, 15 Nov 2018 11:27:08 -0500 Subject: [PATCH 3/4] Remove accidentally added file --- src/app/visual/select-field/select-field-visual.component.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/app/visual/select-field/select-field-visual.component.scss diff --git a/src/app/visual/select-field/select-field-visual.component.scss b/src/app/visual/select-field/select-field-visual.component.scss deleted file mode 100644 index e69de29..0000000 From c0aea836447f6ef594f15e5129d13f114bbec058 Mon Sep 17 00:00:00 2001 From: "BLACKBAUD\\Trevor.Burch" Date: Tue, 20 Nov 2018 11:58:24 -0500 Subject: [PATCH 4/4] Added visual test --- e2e/select-field.e2e-spec.ts | 9 +++++++++ .../select-field/select-field.component.ts | 5 +++-- .../select-field-visual.component.html | 20 +++++++++++-------- .../select-field-visual.component.ts | 4 +++- 4 files changed, 27 insertions(+), 11 deletions(-) diff --git a/e2e/select-field.e2e-spec.ts b/e2e/select-field.e2e-spec.ts index e57f284..3dbae69 100644 --- a/e2e/select-field.e2e-spec.ts +++ b/e2e/select-field.e2e-spec.ts @@ -21,6 +21,15 @@ describe('Select field', () => { expect('#screenshot-select-field-single-mode').toMatchBaselineScreenshot(done); }); + it('should match previous single mode screenshot with validation', (done) => { + element(by.css('#screenshot-select-field-single-mode .sky-input-group.sky-btn')).click(); + element(by.css('.sky-modal-btn-close')).click(); + SkyHostBrowser.moveCursorOffScreen(); + expect('#screenshot-select-field-single-mode-wrapper').toMatchBaselineScreenshot(done, { + screenshotName: 'select-field-single-mode-validation' + }); + }); + it('should match previous multiple mode selected screenshot', (done) => { element(by.css('#select-field-populate-selected-btn')).click(); expect('#screenshot-select-field-multiple-mode').toMatchBaselineScreenshot(done); diff --git a/src/app/public/modules/select-field/select-field.component.ts b/src/app/public/modules/select-field/select-field.component.ts index 0d7dbc7..e52bc87 100644 --- a/src/app/public/modules/select-field/select-field.component.ts +++ b/src/app/public/modules/select-field/select-field.component.ts @@ -179,6 +179,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor { this.writeValue(result.data); } } + this.onTouched(); }); }); } @@ -197,9 +198,9 @@ export class SkySelectFieldComponent implements ControlValueAccessor { // Angular automatically constructs these methods. /* istanbul ignore next */ - public onChange = (value: any) => {}; + public onChange = (value: any) => { }; /* istanbul ignore next */ - public onTouched = () => {}; + public onTouched = () => { }; public registerOnChange(fn: (value: any) => void) { this.onChange = fn; diff --git a/src/app/visual/select-field/select-field-visual.component.html b/src/app/visual/select-field/select-field-visual.component.html index eed590a..6f02bac 100644 --- a/src/app/visual/select-field/select-field-visual.component.html +++ b/src/app/visual/select-field/select-field-visual.component.html @@ -1,12 +1,16 @@ - -
- - +
+
+
+ + +
+