diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss index 022cad5fe239..575091eb6334 100644 --- a/src/dev-app/chips/chips-demo.scss +++ b/src/dev-app/chips/chips-demo.scss @@ -18,7 +18,7 @@ } .mat-mdc-basic-chip { - margin: auto 10px; + margin: 16px 10px; } mat-chip-grid input { diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss index 2263debd5fda..e05262ff350e 100644 --- a/src/material/chips/_m2-chip.scss +++ b/src/material/chips/_m2-chip.scss @@ -6,6 +6,11 @@ @function get-tokens($theme) { $system: m2-utils.get-system($theme); $density-scale: theming.clamp-density(map.get($system, density-scale), -2); + $touch-target-display: block; + + @if $density-scale < 0 { + $touch-target-display: none; + } @return ( base: ( @@ -43,7 +48,8 @@ chip-container-height: map.get(( 0: 32px, -1: 28px, - -2: 24px), $density-scale) + -2: 24px), $density-scale), + chip-touch-target-display: $touch-target-display, ), ); } diff --git a/src/material/chips/_m3-chip.scss b/src/material/chips/_m3-chip.scss index 23cc387aa05a..9149fc3a0d30 100644 --- a/src/material/chips/_m3-chip.scss +++ b/src/material/chips/_m3-chip.scss @@ -77,5 +77,6 @@ @return ( chip-container-height: list.nth((32px, 28px, 24px), $index), + chip-touch-target-display: list.nth((block, none, none), $index), ); } diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html index a24ad97fd148..7d150b49e644 100644 --- a/src/material/chips/chip-option.html +++ b/src/material/chips/chip-option.html @@ -27,6 +27,7 @@ + diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html index c1715e7e4344..55ed032a3186 100644 --- a/src/material/chips/chip-row.html +++ b/src/material/chips/chip-row.html @@ -31,6 +31,7 @@ + @if (_hasTrailingIcon()) { diff --git a/src/material/chips/chip-set.scss b/src/material/chips/chip-set.scss index 3538a9daed9d..87d59ab63fe1 100644 --- a/src/material/chips/chip-set.scss +++ b/src/material/chips/chip-set.scss @@ -16,7 +16,7 @@ } .mdc-evolution-chip { - margin: 4px 0 4px 8px; + margin: 8px 0 8px 8px; } [dir='rtl'] & { diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html index be514ac35fc8..1d9eb6efd943 100644 --- a/src/material/chips/chip.html +++ b/src/material/chips/chip.html @@ -11,6 +11,7 @@ + diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 6324868ef8f6..b5a316cb75dc 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -12,6 +12,7 @@ $_graphic-padding: 6px; $_trailing-action-padding: 8px; $_avatar-leading-padding: 4px; $_avatar-trailing-padding: 8px; +$_touch-target-size: 48px; $fallbacks: m3-chip.get-tokens(); @@ -27,6 +28,17 @@ $fallbacks: m3-chip.get-tokens(); max-width: 100%; } +.mat-mdc-chip-touch-target { + position: absolute; + top: 50%; + left: 0; + right: 0; + height: $_touch-target-size; + transform: translateY(-50%); + display: token-utils.slot(chip-touch-target-display, $fallbacks); + pointer-events: auto; +} + .mdc-evolution-chip__cell, .mdc-evolution-chip__action { height: 100%;