Skip to content

Commit 8264849

Browse files
committed
fix(material/chip): remove button is too small
Fixes Angular Components Chip component where the touch target of the remove button of a chip is too small. Updates .mat-mdc-chip-remove to target more specific styles to override original style of padding: 8px so that the user has a larger touch target particularly on mobile devices. Fixes b/286959517
1 parent a787a99 commit 8264849

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

src/material/chips/chip.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -713,6 +713,12 @@ $_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
717+
in order to fix b/286959517. */
718+
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
719+
&.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing {
720+
padding: 24px 12px;
721+
}
716722
}
717723

718724
// Increases mdc-chip-remove trailing icon action touch-target in order to fix b/286959517

0 commit comments

Comments
 (0)