Skip to content

Commit 2f873a8

Browse files
authored
Revert "fix(material-experimental/mdc-button): set proper touch target (#22846)" (#22925)
This reverts commit 793e1f1.
1 parent 764c150 commit 2f873a8

File tree

5 files changed

+2
-23
lines changed

5 files changed

+2
-23
lines changed

src/material-experimental/mdc-button/_button-base.scss

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@use '@material/touch-target' as mdc-touch-target;
2-
@use '../mdc-helpers/mdc-helpers';
31
@use '../../material/core/style/layout-common';
42

53
// Adds styles necessary to provide stateful interactions with the button. This includes providing
@@ -61,17 +59,3 @@
6159
pointer-events: none;
6260
}
6361
}
64-
65-
@mixin mat-private-button-touch-target($is-square) {
66-
// Element used to ensure that the button has a touch target that meets the required minimum.
67-
// Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
68-
// class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which
69-
// goes against our rule of not having margins on the host node. Furthermore, having the margin on
70-
// the button itself would require us to wrap it in another div. See:
71-
// https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
72-
.mat-mdc-button-touch-target {
73-
@include mdc-touch-target.touch-target(
74-
$set-width: $is-square,
75-
$query: mdc-helpers.$mat-base-styles-query);
76-
}
77-
}

src/material-experimental/mdc-button/button.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,3 @@
2121
[matRippleDisabled]="_isRippleDisabled()"
2222
[matRippleCentered]="_isRippleCentered"
2323
[matRippleTrigger]="_elementRef.nativeElement"></span>
24-
25-
<span class="mat-mdc-button-touch-target"></span>

src/material-experimental/mdc-button/button.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22
@use '@material/button/variables' as mdc-button-variables;
33
@use '../mdc-helpers/mdc-helpers';
44
@use '../../cdk/a11y';
5-
@use 'button-base';
5+
@use '_button-base';
66

77

88
@include mdc-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
99

1010
.mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
1111
@include button-base.mat-private-button-interactive();
1212
@include button-base.mat-private-button-disabled();
13-
@include button-base.mat-private-button-touch-target(false);
1413
}
1514

1615
// MDC expects button icons to contain this HTML content:

src/material-experimental/mdc-button/fab.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
@use '@material/fab' as mdc-fab;
22
@use '../mdc-helpers/mdc-helpers';
3-
@use 'button-base';
3+
@use '_button-base';
44

55
@include mdc-fab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
66

77
.mat-mdc-fab, .mat-mdc-mini-fab {
88
@include button-base.mat-private-button-interactive();
99
@include button-base.mat-private-button-disabled();
10-
@include button-base.mat-private-button-touch-target(true);
1110

1211
// MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
1312
// styles and don't actually do anything. This undoes those conflicting styles.

src/material-experimental/mdc-button/icon-button.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
border-radius: 50%;
1414

1515
@include button-base.mat-private-button-disabled();
16-
@include button-base.mat-private-button-touch-target(true);
1716

1817
// MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
1918
// and don't actually do anything. This undoes those conflicting styles.

0 commit comments

Comments
 (0)