Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit b2e0fea

Browse files
joyzhongjoyzhong
authored
feat(touch-target): Add touch target mixins. (#4940)
1 parent 66b618d commit b2e0fea

6 files changed

Lines changed: 173 additions & 1 deletion

File tree

‎packages/material-components-web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"@material/textfield": "^3.1.0",
5959
"@material/theme": "^3.1.0",
6060
"@material/top-app-bar": "^3.1.0",
61+
"@material/touch-target": "0.0.0",
6162
"@material/typography": "^3.1.0"
6263
}
6364
}

‎packages/mdc-touch-target/README.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!--docs:
2+
title: "Touch Target"
3+
layout: detail
4+
section: components
5+
excerpt: "Increased touch targets for components"
6+
path: /catalog/touchtarget/
7+
-->
8+
9+
# Touch Target
10+
11+
Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element.
12+
For example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.
13+
14+
Material Design spec states that touch targets should be at least 48 x 48 px.
15+
The MDC Web library provides mixins and guidance on adding an increased touch target for the following components:
16+
* Button
17+
* Chips
18+
* Checkbox
19+
* Radio
20+
* Mini FAB
21+
22+
## Design & API Documentation
23+
24+
<ul class="icon-list">
25+
<li class="icon-list-item icon-list-item--spec">
26+
<a href="https://material.io/design/usability/accessibility.html#layout-typography">Material Design guidelines: Touch Targets</a>
27+
</li>
28+
</ul>
29+
30+
## Installation
31+
32+
```
33+
npm install @material/touch-target
34+
```
35+
36+
## Basic Usage
37+
38+
### HTML Structure
39+
40+
For a given button component:
41+
42+
```html
43+
<button class="mdc-button">
44+
<div class="mdc-button__ripple"></div>
45+
<span class="mdc-button__label">My Inaccessible Button</span>
46+
</button>
47+
```
48+
49+
You would add an increased touch target as follows:
50+
51+
```html
52+
<span>
53+
<button class="mdc-button mdc-button--touch">
54+
<div class="mdc-button__ripple"></div>
55+
<span class="mdc-button__label">My Accessible Button</span>
56+
<div class="mdc-button__touch"></div>
57+
</button>
58+
</span>
59+
```
60+
61+
Note that the wrapper `<span>` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
62+
63+
### Styles
64+
65+
```css
66+
@import "@material/touch-target/mdc-touch-target";
67+
```
68+
69+
## Style Customization
70+
71+
### Sass Mixins
72+
73+
Mixin | Description
74+
--- | ---
75+
`mdc-touch-target` | Applied to the inner touch target element.
76+
`mdc-touch-target-component` | Applied to the component root element. Adds margin to compensate for the increased touch target.

‎packages/mdc-touch-target/_mixins.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
//
2+
// Copyright 2019 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
@import "@material/feature-targeting/functions";
24+
@import "@material/feature-targeting/mixins";
25+
@import "./variables";
26+
27+
/** Styles applied to the component's inner touch target element. */
28+
@mixin mdc-touch-target($query: mdc-feature-all()) {
29+
$feat-structure: mdc-feature-create-target($query, structure);
30+
31+
@include mdc-feature-targets($feat-structure) {
32+
position: absolute;
33+
top: 50%;
34+
right: 0;
35+
left: 0;
36+
height: $mdc-touch-target-height;
37+
transform: translateY(-50%);
38+
}
39+
}
40+
41+
/** Styles applied to the component with the increased touch target. */
42+
@mixin mdc-touch-target-component($component-height, $query: mdc-feature-all()) {
43+
$feat-structure: mdc-feature-create-target($query, structure);
44+
45+
@include mdc-feature-targets($feat-structure) {
46+
margin: ($mdc-touch-target-height - $component-height) / 2 0;
47+
}
48+
}

‎packages/mdc-touch-target/_variables.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
//
2+
// Copyright 2019 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
$mdc-touch-target-height: 48px !default;

‎packages/mdc-touch-target/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "@material/touch-target",
3+
"description": "Touch target mixins and variables for Material Components for the web",
4+
"version": "0.0.0",
5+
"license": "MIT",
6+
"keywords": [
7+
"material components",
8+
"material design",
9+
"accessibility",
10+
"touch target"
11+
],
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/material-components/material-components-web.git",
15+
"directory": "packages/mdc-touch-target"
16+
},
17+
"dependencies": {
18+
"@material/feature-targeting": "^3.1.0"
19+
},
20+
"publishConfig": {
21+
"access": "public"
22+
}
23+
}

‎scripts/check-pkg-for-release.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const CSS_WHITELIST = [
7171
'feature-targeting',
7272
'rtl',
7373
'shape',
74+
'touch-target',
7475
];
7576

7677
const NOT_AUTOINIT = [
@@ -157,7 +158,7 @@ function checkDependencyAddedInMDCPackage() {
157158

158159
function checkPkgDependencyAddedInMDCPackage() {
159160
assert.notEqual(typeof MASTER_PACKAGE_JSON.dependencies[CLI_PACKAGE_JSON.name], 'undefined',
160-
'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not a denpendency for MDC Web. ' +
161+
'FAILURE: Component ' + CLI_PACKAGE_JSON.name + ' is not a dependency for MDC Web. ' +
161162
'Please add ' + CLI_PACKAGE_JSON.name +' to ' + MASTER_PACKAGE_JSON_RELATIVE_PATH +
162163
'\' dependencies before commit.');
163164
}

0 commit comments

Comments
 (0)