Skip to content

Commit 1319eee

Browse files
committed
fix(material/chips): increase chip remove button touch target size
Fixes issue with Angular Component Chip's touch target size by increasing the padding on chips with a trailing icon that has an action. Fixes b/286959517 BREAKING CHANGE: updates chip remove button touch target to increase accessibility of the button especially on touch/mobile devices.
1 parent 899952e commit 1319eee

File tree

1 file changed

+10
-4
lines changed

1 file changed

+10
-4
lines changed

src/material/chips/chip.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -396,10 +396,16 @@
396396
font-size: mdc-chip-theme.$trailing-action-size;
397397
box-sizing: content-box;
398398
}
399-
//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
400-
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
401-
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing {
402-
padding: 24px 12px;
399+
}
400+
401+
//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
402+
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
403+
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing,
404+
.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
405+
&.mat-mdc-chip-remove,
406+
&.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing,
407+
&.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing {
408+
padding: 16px;
403409
}
404410
}
405411

0 commit comments

Comments
 (0)