From f98f7331245094da0e562c89efc77984c0712918 Mon Sep 17 00:00:00 2001 From: DBowen33 Date: Thu, 23 May 2024 18:44:35 +0000 Subject: [PATCH 1/5] 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 --- src/material/paginator/paginator.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index 3994a8269bae..3e193442fa8e 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -47,7 +47,7 @@ $button-icon-size: 28px; .mat-mdc-select { // The smaller font size inherited from the paginator throws off the centering of the select // inside the form field. This `line-height` helps to center it relative to the other text. - line-height: 1.5; + line-height: 2; } } From d1d85b2117531c98b3d8d042c66bbd682cb99fa4 Mon Sep 17 00:00:00 2001 From: DBowen33 Date: Wed, 29 May 2024 17:06:50 +0000 Subject: [PATCH 2/5] 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 --- src/material/paginator/paginator.html | 2 ++ src/material/paginator/paginator.scss | 14 +++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) 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"> } +
} diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index 3e193442fa8e..4afee611545a 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; @@ -47,7 +48,7 @@ $button-icon-size: 28px; .mat-mdc-select { // The smaller font size inherited from the paginator throws off the centering of the select // inside the form field. This `line-height` helps to center it relative to the other text. - line-height: 2; + line-height: 1.5; } } @@ -133,3 +134,14 @@ $button-icon-size: 28px; outline: solid 1px; } } + +.mat-mdc-paginator-touch-target { + position: absolute; + top: 50%; + left: 50%; + width: $selector-trigger-width; + height: $touch-target-height; + background-color: transparent; + transform: translate(-50%, -50%); + cursor: pointer; +} \ No newline at end of file From c1a283bf8a4f417e679eff9409cf0161d67f6c78 Mon Sep 17 00:00:00 2001 From: DBowen33 Date: Wed, 29 May 2024 17:17:23 +0000 Subject: [PATCH 3/5] fix(material/paginator): add new line add new line fixes b/225394124 --- src/material/paginator/paginator.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index 4afee611545a..38e4875aefc5 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -144,4 +144,4 @@ $button-icon-size: 28px; background-color: transparent; transform: translate(-50%, -50%); cursor: pointer; -} \ No newline at end of file +} From 717c3b641f4402d7277ad54f58944325fad63162 Mon Sep 17 00:00:00 2001 From: DBowen33 Date: Wed, 12 Jun 2024 14:32:17 +0000 Subject: [PATCH 4/5] fix(material/paginator): added density tokens added density tokens for paginator touch target Fixes b/225394124 --- src/material/core/tokens/_density.scss | 1 + src/material/core/tokens/m2/mat/_paginator.scss | 1 + src/material/paginator/paginator.scss | 4 ++++ 3 files changed, 6 insertions(+) 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.scss b/src/material/paginator/paginator.scss index 38e4875aefc5..d0dd7ffd91dd 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -136,6 +136,10 @@ $button-icon-size: 28px; } .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%; From 07f55a87497ec345c98f5bcb35ccb025414b65f9 Mon Sep 17 00:00:00 2001 From: DBowen33 Date: Wed, 12 Jun 2024 14:45:16 +0000 Subject: [PATCH 5/5] fix(material/paginator): fix lint error fix lint error fixes #225394124 --- src/material/paginator/paginator.scss | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index d0dd7ffd91dd..4c66c6e456bd 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -18,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); @@ -30,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); @@ -67,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); } } @@ -106,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] & { @@ -136,7 +146,10 @@ $button-icon-size: 28px; } .mat-mdc-paginator-touch-target { - @include token-utils.use-tokens(tokens-mat-paginator.$prefix, tokens-mat-paginator.get-token-slots()) { + @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); }