Skip to content

Commit

Permalink
fix(material/chips): increase chip remove button touch target size
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
essjay05 committed Jul 1, 2024
1 parent 347ecef commit 24e6edb
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions src/material/chips/chip.scss
Original file line number Diff line number Diff line change
Expand Up @@ -396,10 +396,16 @@
font-size: mdc-chip-theme.$trailing-action-size;
box-sizing: content-box;
}
//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing {
padding: 24px 12px;
}

//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing,
.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
&.mat-mdc-chip-remove,
&.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing,
&.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing {
padding: 16px;
}
}

Expand Down

0 comments on commit 24e6edb

Please sign in to comment.