Skip to content

Commit

Permalink
refactor(material/list): remove deprecated APIs for version 13
Browse files Browse the repository at this point in the history
Removes the APIs that were marked for removal in version 13 in the `material/list` package.

BREAKING CHANGE:
* `mat-list-item-avatar` CSS class has been renamed to `mat-list-item-with-avatar`.
* `MatSelectionListChange.option` has been removed. Use `MatSelectionListChange.options` instead.
* `MatSelectionList.tabIndex` input has been removed.
* `tabIndex` parameter of the `MatSelectionList` constructor has been removed.
* `_focusMonitor` parameter of the `MatSelectionList` constructor is now required.
* `getHarnessLoaderForContent` has been removed from the various test item harnesses. Use `getChildLoader(MatListItemSection.CONTENT)` instead.
  • Loading branch information
crisbeto committed Aug 8, 2021
1 parent c03d8ac commit 6cea924
Show file tree
Hide file tree
Showing 7 changed files with 21 additions and 42 deletions.
2 changes: 0 additions & 2 deletions src/material/list/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,6 @@ export class MatListSubheaderCssMatStyler {}
host: {
'class': 'mat-list-item mat-focus-indicator',
'[class.mat-list-item-disabled]': 'disabled',
// @breaking-change 8.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`.
'[class.mat-list-item-avatar]': '_avatar || _icon',
'[class.mat-list-item-with-avatar]': '_avatar || _icon',
},
inputs: ['disableRipple'],
Expand Down
26 changes: 4 additions & 22 deletions src/material/list/selection-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
} from '@angular/cdk/keycodes';
import {
AfterContentInit,
Attribute,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Expand Down Expand Up @@ -66,12 +65,6 @@ export class MatSelectionListChange {
constructor(
/** Reference to the selection list that emitted the event. */
public source: MatSelectionList,
/**
* Reference to the option that has been changed.
* @deprecated Use `options` instead, because some events may change more than one option.
* @breaking-change 12.0.0
*/
public option: MatListOption,
/** Reference to the options that have been changed. */
public options: MatListOption[]) {}
}
Expand Down Expand Up @@ -364,12 +357,6 @@ export class MatSelectionList extends _MatSelectionListBase implements CanDisabl
@Output() readonly selectionChange: EventEmitter<MatSelectionListChange> =
new EventEmitter<MatSelectionListChange>();

/**
* Tabindex of the selection list.
* @breaking-change 11.0.0 Remove `tabIndex` input.
*/
@Input() tabIndex: number = 0;

/** Theme color of the selection list. This sets the checkbox color for all list options. */
@Input() color: ThemePalette = 'accent';

Expand Down Expand Up @@ -433,11 +420,8 @@ export class MatSelectionList extends _MatSelectionListBase implements CanDisabl
private _isDestroyed: boolean;

constructor(private _element: ElementRef<HTMLElement>,
// @breaking-change 11.0.0 Remove `tabIndex` parameter.
@Attribute('tabindex') tabIndex: string,
private _changeDetector: ChangeDetectorRef,
// @breaking-change 11.0.0 `_focusMonitor` parameter to become required.
private _focusMonitor?: FocusMonitor) {
private _focusMonitor: FocusMonitor) {
super();
}

Expand Down Expand Up @@ -482,8 +466,7 @@ export class MatSelectionList extends _MatSelectionListBase implements CanDisabl
}
});

// @breaking-change 11.0.0 Remove null assertion once _focusMonitor is required.
this._focusMonitor?.monitor(this._element)
this._focusMonitor.monitor(this._element)
.pipe(takeUntil(this._destroyed))
.subscribe(origin => {
if (origin === 'keyboard' || origin === 'program') {
Expand All @@ -510,8 +493,7 @@ export class MatSelectionList extends _MatSelectionListBase implements CanDisabl
}

ngOnDestroy() {
// @breaking-change 11.0.0 Remove null assertion once _focusMonitor is required.
this._focusMonitor?.stopMonitoring(this._element);
this._focusMonitor.stopMonitoring(this._element);
this._destroyed.next();
this._destroyed.complete();
this._isDestroyed = true;
Expand Down Expand Up @@ -604,7 +586,7 @@ export class MatSelectionList extends _MatSelectionListBase implements CanDisabl

/** Emits a change event if the selected state of an option changed. */
_emitChangeEvent(options: MatListOption[]) {
this.selectionChange.emit(new MatSelectionListChange(this, options[0], options));
this.selectionChange.emit(new MatSelectionListChange(this, options));
}

/** Implemented as part of ControlValueAccessor. */
Expand Down
10 changes: 0 additions & 10 deletions src/material/list/testing/list-item-harness-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
import {
ComponentHarness,
ComponentHarnessConstructor,
HarnessLoader,
HarnessPredicate,
ContentContainerComponentHarness,
parallel,
Expand Down Expand Up @@ -88,13 +87,4 @@ export abstract class MatListItemHarnessBase
async hasIcon(): Promise<boolean> {
return !!await this._icon();
}

/**
* Gets a `HarnessLoader` used to get harnesses within the list item's content.
* @deprecated Use `getChildLoader(MatListItemSection.CONTENT)` or `getHarness` instead.
* @breaking-change 12.0.0
*/
async getHarnessLoaderForContent(): Promise<HarnessLoader> {
return this.getChildLoader(MatListItemSection.CONTENT);
}
}
6 changes: 6 additions & 0 deletions src/material/schematics/ng-update/data/constructor-checks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ import {ConstructorChecksUpgradeData, TargetVersion, VersionChanges} from '@angu
* automatically through type checking.
*/
export const constructorChecks: VersionChanges<ConstructorChecksUpgradeData> = {
[TargetVersion.V13]: [
{
pr: 'https://github.com/angular/components/pull/23327',
changes: ['MatSelectionList', 'MatSelectionListChange']
}
],
[TargetVersion.V12]: [
{
pr: 'https://github.com/angular/components/pull/21897',
Expand Down
8 changes: 8 additions & 0 deletions src/material/schematics/ng-update/data/css-selectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,14 @@ export interface MaterialCssSelectorData {
}

export const cssSelectors: VersionChanges<MaterialCssSelectorData> = {
[TargetVersion.V13]: [
{
pr: 'https://github.com/angular/components/pull/23327',
changes: [
{replace: '.mat-list-item-avatar', replaceWith: '.mat-list-item-with-avatar'}
]
}
],
[TargetVersion.V6]: [
{
pr: 'https://github.com/angular/components/pull/10296',
Expand Down
1 change: 0 additions & 1 deletion tools/public_api_guard/material/list-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { ComponentHarness } from '@angular/cdk/testing';
import { ComponentHarnessConstructor } from '@angular/cdk/testing';
import { ContentContainerComponentHarness } from '@angular/cdk/testing';
import { DividerHarnessFilters } from '@angular/material/divider/testing';
import { HarnessLoader } from '@angular/cdk/testing';
import { HarnessPredicate } from '@angular/cdk/testing';
import { MatDividerHarness } from '@angular/material/divider/testing';
import { MatListOptionCheckboxPosition } from '@angular/material/list';
Expand Down
10 changes: 3 additions & 7 deletions tools/public_api_guard/material/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ export class MatNavList extends _MatListBase implements CanDisable, CanDisableRi

// @public
export class MatSelectionList extends _MatSelectionListBase implements CanDisableRipple, AfterContentInit, ControlValueAccessor, OnDestroy, OnChanges {
constructor(_element: ElementRef<HTMLElement>, tabIndex: string, _changeDetector: ChangeDetectorRef, _focusMonitor?: FocusMonitor | undefined);
constructor(_element: ElementRef<HTMLElement>, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor);
color: ThemePalette;
compareWith: (o1: any, o2: any) => boolean;
deselectAll(): MatListOption[];
Expand Down Expand Up @@ -232,24 +232,20 @@ export class MatSelectionList extends _MatSelectionListBase implements CanDisabl
readonly selectionChange: EventEmitter<MatSelectionListChange>;
setDisabledState(isDisabled: boolean): void;
_setFocusedOption(option: MatListOption): void;
tabIndex: number;
_tabIndex: number;
_value: string[] | null;
writeValue(values: string[]): void;
// (undocumented)
static ɵcmp: i0.ɵɵComponentDeclaration<MatSelectionList, "mat-selection-list", ["matSelectionList"], { "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "color": "color"; "compareWith": "compareWith"; "disabled": "disabled"; "multiple": "multiple"; }, { "selectionChange": "selectionChange"; }, ["options"], ["*"]>;
static ɵcmp: i0.ɵɵComponentDeclaration<MatSelectionList, "mat-selection-list", ["matSelectionList"], { "disableRipple": "disableRipple"; "color": "color"; "compareWith": "compareWith"; "disabled": "disabled"; "multiple": "multiple"; }, { "selectionChange": "selectionChange"; }, ["options"], ["*"]>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionList, [null, { attribute: "tabindex"; }, null, null]>;
static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionList, never>;
}

// @public
export class MatSelectionListChange {
constructor(
source: MatSelectionList,
option: MatListOption,
options: MatListOption[]);
// @deprecated
option: MatListOption;
options: MatListOption[];
source: MatSelectionList;
}
Expand Down

0 comments on commit 6cea924

Please sign in to comment.