From 99b33120e774768467120b77703ee4fb9d98d411 Mon Sep 17 00:00:00 2001
From: DBowen33 <42016383+DBowen33@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:45:02 -0500
Subject: [PATCH] fix(material/paginator): items per page form field touch
 target size insufficient (#29109)

* fix(material/paginator): items per page form field touch target issue

items per page form field touch target does not have sufficient touch target
size (48 x 48)

fixes b/202731532

* fix(material/paginator): added transparent element for larger touch target

added transparent touch target element on top of paginator select  to get touch target to 48 pixel height

Fixes b/225394124

* fix(material/paginator): add new line

add new line

fixes b/225394124

* fix(material/paginator): added density tokens

added density tokens for paginator touch target

Fixes b/225394124

* fix(material/paginator): fix lint error

fix lint error

fixes #225394124
---
 src/material/core/tokens/_density.scss        |  1 +
 .../core/tokens/m2/mat/_paginator.scss        |  1 +
 src/material/paginator/paginator.html         |  2 +
 src/material/paginator/paginator.scss         | 39 ++++++++++++++++---
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/material/core/tokens/_density.scss b/src/material/core/tokens/_density.scss
index 992efa60462e..a3063ff10c91 100644
--- a/src/material/core/tokens/_density.scss
+++ b/src/material/core/tokens/_density.scss
@@ -120,6 +120,7 @@ $_density-tokens: (
     container-size: (56px, 52px, 48px, 40px),
     form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
     form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
+    touch-target-display: (block, block, none, none),
   ),
   (mat, radio): (
     touch-target-display: (block, block, none, none),
diff --git a/src/material/core/tokens/m2/mat/_paginator.scss b/src/material/core/tokens/m2/mat/_paginator.scss
index 4405b905d8ce..8a2398484773 100644
--- a/src/material/core/tokens/m2/mat/_paginator.scss
+++ b/src/material/core/tokens/m2/mat/_paginator.scss
@@ -69,6 +69,7 @@ $prefix: (mat, paginator);
     container-size: map.get($size-scale, $density-scale),
     form-field-container-height: $form-field-height,
     form-field-container-vertical-padding: $form-field-vertical-padding,
+    touch-target-display: if($density-scale < -2, none, block),
   );
 }
 
diff --git a/src/material/paginator/paginator.html b/src/material/paginator/paginator.html
index d1bf7519d330..2e3e31147518 100644
--- a/src/material/paginator/paginator.html
+++ b/src/material/paginator/paginator.html
@@ -12,6 +12,7 @@
             [color]="color"
             class="mat-mdc-paginator-page-size-select">
             <mat-select
+              #selectRef
               [value]="pageSize"
               [disabled]="disabled"
               [aria-labelledby]="_pageSizeLabelId"
@@ -25,6 +26,7 @@
                 </mat-option>
               }
             </mat-select>
+          <div class="mat-mdc-paginator-touch-target" (click)="selectRef.open()"></div>
           </mat-form-field>
         }
 
diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss
index 3994a8269bae..4c66c6e456bd 100644
--- a/src/material/paginator/paginator.scss
+++ b/src/material/paginator/paginator.scss
@@ -9,6 +9,7 @@ $page-size-margin-right: 8px;
 $items-per-page-label-margin: 0 4px;
 $selector-margin: 0 4px;
 $selector-trigger-width: 84px;
+$touch-target-height: 48px;
 
 $range-label-margin: 0 32px 0 24px;
 $button-icon-size: 28px;
@@ -17,7 +18,9 @@ $button-icon-size: 28px;
   display: block;
 
   @include token-utils.use-tokens(
-    tokens-mat-paginator.$prefix, tokens-mat-paginator.get-token-slots()) {
+    tokens-mat-paginator.$prefix,
+    tokens-mat-paginator.get-token-slots()
+  ) {
     @include mdc-typography.smooth-font();
     @include token-utils.create-token-slot(color, container-text-color);
     @include token-utils.create-token-slot(background-color, container-background-color);
@@ -29,9 +32,13 @@ $button-icon-size: 28px;
 
     // Apply custom form-field density for paginator.
     @include token-utils.create-token-slot(
-        --mat-form-field-container-height, form-field-container-height);
+      --mat-form-field-container-height,
+      form-field-container-height
+    );
     @include token-utils.create-token-slot(
-        --mat-form-field-container-vertical-padding, form-field-container-vertical-padding);
+      --mat-form-field-container-vertical-padding,
+      form-field-container-vertical-padding
+    );
 
     .mat-mdc-select-value {
       @include token-utils.create-token-slot(font-size, select-trigger-text-size);
@@ -66,7 +73,9 @@ $button-icon-size: 28px;
   width: 100%;
 
   @include token-utils.use-tokens(
-    tokens-mat-paginator.$prefix, tokens-mat-paginator.get-token-slots()) {
+    tokens-mat-paginator.$prefix,
+    tokens-mat-paginator.get-token-slots()
+  ) {
     @include token-utils.create-token-slot(min-height, container-size);
   }
 }
@@ -105,7 +114,9 @@ $button-icon-size: 28px;
   width: $button-icon-size;
 
   @include token-utils.use-tokens(
-    tokens-mat-paginator.$prefix, tokens-mat-paginator.get-token-slots()) {
+    tokens-mat-paginator.$prefix,
+    tokens-mat-paginator.get-token-slots()
+  ) {
     @include token-utils.create-token-slot(fill, enabled-icon-color);
 
     .mat-mdc-icon-button[disabled] & {
@@ -133,3 +144,21 @@ $button-icon-size: 28px;
     outline: solid 1px;
   }
 }
+
+.mat-mdc-paginator-touch-target {
+  @include token-utils.use-tokens(
+    tokens-mat-paginator.$prefix,
+    tokens-mat-paginator.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(display, touch-target-display);
+  }
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $selector-trigger-width;
+  height: $touch-target-height;
+  background-color: transparent;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}