From 4146af03ca087e76ad658ad5a35efaf25240f45c Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 8 Jun 2021 23:03:45 -0600 Subject: [PATCH] Revert "fix(material-experimental/mdc-button): set proper touch target (#22846)" (#22925) This reverts commit 793e1f1310c0d5e38d7fb0766d07292c1ed83522. (cherry picked from commit 2f873a8d7df7c1719aba0c69e6e75b6a064254a4) --- .../mdc-button/_button-base.scss | 16 ---------------- src/material-experimental/mdc-button/button.html | 2 -- src/material-experimental/mdc-button/button.scss | 3 +-- src/material-experimental/mdc-button/fab.scss | 3 +-- .../mdc-button/icon-button.scss | 1 - 5 files changed, 2 insertions(+), 23 deletions(-) diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss index 7c5cbfa28515..9b6a0f9220dc 100644 --- a/src/material-experimental/mdc-button/_button-base.scss +++ b/src/material-experimental/mdc-button/_button-base.scss @@ -1,5 +1,3 @@ -@use '@material/touch-target' as mdc-touch-target; -@use '../mdc-helpers/mdc-helpers'; @use '../../material/core/style/layout-common'; // Adds styles necessary to provide stateful interactions with the button. This includes providing @@ -61,17 +59,3 @@ pointer-events: none; } } - -@mixin mat-private-button-touch-target($is-square) { - // Element used to ensure that the button has a touch target that meets the required minimum. - // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC - // class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which - // goes against our rule of not having margins on the host node. Furthermore, having the margin on - // the button itself would require us to wrap it in another div. See: - // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible - .mat-mdc-button-touch-target { - @include mdc-touch-target.touch-target( - $set-width: $is-square, - $query: mdc-helpers.$mat-base-styles-query); - } -} diff --git a/src/material-experimental/mdc-button/button.html b/src/material-experimental/mdc-button/button.html index e5abbe3801ee..32b22df3a4b6 100644 --- a/src/material-experimental/mdc-button/button.html +++ b/src/material-experimental/mdc-button/button.html @@ -21,5 +21,3 @@ [matRippleDisabled]="_isRippleDisabled()" [matRippleCentered]="_isRippleCentered" [matRippleTrigger]="_elementRef.nativeElement"> - - diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss index 62b10a18d10c..1ca09d997b9c 100644 --- a/src/material-experimental/mdc-button/button.scss +++ b/src/material-experimental/mdc-button/button.scss @@ -2,7 +2,7 @@ @use '@material/button/variables' as mdc-button-variables; @use '../mdc-helpers/mdc-helpers'; @use '../../cdk/a11y'; -@use 'button-base'; +@use '_button-base'; @include mdc-button.without-ripple($query: mdc-helpers.$mat-base-styles-query); @@ -10,7 +10,6 @@ .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button { @include button-base.mat-private-button-interactive(); @include button-base.mat-private-button-disabled(); - @include button-base.mat-private-button-touch-target(false); } // MDC expects button icons to contain this HTML content: diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material-experimental/mdc-button/fab.scss index 074015505382..4aa590867d66 100644 --- a/src/material-experimental/mdc-button/fab.scss +++ b/src/material-experimental/mdc-button/fab.scss @@ -1,13 +1,12 @@ @use '@material/fab' as mdc-fab; @use '../mdc-helpers/mdc-helpers'; -@use 'button-base'; +@use '_button-base'; @include mdc-fab.without-ripple($query: mdc-helpers.$mat-base-styles-query); .mat-mdc-fab, .mat-mdc-mini-fab { @include button-base.mat-private-button-interactive(); @include button-base.mat-private-button-disabled(); - @include button-base.mat-private-button-touch-target(true); // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator // styles and don't actually do anything. This undoes those conflicting styles. diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss index 7088c836934b..f7daec321298 100644 --- a/src/material-experimental/mdc-button/icon-button.scss +++ b/src/material-experimental/mdc-button/icon-button.scss @@ -13,7 +13,6 @@ border-radius: 50%; @include button-base.mat-private-button-disabled(); - @include button-base.mat-private-button-touch-target(true); // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles // and don't actually do anything. This undoes those conflicting styles.