diff --git a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-1-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-1-chrome-1000x800-dpr-1.png deleted file mode 100644 index 98947a014..000000000 Binary files a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-1-chrome-1000x800-dpr-1.png and /dev/null differ diff --git a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-2-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-2-chrome-1000x800-dpr-1.png deleted file mode 100644 index d8638e25c..000000000 Binary files a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-2-chrome-1000x800-dpr-1.png and /dev/null differ diff --git a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-3-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-3-chrome-1000x800-dpr-1.png deleted file mode 100644 index d88ab242e..000000000 Binary files a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-3-chrome-1000x800-dpr-1.png and /dev/null differ diff --git a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-1-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-1-chrome-1000x800-dpr-1.png deleted file mode 100644 index 45e25cd2b..000000000 Binary files a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-1-chrome-1000x800-dpr-1.png and /dev/null differ diff --git a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-2-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-2-chrome-1000x800-dpr-1.png deleted file mode 100644 index 2b4948325..000000000 Binary files a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-2-chrome-1000x800-dpr-1.png and /dev/null differ diff --git a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-3-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-3-chrome-1000x800-dpr-1.png deleted file mode 100644 index 536d01de2..000000000 Binary files a/skyux-spa-visual-tests/screenshots-baseline/progress-Indicator-Wizard-3-chrome-1000x800-dpr-1.png and /dev/null differ diff --git a/skyux-spa-visual-tests/src/app/progress-indicator/progress-indicator-visual.component.html b/skyux-spa-visual-tests/src/app/progress-indicator/progress-indicator-visual.component.html index 038b0f9d7..37c71a459 100644 --- a/skyux-spa-visual-tests/src/app/progress-indicator/progress-indicator-visual.component.html +++ b/skyux-spa-visual-tests/src/app/progress-indicator/progress-indicator-visual.component.html @@ -17,6 +17,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/demos/progress-indicator/progress-indicator-demo.component.scss b/src/demos/progress-indicator/progress-indicator-demo.component.scss index bbadf5c89..640b94883 100644 --- a/src/demos/progress-indicator/progress-indicator-demo.component.scss +++ b/src/demos/progress-indicator/progress-indicator-demo.component.scss @@ -1,4 +1,4 @@ -sky-progress-indicator { +#waterfall-indicator { display: block; margin-bottom: 30px; } diff --git a/src/modules/progress-indicator/fixtures/progress-indicator.component.fixture.html b/src/modules/progress-indicator/fixtures/progress-indicator.component.fixture.html index 64f2c438a..7347c7d44 100644 --- a/src/modules/progress-indicator/fixtures/progress-indicator.component.fixture.html +++ b/src/modules/progress-indicator/fixtures/progress-indicator.component.fixture.html @@ -1,5 +1,6 @@ -
- {{ itemNumber }} - {{ title }} + {{ displayTitle }}
-
{ + it('should use horizontal display if set', fakeAsync(() => { fixture.componentInstance.displayMode = SkyProgressIndicatorDisplayMode.Horizontal; fixture.detectChanges(); tick(); @@ -56,6 +56,34 @@ describe('Progress indicator component', function () { expect(element.querySelector('.sky-progress-indicator-item-step')).toBeFalsy(); })); + it('should use passive mode if set', fakeAsync(() => { + fixture.componentInstance.isPassive = true; + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + componentInstance = fixture.componentInstance.progressIndicator; + + expect(componentInstance.isPassive).toBeTruthy(); + for (let item of componentInstance.progressItems.toArray()) { + expect(item.isPassive).toBeTruthy(); + } + })); + + // May be removed in the future if support is added + it('should not use passive mode if set for horizontal display', fakeAsync(() => { + fixture.componentInstance.displayMode = SkyProgressIndicatorDisplayMode.Horizontal; + fixture.componentInstance.isPassive = true; + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + componentInstance = fixture.componentInstance.progressIndicator; + + expect(componentInstance.isPassive).toBeFalsy(); + for (let item of componentInstance.progressItems.toArray()) { + expect(item.isPassive).toBeFalsy(); + } + })); + it('should use starting index if set', fakeAsync(() => { fixture.componentInstance.startingIndex = 2; fixture.detectChanges(); @@ -82,7 +110,7 @@ describe('Progress indicator component', function () { componentInstance = fixture.componentInstance.progressIndicator; })); - it('should use vertical mode by default', fakeAsync(() => { + it('should use vertical display by default', fakeAsync(() => { let element = fixture.nativeElement; expect(componentInstance.isHorizontal).toBeFalsy(); @@ -94,6 +122,13 @@ describe('Progress indicator component', function () { expect(element.querySelector('.sky-progress-indicator-item-step')).toBeTruthy(); })); + it('should not use passive mode by default', fakeAsync(() => { + expect(componentInstance.isPassive).toBeFalsy(); + for (let item of componentInstance.progressItems.toArray()) { + expect(item.isPassive).toBeFalsy(); + } + })); + it('should set item numbers', () => { componentInstance.progressItems.forEach((item: any, index: number) => { expect(item.itemNumber).toBe(index + 1); diff --git a/src/modules/progress-indicator/progress-indicator.component.ts b/src/modules/progress-indicator/progress-indicator.component.ts index 8a4a08a7a..1abe15e04 100644 --- a/src/modules/progress-indicator/progress-indicator.component.ts +++ b/src/modules/progress-indicator/progress-indicator.component.ts @@ -46,6 +46,15 @@ export class SkyProgressIndicatorComponent implements AfterContentInit, OnDestro return this.displayMode === SkyProgressIndicatorDisplayMode.Horizontal; } + @Input() + public get isPassive(): boolean { + // Passive mode is not supported for horizontal displays at the moment + return false || (this._isPassive && !this.isHorizontal); + } + public set isPassive(value: boolean) { + this._isPassive = value; + } + @Input() public messageStream = new Subject(); @@ -57,6 +66,7 @@ export class SkyProgressIndicatorComponent implements AfterContentInit, OnDestro private activeIndex = 0; private _displayMode: SkyProgressIndicatorDisplayMode; + private _isPassive: boolean; private ngUnsubscribe = new Subject(); public ngAfterContentInit(): void { @@ -118,6 +128,7 @@ export class SkyProgressIndicatorComponent implements AfterContentInit, OnDestro this.progressItems.forEach((element, index) => { element.displayMode = this.displayMode; element.itemNumber = index + 1; + element.isPassive = this.isPassive; }); }