Skip to content

Commit

Permalink
Revert "fix(material-experimental/mdc-button): set proper touch target (
Browse files Browse the repository at this point in the history
#22846)" (#22925)

This reverts commit 793e1f1.

(cherry picked from commit 2f873a8)
  • Loading branch information
andrewseguin committed Jun 9, 2021
1 parent cc36883 commit 4146af0
Show file tree
Hide file tree
Showing 5 changed files with 2 additions and 23 deletions.
16 changes: 0 additions & 16 deletions 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
Expand Down Expand Up @@ -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);
}
}
2 changes: 0 additions & 2 deletions src/material-experimental/mdc-button/button.html
Expand Up @@ -21,5 +21,3 @@
[matRippleDisabled]="_isRippleDisabled()"
[matRippleCentered]="_isRippleCentered"
[matRippleTrigger]="_elementRef.nativeElement"></span>

<span class="mat-mdc-button-touch-target"></span>
3 changes: 1 addition & 2 deletions src/material-experimental/mdc-button/button.scss
Expand Up @@ -2,15 +2,14 @@
@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);

.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:
Expand Down
3 changes: 1 addition & 2 deletions 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.
Expand Down
1 change: 0 additions & 1 deletion src/material-experimental/mdc-button/icon-button.scss
Expand Up @@ -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.
Expand Down

0 comments on commit 4146af0

Please sign in to comment.