diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss index 022cad5fe239..89ff872fec53 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: 8px 10px; } mat-chip-grid input { 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..822686a2e6b5 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -12,6 +12,8 @@ $_graphic-padding: 6px; $_trailing-action-padding: 8px; $_avatar-leading-padding: 4px; $_avatar-trailing-padding: 8px; +$_touch-target-size: 48px; +$_touch-target-vertical-padding: 8px; $fallbacks: m3-chip.get-tokens(); @@ -27,6 +29,27 @@ $fallbacks: m3-chip.get-tokens(); max-width: 100%; } +.mat-mdc-standard-chip, +.mat-mdc-basic-chip, +.mat-mdc-evolution-chip { + // Ensures basic/unstyled chips also have a 32px min-height baseline. + min-height: 32px; + + // 8px top and bottom margin for 48px touch target separation. + margin-top: $_touch-target-vertical-padding; + margin-bottom: $_touch-target-vertical-padding; +} + +.mat-mdc-chip-touch-target { + position: absolute; + top: 50%; + left: 0; + right: 0; + height: $_touch-target-size; + transform: translateY(-50%); + pointer-events: auto; +} + .mdc-evolution-chip__cell, .mdc-evolution-chip__action { height: 100%;