Skip to content

Commit dacbec9

Browse files
committed
fix(material/slide-toggle): add larger touch target
1 parent 6716f50 commit dacbec9

File tree

4 files changed

+33
-2
lines changed

4 files changed

+33
-2
lines changed

src/material/slide-toggle/_m2-slide-toggle.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,8 @@
9999
-1: 36px,
100100
-2: 32px,
101101
-3: 28px,
102-
), $density-scale)
102+
), $density-scale),
103+
slide-toggle-touch-target-display: if($density-scale < -1, none, block)
103104
),
104105
);
105106
}

src/material/slide-toggle/_m3-slide-toggle.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@use 'sass:map';
2+
@use 'sass:list';
23
@use '../core/tokens/m3-utils';
4+
@use '../core/theming/theming';
35
@use '../core/tokens/m3';
46

57
/// Generates custom tokens for the mat-slide-toggle.
@@ -115,6 +117,16 @@
115117
slide-toggle-label-text-tracking: map.get($system, body-medium-tracking),
116118
slide-toggle-label-text-weight: map.get($system, body-medium-weight),
117119
),
118-
density: (),
120+
density: get-density-tokens(map.get($system, density-scale)),
121+
);
122+
}
123+
124+
// Tokens that can be configured through Angular Material's density theming API.
125+
@function get-density-tokens($scale) {
126+
$scale: theming.clamp-density($scale, -3);
127+
$index: ($scale * -1) + 1;
128+
129+
@return (
130+
slide-toggle-touch-target-display: list.nth((block, block, none, none), $index),
119131
);
120132
}

src/material/slide-toggle/slide-toggle.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
[attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
2121
(click)="_handleClick()"
2222
#switch>
23+
<div class="mat-mdc-slide-toggle-touch-target"></div>
2324
<span class="mdc-switch__track"></span>
2425
<span class="mdc-switch__handle-track">
2526
<span class="mdc-switch__handle">

src/material/slide-toggle/slide-toggle.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,3 +542,20 @@ $fallbacks: m3-slide-toggle.get-tokens();
542542
color: token-utils.slot(slide-toggle-disabled-label-text-color, $fallbacks);
543543
}
544544
}
545+
546+
// Element used to provide a larger tap target for users on touch devices.
547+
.mat-mdc-slide-toggle-touch-target {
548+
position: absolute;
549+
top: 50%;
550+
left: 50%;
551+
height: 48px;
552+
width: 100%;
553+
transform: translate(-50%, -50%);
554+
display: token-utils.slot(slide-toggle-touch-target-display, $fallbacks);
555+
556+
[dir='rtl'] & {
557+
left: auto;
558+
right: 50%;
559+
transform: translate(50%, -50%);
560+
}
561+
}

0 commit comments

Comments
 (0)