Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(material/chips): handle matChipRemove set on a button #23538

Merged
merged 1 commit into from Sep 10, 2021
Merged

fix(material/chips): handle matChipRemove set on a button #23538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
View file
Open in desktop
Expand Up @@ -7,7 +7,9 @@
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
<button matChipRemove *ngIf="removable">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<input
placeholder="New fruit..."
Expand Down
4 changes: 3 additions & 1 deletion src/components-examples/material/chips/chips-input/chips-input-example.html
View file
Open in desktop
Expand Up @@ -4,7 +4,9 @@
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
<button matChipRemove *ngIf="removable">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
Expand Down
40 changes: 30 additions & 10 deletions src/dev-app/chips/chips-demo.html
View file
Open in desktop
Expand Up @@ -27,7 +27,9 @@ <h4>Advanced</h4>
<mat-chip color="warn" selected="true" *ngIf="visible"
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
With Events
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
<div>{{message}}</div>
Expand All @@ -39,12 +41,16 @@ <h4>With avatar and icons</h4>
<mat-chip disabled>
<mat-icon matChipAvatar>home</mat-icon>
Home
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<mat-chip color="accent" selected="true">
<mat-chip-avatar>P</mat-chip-avatar>
Portel
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>

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

<mat-chip>
Koby
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>

<mat-chip>
Expand All @@ -69,7 +77,9 @@ <h4>With avatar and icons</h4>
<mat-chip selected="true" color="warn">
<img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
Husi
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>

<mat-chip>
Expand Down Expand Up @@ -104,7 +114,9 @@ <h4>Form Field</h4>
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
[removable]="removable" (removed)="remove(person)">
{{person.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
<button matChipRemove *ngIf="removable">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<input placeholder="New Contributor..."
[matChipInputFor]="chipList1"
Expand All @@ -127,7 +139,9 @@ <h4>Form Field</h4>
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
[removable]="removable" (removed)="remove(person)">
{{person.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
<button matChipRemove *ngIf="removable">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
<input placeholder="New Contributor..."
Expand All @@ -148,7 +162,9 @@ <h4>Form Field</h4>
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
[removable]="removable" (removed)="remove(person)">
{{person.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
<button matChipRemove *ngIf="removable">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
</mat-form-field>
Expand Down Expand Up @@ -185,7 +201,9 @@ <h4>NgModel with chip list</h4>
<mat-chip *ngFor="let aColor of availableColors" [color]="aColor.color"
[value]="aColor.name" (removed)="removeColor(aColor)">
{{aColor.name}}
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>

Expand All @@ -196,7 +214,9 @@ <h4>NgModel with single selection chip list</h4>
<mat-chip *ngFor="let aColor of availableColors" [color]="aColor.color"
[value]="aColor.name" (removed)="removeColor(aColor)">
{{aColor.name}}
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>

Expand Down
28 changes: 21 additions & 7 deletions src/dev-app/mdc-chips/mdc-chips-demo.html
View file
Open in desktop
Expand Up @@ -25,13 +25,17 @@ <h4>With avatar, icons, and color</h4>
<mat-chip disabled>
<mat-icon matChipAvatar>home</mat-icon>
Home
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>

<mat-chip highlighted="true" color="accent">
<mat-chip-avatar>P</mat-chip-avatar>
Portel
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>

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

<mat-chip>
Koby
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>

<mat-chip>
Expand All @@ -56,7 +62,9 @@ <h4>With avatar, icons, and color</h4>
<mat-chip highlighted="true" color="warn">
<img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
Husi
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>

<mat-chip>
Expand All @@ -77,7 +85,9 @@ <h4>With Events</h4>
<mat-chip highlighted="true" color="warn" *ngIf="visible"
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
With Events
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-set>
<div>{{message}}</div>
Expand Down Expand Up @@ -142,7 +152,9 @@ <h4>Input is last child of chip grid</h4>
(removed)="remove(person)"
(edited)="edit(person, $event)">
{{person.name}}
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
<input [disabled]="disableInputs"
[matChipInputFor]="chipGrid1"
Expand All @@ -159,7 +171,9 @@ <h4>Input is next sibling child of chip grid</h4>
<mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
<mat-chip-row *ngFor="let person of people" (removed)="remove(person)">
{{person.name}}
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
</mat-chip-grid>
<input [matChipInputFor]="chipGrid2"
Expand Down
4 changes: 3 additions & 1 deletion src/material-experimental/mdc-chips/README.md
View file
Open in desktop
Expand Up @@ -102,7 +102,9 @@ To use chips with an input, use the `<mat-chip-grid>` with `<mat-chip-row>`:
<mat-chip-row *ngFor="let person of people"
(removed)="remove(person)">
{{person.name}}
<mat-icon matChipRemove>cancel</mat-icon>
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
<input [matChipInputFor]="myChipGrid"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
Expand Down
15 changes: 15 additions & 0 deletions src/material-experimental/mdc-chips/chips.scss
View file
Open in desktop
Expand Up @@ -126,6 +126,21 @@ $chip-margin: 4px;
position: relative;
}

.mat-mdc-chip-remove {
// Reset the user agent styles in case a button is used.
border: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0;
background: none;

.mat-icon {
width: inherit;
height: inherit;
font-size: inherit;
}
}

.mat-mdc-chip-row-focusable-text-content,
.mat-mdc-chip-remove-icon {
display: flex;
Expand Down
16 changes: 13 additions & 3 deletions src/material/chips/chips.scss
View file
Open in desktop
Expand Up @@ -54,9 +54,19 @@ $chip-remove-size: 18px;
// anything since it's less than the minimum set above.
height: 1px;

.mat-chip-remove.mat-icon {
width: $chip-remove-size;
height: $chip-remove-size;
.mat-chip-remove {
// Reset the user agent styles in case a button is used.
border: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0;
background: none;

&.mat-icon, .mat-icon {
width: $chip-remove-size;
height: $chip-remove-size;
font-size: $chip-remove-size;
}
}

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