Skip to content

Commit b12018a

Browse files
crisbetoandrewseguin
crisbeto
authored and
andrewseguin
committed
fix(material/chips): handle matChipRemove set on a button (#23538)
Fixes that `matChipRemove` looked off when it's set on a `button` element. Also updates all the examples to use buttons. Note that we don't need any extra logic, because the `MatChipRemove` directive already sets `type="button"` when it's applied to a `button` element. Fixes #23463. (cherry picked from commit bb9c36b)
1 parent 3bb9bd4 commit b12018a

File tree

7 files changed

+88
-23
lines changed

7 files changed

+88
-23
lines changed

‎src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
[removable]="removable"
88
(removed)="remove(fruit)">
99
{{fruit}}
10-
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
10+
<button matChipRemove *ngIf="removable">
11+
<mat-icon>cancel</mat-icon>
12+
</button>
1113
</mat-chip>
1214
<input
1315
placeholder="New fruit..."

‎src/components-examples/material/chips/chips-input/chips-input-example.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
55
[removable]="removable" (removed)="remove(fruit)">
66
{{fruit.name}}
7-
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
7+
<button matChipRemove *ngIf="removable">
8+
<mat-icon>cancel</mat-icon>
9+
</button>
810
</mat-chip>
911
<input placeholder="New fruit..."
1012
[matChipInputFor]="chipList"

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

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ <h4>Advanced</h4>
2727
<mat-chip color="warn" selected="true" *ngIf="visible"
2828
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
2929
With Events
30-
<mat-icon matChipRemove>cancel</mat-icon>
30+
<button matChipRemove>
31+
<mat-icon>cancel</mat-icon>
32+
</button>
3133
</mat-chip>
3234
</mat-chip-list>
3335
<div>{{message}}</div>
@@ -39,12 +41,16 @@ <h4>With avatar and icons</h4>
3941
<mat-chip disabled>
4042
<mat-icon matChipAvatar>home</mat-icon>
4143
Home
42-
<mat-icon matChipRemove>cancel</mat-icon>
44+
<button matChipRemove>
45+
<mat-icon>cancel</mat-icon>
46+
</button>
4347
</mat-chip>
4448
<mat-chip color="accent" selected="true">
4549
<mat-chip-avatar>P</mat-chip-avatar>
4650
Portel
47-
<mat-icon matChipRemove>cancel</mat-icon>
51+
<button matChipRemove>
52+
<mat-icon>cancel</mat-icon>
53+
</button>
4854
</mat-chip>
4955

5056
<mat-chip>
@@ -54,7 +60,9 @@ <h4>With avatar and icons</h4>
5460

5561
<mat-chip>
5662
Koby
57-
<mat-icon matChipRemove>cancel</mat-icon>
63+
<button matChipRemove>
64+
<mat-icon>cancel</mat-icon>
65+
</button>
5866
</mat-chip>
5967

6068
<mat-chip>
@@ -69,7 +77,9 @@ <h4>With avatar and icons</h4>
6977
<mat-chip selected="true" color="warn">
7078
<img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
7179
Husi
72-
<mat-icon matChipRemove>cancel</mat-icon>
80+
<button matChipRemove>
81+
<mat-icon>cancel</mat-icon>
82+
</button>
7383
</mat-chip>
7484

7585
<mat-chip>
@@ -104,7 +114,9 @@ <h4>Form Field</h4>
104114
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
105115
[removable]="removable" (removed)="remove(person)">
106116
{{person.name}}
107-
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
117+
<button matChipRemove *ngIf="removable">
118+
<mat-icon>cancel</mat-icon>
119+
</button>
108120
</mat-chip>
109121
<input placeholder="New Contributor..."
110122
[matChipInputFor]="chipList1"
@@ -127,7 +139,9 @@ <h4>Form Field</h4>
127139
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
128140
[removable]="removable" (removed)="remove(person)">
129141
{{person.name}}
130-
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
142+
<button matChipRemove *ngIf="removable">
143+
<mat-icon>cancel</mat-icon>
144+
</button>
131145
</mat-chip>
132146
</mat-chip-list>
133147
<input placeholder="New Contributor..."
@@ -148,7 +162,9 @@ <h4>Form Field</h4>
148162
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
149163
[removable]="removable" (removed)="remove(person)">
150164
{{person.name}}
151-
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
165+
<button matChipRemove *ngIf="removable">
166+
<mat-icon>cancel</mat-icon>
167+
</button>
152168
</mat-chip>
153169
</mat-chip-list>
154170
</mat-form-field>
@@ -185,7 +201,9 @@ <h4>NgModel with chip list</h4>
185201
<mat-chip *ngFor="let aColor of availableColors" [color]="aColor.color"
186202
[value]="aColor.name" (removed)="removeColor(aColor)">
187203
{{aColor.name}}
188-
<mat-icon matChipRemove>cancel</mat-icon>
204+
<button matChipRemove>
205+
<mat-icon>cancel</mat-icon>
206+
</button>
189207
</mat-chip>
190208
</mat-chip-list>
191209

@@ -196,7 +214,9 @@ <h4>NgModel with single selection chip list</h4>
196214
<mat-chip *ngFor="let aColor of availableColors" [color]="aColor.color"
197215
[value]="aColor.name" (removed)="removeColor(aColor)">
198216
{{aColor.name}}
199-
<mat-icon matChipRemove>cancel</mat-icon>
217+
<button matChipRemove>
218+
<mat-icon>cancel</mat-icon>
219+
</button>
200220
</mat-chip>
201221
</mat-chip-list>
202222

‎src/dev-app/mdc-chips/mdc-chips-demo.html‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,17 @@ <h4>With avatar, icons, and color</h4>
2525
<mat-chip disabled>
2626
<mat-icon matChipAvatar>home</mat-icon>
2727
Home
28-
<mat-icon matChipRemove>cancel</mat-icon>
28+
<button matChipRemove>
29+
<mat-icon>cancel</mat-icon>
30+
</button>
2931
</mat-chip>
3032

3133
<mat-chip highlighted="true" color="accent">
3234
<mat-chip-avatar>P</mat-chip-avatar>
3335
Portel
34-
<mat-icon matChipRemove>cancel</mat-icon>
36+
<button matChipRemove>
37+
<mat-icon>cancel</mat-icon>
38+
</button>
3539
</mat-chip>
3640

3741
<mat-chip>
@@ -41,7 +45,9 @@ <h4>With avatar, icons, and color</h4>
4145

4246
<mat-chip>
4347
Koby
44-
<mat-icon matChipRemove>cancel</mat-icon>
48+
<button matChipRemove>
49+
<mat-icon>cancel</mat-icon>
50+
</button>
4551
</mat-chip>
4652

4753
<mat-chip>
@@ -56,7 +62,9 @@ <h4>With avatar, icons, and color</h4>
5662
<mat-chip highlighted="true" color="warn">
5763
<img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
5864
Husi
59-
<mat-icon matChipRemove>cancel</mat-icon>
65+
<button matChipRemove>
66+
<mat-icon>cancel</mat-icon>
67+
</button>
6068
</mat-chip>
6169

6270
<mat-chip>
@@ -77,7 +85,9 @@ <h4>With Events</h4>
7785
<mat-chip highlighted="true" color="warn" *ngIf="visible"
7886
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
7987
With Events
80-
<mat-icon matChipRemove>cancel</mat-icon>
88+
<button matChipRemove>
89+
<mat-icon>cancel</mat-icon>
90+
</button>
8191
</mat-chip>
8292
</mat-chip-set>
8393
<div>{{message}}</div>
@@ -142,7 +152,9 @@ <h4>Input is last child of chip grid</h4>
142152
(removed)="remove(person)"
143153
(edited)="edit(person, $event)">
144154
{{person.name}}
145-
<mat-icon matChipRemove>cancel</mat-icon>
155+
<button matChipRemove>
156+
<mat-icon>cancel</mat-icon>
157+
</button>
146158
</mat-chip-row>
147159
<input [disabled]="disableInputs"
148160
[matChipInputFor]="chipGrid1"
@@ -159,7 +171,9 @@ <h4>Input is next sibling child of chip grid</h4>
159171
<mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
160172
<mat-chip-row *ngFor="let person of people" (removed)="remove(person)">
161173
{{person.name}}
162-
<mat-icon matChipRemove>cancel</mat-icon>
174+
<button matChipRemove>
175+
<mat-icon>cancel</mat-icon>
176+
</button>
163177
</mat-chip-row>
164178
</mat-chip-grid>
165179
<input [matChipInputFor]="chipGrid2"

‎src/material-experimental/mdc-chips/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@ To use chips with an input, use the `<mat-chip-grid>` with `<mat-chip-row>`:
102102
<mat-chip-row *ngFor="let person of people"
103103
(removed)="remove(person)">
104104
{{person.name}}
105-
<mat-icon matChipRemove>cancel</mat-icon>
105+
<button matChipRemove>
106+
<mat-icon>cancel</mat-icon>
107+
</button>
106108
</mat-chip-row>
107109
<input [matChipInputFor]="myChipGrid"
108110
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"

‎src/material-experimental/mdc-chips/chips.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,21 @@ $chip-margin: 4px;
126126
position: relative;
127127
}
128128

129+
.mat-mdc-chip-remove {
130+
// Reset the user agent styles in case a button is used.
131+
border: none;
132+
-webkit-appearance: none;
133+
-moz-appearance: none;
134+
padding: 0;
135+
background: none;
136+
137+
.mat-icon {
138+
width: inherit;
139+
height: inherit;
140+
font-size: inherit;
141+
}
142+
}
143+
129144
.mat-mdc-chip-row-focusable-text-content,
130145
.mat-mdc-chip-remove-icon {
131146
display: flex;

‎src/material/chips/chips.scss‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,19 @@ $chip-remove-size: 18px;
5454
// anything since it's less than the minimum set above.
5555
height: 1px;
5656

57-
.mat-chip-remove.mat-icon {
58-
width: $chip-remove-size;
59-
height: $chip-remove-size;
57+
.mat-chip-remove {
58+
// Reset the user agent styles in case a button is used.
59+
border: none;
60+
-webkit-appearance: none;
61+
-moz-appearance: none;
62+
padding: 0;
63+
background: none;
64+
65+
&.mat-icon, .mat-icon {
66+
width: $chip-remove-size;
67+
height: $chip-remove-size;
68+
font-size: $chip-remove-size;
69+
}
6070
}
6171

6272
// Overlay used to darken the chip on hover and focus.

0 commit comments

Comments
 (0)