Skip to content

Commit 5d8fc8b

Browse files
committed
fix(material/tabs): deprecate backgroundColor API
1 parent 714eac3 commit 5d8fc8b

File tree

1 file changed

+16
-7
lines changed

1 file changed

+16
-7
lines changed

src/material/tabs/tab-group.ts

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ export interface MatTabGroupBaseHeader {
5252
/** Possible positions for the tab header. */
5353
export type MatTabHeaderPosition = 'above' | 'below';
5454

55+
/** Boolean constant that determines whether the tab group supports the `backgroundColor` input */
56+
const ENABLE_BACKGROUND_INPUT = true;
57+
5558
/**
5659
* Material design tab-group component. Supports basic tab pairs (label + content) and includes
5760
* animated ink-bar, keyboard navigation, and screen reader.
@@ -201,22 +204,28 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
201204
@Input({transform: booleanAttribute})
202205
preserveContent: boolean = false;
203206

204-
/** Background color of the tab group. */
207+
/**
208+
* Background color of the tab group.
209+
* @deprecated The background color should be customized through Sass theming APIs.
210+
* @breaking-change 20.0.0 Remove this input
211+
*/
205212
@Input()
206213
get backgroundColor(): ThemePalette {
207214
return this._backgroundColor;
208215
}
209216

210217
set backgroundColor(value: ThemePalette) {
211-
const classList: DOMTokenList = this._elementRef.nativeElement.classList;
218+
if (ENABLE_BACKGROUND_INPUT) {
219+
const classList: DOMTokenList = this._elementRef.nativeElement.classList;
212220

213-
classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);
221+
classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);
214222

215-
if (value) {
216-
classList.add('mat-tabs-with-background', `mat-background-${value}`);
217-
}
223+
if (value) {
224+
classList.add('mat-tabs-with-background', `mat-background-${value}`);
225+
}
218226

219-
this._backgroundColor = value;
227+
this._backgroundColor = value;
228+
}
220229
}
221230

222231
private _backgroundColor: ThemePalette;

0 commit comments

Comments
 (0)