Skip to content

Commit 30a310e

Browse files
crisbetoVivian Hu
authored and
Vivian Hu
committedJan 18, 2019
fix(tabs): better handling of animationDuration without units (#14778)
Based off of the discussions on #13428. Handles values passed to `animationDuration` that don't have units, rather than allowing them to continue through to the `BrowserAnimationsModule` and to throw an error.
1 parent 4d85e03 commit 30a310e

File tree

2 files changed

+27
-3
lines changed

2 files changed

+27
-3
lines changed
 

‎src/lib/tabs/tab-group.spec.ts

+20-1
Original file line numberDiff line numberDiff line change
@@ -622,7 +622,7 @@ describe('nested MatTabGroup with enabled animations', () => {
622622
beforeEach(fakeAsync(() => {
623623
TestBed.configureTestingModule({
624624
imports: [MatTabsModule, BrowserAnimationsModule],
625-
declarations: [NestedTabs]
625+
declarations: [NestedTabs, TabsWithCustomAnimationDuration]
626626
});
627627

628628
TestBed.compileComponents();
@@ -635,6 +635,14 @@ describe('nested MatTabGroup with enabled animations', () => {
635635
tick();
636636
}).not.toThrow();
637637
}));
638+
639+
it('should not throw when setting an animationDuration without units', fakeAsync(() => {
640+
expect(() => {
641+
let fixture = TestBed.createComponent(TabsWithCustomAnimationDuration);
642+
fixture.detectChanges();
643+
tick();
644+
}).not.toThrow();
645+
}));
638646
});
639647

640648

@@ -861,3 +869,14 @@ class TabGroupWithAriaInputs {
861869
})
862870
class TabGroupWithIsActiveBinding {
863871
}
872+
873+
874+
@Component({
875+
template: `
876+
<mat-tab-group animationDuration="500">
877+
<mat-tab label="One">Tab one content</mat-tab>
878+
<mat-tab label="Two">Tab two content</mat-tab>
879+
</mat-tab-group>
880+
`,
881+
})
882+
class TabsWithCustomAnimationDuration {}

‎src/lib/tabs/tab-group.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,13 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
129129
/** Position of the tab header. */
130130
@Input() headerPosition: MatTabHeaderPosition = 'above';
131131

132-
/** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
133-
@Input() animationDuration: string;
132+
/** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
133+
@Input()
134+
get animationDuration(): string { return this._animationDuration; }
135+
set animationDuration(value: string) {
136+
this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value;
137+
}
138+
private _animationDuration: string;
134139

135140
/** Background color of the tab group. */
136141
@Input()

0 commit comments

Comments
 (0)
Please sign in to comment.