Skip to content

Commit 90c5bb6

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 cb1732e commit 90c5bb6

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
@@ -713,10 +713,16 @@ $_avatar-trailing-padding: 8px;
713713
font-size: $_trailing-icon-size;
714714
box-sizing: content-box;
715715
}
716-
//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
717-
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
718-
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing {
719-
padding: 24px 12px;
716+
}
717+
718+
//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
719+
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
720+
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing,
721+
.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
722+
&.mat-mdc-chip-remove,
723+
&.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing,
724+
&.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing {
725+
padding: 16px;
720726
}
721727
}
722728

0 commit comments

Comments
 (0)