From 00bcfac4c7d4fe38c05726c62ee5a9f7cb48f846 Mon Sep 17 00:00:00 2001 From: MadunaThabo Date: Wed, 21 Aug 2024 10:11:26 +0200 Subject: [PATCH] fix(material/chips): Fix chips touch target to 48px * 48px Increases the touch target to the chip icon to have 48px *48px Fixes #29511. --- src/material/chips/chip.html | 2 +- src/material/chips/chip.scss | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html index cc541c48505a..0de837903c54 100644 --- a/src/material/chips/chip.html +++ b/src/material/chips/chip.html @@ -15,7 +15,7 @@ @if (_hasTrailingIcon()) { - + } diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 78fc2a6eba0c..5ef3c3f5c524 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -731,3 +731,16 @@ $_avatar-trailing-padding: 8px; .mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before { content: ''; } + +//Sets the touch target for the chip trailing icons to 48px * 48px +.mat-mdc-chip-touch-target { + >::after { + content: ''; + position: absolute; + top: -15px; + bottom: -15px; + left: -7px; + right: -7px; + z-index: -1; + } +} \ No newline at end of file