diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 8d1802e2b23c..9b3a0f4723a1 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -40,6 +40,10 @@ $fallbacks: m3-list.get-tokens(); .mdc-checkbox { opacity: token-utils.slot(list-list-item-disabled-label-text-opacity, $fallbacks); } + + .mdc-radio { + cursor: auto; + } } // In Angular Material we put the avatar class directly on the .mdc-list-item__start element, diff --git a/src/material/list/list.spec.ts b/src/material/list/list.spec.ts index 691f04e437d4..26f627d74ff9 100644 --- a/src/material/list/list.spec.ts +++ b/src/material/list/list.spec.ts @@ -417,7 +417,7 @@ class BaseTestList { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithOneAnchorItem extends BaseTestList { // This needs to be declared directly on the class; if declared on the BaseTestList superclass, @@ -433,7 +433,7 @@ class ListWithOneAnchorItem extends BaseTestList { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class NavListWithOneAnchorItem extends BaseTestList { @ViewChildren(MatListItem) listItems!: QueryList; @@ -452,7 +452,7 @@ class NavListWithOneAnchorItem extends BaseTestList { } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class NavListWithActivatedItem extends BaseTestList { @ViewChildren(MatListItem) listItems!: QueryList; @@ -471,7 +471,7 @@ class NavListWithActivatedItem extends BaseTestList { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ActionListWithoutType extends BaseTestList { @ViewChildren(MatListItem) listItems!: QueryList; @@ -487,7 +487,7 @@ class ActionListWithoutType extends BaseTestList { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ActionListWithType extends BaseTestList { @ViewChildren(MatListItem) listItems!: QueryList; @@ -501,7 +501,7 @@ class ActionListWithType extends BaseTestList { } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ActionListWithDisabledList extends BaseTestList { disableList = true; @@ -515,7 +515,7 @@ class ActionListWithDisabledList extends BaseTestList { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ActionListWithDisabledItem extends BaseTestList { @ViewChild(MatListItem) buttonItem!: MatListItem; @@ -530,7 +530,7 @@ class ActionListWithDisabledItem extends BaseTestList { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithOneItem extends BaseTestList {} @@ -546,7 +546,7 @@ class ListWithOneItem extends BaseTestList {} } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithTwoLineItem extends BaseTestList {} @@ -562,7 +562,7 @@ class ListWithTwoLineItem extends BaseTestList {} } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithThreeLineItem extends BaseTestList {} @@ -578,7 +578,7 @@ class ListWithThreeLineItem extends BaseTestList {} `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithAvatar extends BaseTestList {} @@ -593,7 +593,7 @@ class ListWithAvatar extends BaseTestList {} } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithItemWithCssClass extends BaseTestList {} @@ -611,7 +611,7 @@ class ListWithItemWithCssClass extends BaseTestList {} } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithDynamicNumberOfLines extends BaseTestList {} @@ -623,7 +623,7 @@ class ListWithDynamicNumberOfLines extends BaseTestList {} } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithMultipleItems extends BaseTestList {} @@ -635,7 +635,7 @@ class ListWithMultipleItems extends BaseTestList {} Three `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListWithDisabledItems { firstItemDisabled = false; @@ -645,6 +645,6 @@ class ListWithDisabledItems { @Component({ template: ``, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class StandaloneListItem {} diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index 63a3bf13f5bd..8205e97e80a5 100644 --- a/src/material/list/selection-list.spec.ts +++ b/src/material/list/selection-list.spec.ts @@ -840,6 +840,17 @@ describe('MatSelectionList without forms', () => { expect(selectList.selected.length).toBe(0); }); + it('should not show a pointer cursor around radios in disabled single-selection lists', () => { + fixture.destroy(); + + const singleSelectionFixture = TestBed.createComponent(DisabledSingleSelectionList); + singleSelectionFixture.detectChanges(); + + const radio = singleSelectionFixture.nativeElement.querySelector('.mdc-radio')!; + + expect(getComputedStyle(radio).cursor).toBe('auto'); + }); + it('should update state of options if list state has changed', () => { const testOption = listOption[2].componentInstance as MatListOption; @@ -1699,7 +1710,7 @@ describe('MatSelectionList with forms', () => { } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithListOptions { showLastOption = true; @@ -1728,7 +1739,7 @@ class SelectionListWithListOptions { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithCheckboxPositionAfter {} @@ -1749,12 +1760,22 @@ class SelectionListWithCheckboxPositionAfter {} `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithListDisabled { disabled: boolean = true; } +@Component({ + template: ` + + Inbox + `, + imports: [MatListModule], + changeDetection: ChangeDetectionStrategy.Default, +}) +class DisabledSingleSelectionList {} + @Component({ template: ` @@ -1762,7 +1783,7 @@ class SelectionListWithListDisabled { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithDisabledOption { disableItem: boolean = false; @@ -1777,7 +1798,7 @@ class SelectionListWithDisabledOption { Not selected - Item #4 `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithSelectedOption {} @@ -1788,7 +1809,7 @@ class SelectionListWithSelectedOption {} Pre-selected - Item #2 `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SingleSelectionListWithSelectedOption {} @@ -1798,7 +1819,7 @@ class SingleSelectionListWithSelectedOption {} Item `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithSelectedOptionAndValue { itemValue = 'item1'; @@ -1815,7 +1836,7 @@ class SelectionListWithSelectedOptionAndValue { } `, imports: [MatListModule, FormsModule, ReactiveFormsModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithModel { modelChangeSpy = jasmine.createSpy('model change spy'); @@ -1838,7 +1859,7 @@ class SelectionListWithModel { } `, imports: [MatListModule, FormsModule, ReactiveFormsModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithFormControl { formControl = new FormControl([] as string[]); @@ -1853,7 +1874,7 @@ class SelectionListWithFormControl { Option 2 `, imports: [MatListModule, FormsModule, ReactiveFormsModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithPreselectedOption { selectedOptions!: string[]; @@ -1866,7 +1887,7 @@ class SelectionListWithPreselectedOption { Option 2 `, imports: [MatListModule, FormsModule, ReactiveFormsModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithPreselectedOptionAndModel { selectedOptions = ['opt1']; @@ -1895,7 +1916,7 @@ class SelectionListWithPreselectedFormControlOnPush { } `, imports: [MatListModule, FormsModule, ReactiveFormsModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithCustomComparator { @ViewChildren(MatListOption) optionInstances!: QueryList; @@ -1918,7 +1939,7 @@ class SelectionListWithCustomComparator { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithAvatar { togglePosition!: MatListOptionTogglePosition; @@ -1934,7 +1955,7 @@ class SelectionListWithAvatar { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithIcon { togglePosition!: MatListOptionTogglePosition; @@ -1950,7 +1971,7 @@ class SelectionListWithIcon { } `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListWithIndirectChildOptions { @ViewChildren(MatListOption) optionInstances!: QueryList; @@ -1963,7 +1984,7 @@ class SelectionListWithIndirectChildOptions { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListOptionWithTwoWayBinding { selected = false; diff --git a/src/material/list/testing/list-harness.spec.ts b/src/material/list/testing/list-harness.spec.ts index bb0c16cde291..0dedffdd8693 100644 --- a/src/material/list/testing/list-harness.spec.ts +++ b/src/material/list/testing/list-harness.spec.ts @@ -526,7 +526,7 @@ describe('MatSelectionListHarness', () => { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ListHarnessTest { disableThirdItem = signal(false); @@ -567,7 +567,7 @@ class ListHarnessTest { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class ActionListHarnessTest { lastClicked!: string; @@ -610,7 +610,7 @@ class ActionListHarnessTest { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class NavListHarnessTest { lastClicked!: string; @@ -654,7 +654,7 @@ class NavListHarnessTest { `, imports: [MatListModule], - changeDetection: ChangeDetectionStrategy.Eager, + changeDetection: ChangeDetectionStrategy.Default, }) class SelectionListHarnessTest { disableThirdItem = signal(false);