Skip to content

Commit

Permalink
fix(chips): disabled state not matching specs
Browse files Browse the repository at this point in the history
* 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: angular#11344 has been merged)
  • Loading branch information
devversion committed Nov 10, 2018
1 parent 26c73e0 commit 662abab
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/demo-app/chips/chips-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h4>With avatar and icons</h4>


<mat-chip-list>
<mat-chip>
<mat-chip disabled>
<mat-icon matChipAvatar>home</mat-icon>
Home
<mat-icon matChipRemove>cancel</mat-icon>
Expand Down
19 changes: 12 additions & 7 deletions src/lib/chips/_chips-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@ $mat-chip-remove-font-size: 18px;
color: $foreground;
opacity: 0.4;
}

.mat-chip-remove:hover {
opacity: 0.54;
}
}

@mixin mat-chips-theme-color($palette) {
Expand All @@ -38,12 +34,21 @@ $mat-chip-remove-font-size: 18px;
$unselected-background: mat-color($background, unselected-chip);
$unselected-foreground: mat-color($foreground, text);


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

&:focus {
@include _mat-theme-elevation(3, $theme);
&:not(.mat-chip-disabled) {
&:active {
@include _mat-theme-elevation(3, $theme);
}

.mat-chip-remove:hover {
opacity: 0.54;
}
}

&.mat-chip-disabled {
opacity: 0.4;
}
}

Expand Down
15 changes: 11 additions & 4 deletions src/lib/chips/chips.scss
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,6 @@ $mat-chip-remove-size: 18px;
}
}

&:active {
@include mat-elevation(3);
}

@include cdk-high-contrast {
outline: solid 1px;

Expand All @@ -89,6 +85,17 @@ $mat-chip-remove-size: 18px;
}
}

&.mat-chip-disabled {
&::after {
opacity: 0;
}

.mat-chip-remove,
.mat-chip-trailing-icon {
cursor: default;
}
}

&.mat-chip-with-trailing-icon.mat-chip-with-avatar,
&.mat-chip-with-avatar {
padding-top: $mat-chip-avatar-vertical-padding;
Expand Down

0 comments on commit 662abab

Please sign in to comment.