Skip to content

Commit cbf9fb4

Browse files
devversionVivian Hu
authored and
Vivian Hu
committed
fix(chips): disabled state not matching specs
* Currently if chips are disabled with the spec 2018 alignment, it's not clear whether a chip is disabled or not. The chip still has a focus effect, hover effect and pointer cursor for the `mat-chip-remove`. * Also moves the `@include mat-elevation` to the theme (probably introduced before: #11344 has been merged)
1 parent 6c741c4 commit cbf9fb4

File tree

3 files changed

+24
-12
lines changed

3 files changed

+24
-12
lines changed

src/demo-app/chips/chips-demo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h4>With avatar and icons</h4>
3636

3737

3838
<mat-chip-list>
39-
<mat-chip>
39+
<mat-chip disabled>
4040
<mat-icon matChipAvatar>home</mat-icon>
4141
Home
4242
<mat-icon matChipRemove>cancel</mat-icon>

src/lib/chips/_chips-theme.scss

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ $mat-chip-remove-font-size: 18px;
1717
color: $foreground;
1818
opacity: 0.4;
1919
}
20-
21-
.mat-chip-remove:hover {
22-
opacity: 0.54;
23-
}
2420
}
2521

2622
@mixin mat-chips-theme($theme) {
@@ -34,12 +30,21 @@ $mat-chip-remove-font-size: 18px;
3430
$unselected-background: mat-color($background, unselected-chip);
3531
$unselected-foreground: mat-color($foreground, text);
3632

37-
3833
.mat-chip.mat-standard-chip {
3934
@include mat-chips-color($unselected-foreground, $unselected-background);
4035

41-
&:focus {
42-
@include _mat-theme-elevation(3, $theme);
36+
&:not(.mat-chip-disabled) {
37+
&:active {
38+
@include _mat-theme-elevation(3, $theme);
39+
}
40+
41+
.mat-chip-remove:hover {
42+
opacity: 0.54;
43+
}
44+
}
45+
46+
&.mat-chip-disabled {
47+
opacity: 0.4;
4348
}
4449
}
4550

src/lib/chips/chips.scss

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,6 @@ $mat-chip-remove-size: 18px;
7676
}
7777
}
7878

79-
&:active {
80-
@include mat-elevation(3);
81-
}
82-
8379
@include cdk-high-contrast {
8480
outline: solid 1px;
8581

@@ -89,6 +85,17 @@ $mat-chip-remove-size: 18px;
8985
}
9086
}
9187

88+
&.mat-chip-disabled {
89+
&::after {
90+
opacity: 0;
91+
}
92+
93+
.mat-chip-remove,
94+
.mat-chip-trailing-icon {
95+
cursor: default;
96+
}
97+
}
98+
9299
&.mat-chip-with-trailing-icon.mat-chip-with-avatar,
93100
&.mat-chip-with-avatar {
94101
padding-top: $mat-chip-avatar-vertical-padding;

0 commit comments

Comments
 (0)