From 636920414b4648274228cb91e2fef54dcae57720 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 23 Jun 2022 17:55:12 +0200
Subject: [PATCH] fix(multiple): touch targets not excluded in densities lower
 than -2 (#25108)

Fixes that touch targets were being removed only on `-2` or `minimum` densities, but not anything lower.

Also moves the check into a common mixin so we only have one place where it needs to be changed.
---
 .../mdc-button/_button-theme-private.scss                 | 3 ++-
 .../mdc-checkbox/_checkbox-theme.scss                     | 2 +-
 .../mdc-core/mdc-helpers/_mdc-helpers.scss                | 8 ++++++++
 src/material-experimental/mdc-radio/_radio-theme.scss     | 2 +-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/material-experimental/mdc-button/_button-theme-private.scss b/src/material-experimental/mdc-button/_button-theme-private.scss
index 69d1d0765b69..8609ea9fe5b7 100644
--- a/src/material-experimental/mdc-button/_button-theme-private.scss
+++ b/src/material-experimental/mdc-button/_button-theme-private.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
+@use '../mdc-core/mdc-helpers/mdc-helpers';
 
 @mixin _ripple-color($color) {
   --mat-mdc-button-persistent-ripple-color: #{$color};
@@ -53,7 +54,7 @@
 
 // Hides the touch target on lower densities.
 @mixin touch-target-density($scale) {
-  @if ($scale == -2 or $scale == 'minimum') {
+  @include mdc-helpers.if-touch-targets-unsupported($scale) {
     .mat-mdc-button-touch-target {
       display: none;
     }
diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
index 98aadda1a3a5..c63d2520e7ef 100644
--- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
+++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss
@@ -88,7 +88,7 @@
       );
     }
 
-    @if ($density-scale == -2 or $density-scale == 'minimum') {
+    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
       .mat-mdc-checkbox-touch-target {
         display: none;
       }
diff --git a/src/material-experimental/mdc-core/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-core/mdc-helpers/_mdc-helpers.scss
index b39db803b1b5..dc1eb6d14e7e 100644
--- a/src/material-experimental/mdc-core/mdc-helpers/_mdc-helpers.scss
+++ b/src/material-experimental/mdc-core/mdc-helpers/_mdc-helpers.scss
@@ -7,6 +7,7 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/css' as mdc-theme-css;
 @use 'sass:map';
+@use 'sass:meta';
 
 // A set of standard queries to use with MDC's queryable mixins.
 $mat-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
@@ -211,3 +212,10 @@ $mat-typography-mdc-level-mappings: (
   @content;
   mdc-theme-css.$enable-fallback-declarations: $previous-value;
 }
+
+// Excludes the passed-in CSS content if the layout is too dense to supports touch targets.
+@mixin if-touch-targets-unsupported($scale) {
+  @if ($scale == 'minimum' or (meta.type-of($scale) == 'number' and $scale < -1)) {
+    @content;
+  }
+}
diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss
index 137ea9b4180c..58f9b266a45a 100644
--- a/src/material-experimental/mdc-radio/_radio-theme.scss
+++ b/src/material-experimental/mdc-radio/_radio-theme.scss
@@ -77,7 +77,7 @@
     @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 
-  @if ($density-scale == -2 or $density-scale == 'minimum') {
+  @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
     .mat-mdc-radio-touch-target {
       display: none;
     }