feat(list): Add single select mode. #18126
Conversation
kseamon
requested review from
crisbeto,
devversion and
jelbourn
as code owners
googlebot
added
the
cla: yes
kseamon
force-pushed
the
single-select-list
branch
from
dfe69da to
b7709be
Compare
src/material/list/_list-theme.scss
Outdated
| @@ -33,6 +33,10 @@ | |||
| background: mat-color($background, 'hover'); | |||
| } | |||
| } | |||
|
|
|||
| .mat-selection-list-single-select .mat-list-option.mat-selected { | |||
| background: mat-color($background, hover, 0.12); | |||
There was a problem hiding this comment.
Wouldn't this make it difficult to distinguish between selected and hovered options?
There was a problem hiding this comment.
This is the same style used in MatSelect.
It actually is darker than the hover color, despite how the line reads.
| set multiple(value: boolean) { | ||
| const newValue = coerceBooleanProperty(value); | ||
|
|
||
| if (newValue !== this._multiple) { |
There was a problem hiding this comment.
What do you think about only doing this check in dev mode?
src/material/list/selection-list.ts
Outdated
| @@ -108,6 +109,7 @@ export class MatSelectionListChange { | |||
| // be placed inside a parent that has one of the other colors with a higher specificity. | |||
| '[class.mat-accent]': 'color !== "primary" && color !== "warn"', | |||
| '[class.mat-warn]': 'color === "warn"', | |||
| '[class.mat-single-selected]': 'selected && !selectionList.multiple', | |||
There was a problem hiding this comment.
We typically include the component name in the class: .mat-list-single-item-selected (except for the theme classes which are universal)
kseamon
force-pushed
the
single-select-list
branch
from
2948622 to
e4c00ad
Compare
jelbourn
added
pr: lgtm
action: merge
* feat(list): Add single select mode. * review changes * lint * review changes * fix tests
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Adds support for single selection to mat-selection list, using multiple="false" or [multiple]="false".
Styling is updated to match single-select mat-select panels, including a persistent highlight and hiding the check boxes.