Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit 0544839

Browse files
trimoxtrimox
authored
feat(radio): Add touch target (#2068)
closes #2065
1 parent 6053007 commit 0544839

File tree

12 files changed

+163
-77
lines changed

12 files changed

+163
-77
lines changed

‎demos/src/app/app-routing.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const routes: Routes = [
6060
path: 'menu-surface-demo', loadChildren: () =>
6161
import('./components/menu-surface-demo/menu-surface.module').then(m => m.MenuSurfaceModule)
6262
},
63-
{path: 'radio-demo', loadChildren: () => import('./components/radio-demo/radio.module').then(m => m.RadioModule)},
63+
{path: 'radio-demo', loadChildren: () => import('./components/radio/module').then(m => m.RadioModule)},
6464
{path: 'ripple-demo', loadChildren: () => import('./components/ripple-demo/ripple.module').then(m => m.RippleModule)},
6565
{path: 'select-demo', loadChildren: () => import('./components/select/module').then(m => m.SelectModule)},
6666
{path: 'shape-docs', loadChildren: () => import('./components/shape-docs/shape.module').then(m => m.ShapeModule)},

‎demos/src/app/components/radio-demo/routing.module.ts‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎demos/src/app/components/radio-demo/sass.html‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎demos/src/app/components/radio-demo/api.html‎ renamed to ‎demos/src/app/components/radio/api.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,13 @@ <h4 mdcSubtitle2>Properties</h4>
2929
</tr>
3030
<tr>
3131
<td>ariaLabel: string</td>
32-
<td>Used to set the 'aria-label' attribute on the underlying input element.</td>
32+
<td>Used to set the 'aria-label' attribute on the underlying input
33+
element.</td>
3334
</tr>
3435
<tr>
3536
<td>ariaLabelledby: string</td>
36-
<td>The 'aria-labelledby' attribute takes precedence as the element's text alternative.</td>
37+
<td>The 'aria-labelledby' attribute takes precedence as the element's
38+
text alternative.</td>
3739
</tr>
3840
<tr>
3941
<td>checked: boolean</td>
@@ -47,6 +49,10 @@ <h4 mdcSubtitle2>Properties</h4>
4749
<td>required: boolean</td>
4850
<td>Whether the radio button is required.</td>
4951
</tr>
52+
<tr>
53+
<td>touch: boolean</td>
54+
<td>Set the component touch target to 48 x 48 px.</td>
55+
</tr>
5056
</tbody>
5157
</table>
5258

@@ -65,7 +71,8 @@ <h4 mdcSubtitle2>Events</h4>
6571
<tbody>
6672
<tr>
6773
<td>change(source: MdcRadio, value: any)</td>
68-
<td>Event emitted when the group value changes. Change events are only emitted when the value changes due to
74+
<td>Event emitted when the group value changes. Change events are only
75+
emitted when the value changes due to
6976
user interaction with a radio button.</td>
7077
</tr>
7178
</tbody>
@@ -103,14 +110,18 @@ <h4 mdcSubtitle2>Properties</h4>
103110
</tr>
104111
<tr>
105112
<td>selected: MdcRadio | null</td>
106-
<td>The currently selected radio button. If set to a new radio button, the radio group value will be updated to
113+
<td>The currently selected radio button. If set to a new radio button,
114+
the radio group value will be updated to
107115
match the new selected button.</td>
108116
</tr>
109117
<tr>
110118
<td>value: any</td>
111-
<td>Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding
112-
radio button with a matching value. If there is not such a corresponding radio button, this value persists to
113-
be applied in case a new radio button is added with a matching value.</td>
119+
<td>Value for the radio-group. Should equal the value of the selected
120+
radio button if there is a corresponding
121+
radio button with a matching value. If there is not such a
122+
corresponding radio button, this value persists to
123+
be applied in case a new radio button is added with a matching value.
124+
</td>
114125
</tr>
115126
</tbody>
116127
</table>
@@ -120,7 +131,8 @@ <h4 mdcSubtitle2>Events</h4>
120131
<tbody>
121132
<tr>
122133
<td>change(source: MdcRadio, value: any)</td>
123-
<td>Event emitted when the group value changes. Change events are only emitted when the value changes due to
134+
<td>Event emitted when the group value changes. Change events are only
135+
emitted when the value changes due to
124136
user interaction with a radio button.</td>
125137
</tr>
126138
</tbody>

‎demos/src/app/components/radio-demo/examples.html‎ renamed to ‎demos/src/app/components/radio/examples.html‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,14 @@
1717

1818
<div class="demo-content">
1919
<div class="demo-layout__row">
20-
<button mdc-button (click)="demoFormField.alignEnd = !demoFormField.alignEnd">RTL: {{demoFormField.alignEnd ? 'On'
20+
<button mdc-button
21+
(click)="demoFormField.alignEnd = !demoFormField.alignEnd">RTL: {{demoFormField.alignEnd ? 'On'
2122
: 'Off'}}</button>
22-
<button mdc-button (click)="demoRadio2.disabled = !demoRadio2.disabled">Disabled: {{demoRadio2.disabled ? 'On' :
23+
<button mdc-button
24+
(click)="demoRadio2.disabled = !demoRadio2.disabled">Disabled: {{demoRadio2.disabled ? 'On' :
2325
'Off'}}</button>
24-
<button mdc-button (click)="alternateColors(demoRadio2)">Alternate Colors</button>
26+
<button mdc-button (click)="alternateColors(demoRadio2)">Alternate
27+
Colors</button>
2528
</div>
2629
<mdc-form-field #demoFormField [alignEnd]="false">
2730
<mdc-radio #demoRadio2></mdc-radio>
@@ -33,7 +36,8 @@
3336
<div class="demo-content">
3437
<h3 class="demo-content__headline">Radio Group</h3>
3538
<div class="demo-layout__row">
36-
<button mdc-button (click)="demoRadioGroup.disabled = !demoRadioGroup.disabled">Disabled: {{demoRadioGroup.disabled
39+
<button mdc-button
40+
(click)="demoRadioGroup.disabled = !demoRadioGroup.disabled">Disabled: {{demoRadioGroup.disabled
3741
? 'On' : 'Off'}}</button>
3842
</div>
3943
<mdc-radio-group #demoRadioGroup [(ngModel)]="favoriteSeason">
@@ -49,7 +53,8 @@ <h3 class="demo-content__headline">Radio Group</h3>
4953
<div class="demo-content">
5054
<h3 class="demo-content__headline">Radio Group - Reactive forms</h3>
5155
<div class="demo-layout__row">
52-
<button mdc-button (click)="demoRadioReactive.disabled = !demoRadioReactive.disabled">Disabled:
56+
<button mdc-button
57+
(click)="demoRadioReactive.disabled = !demoRadioReactive.disabled">Disabled:
5358
{{demoRadioReactive.disabled ? 'On' : 'Off'}}</button>
5459
</div>
5560
<form [formGroup]="form">
@@ -62,4 +67,25 @@ <h3 class="demo-content__headline">Radio Group - Reactive forms</h3>
6267
</form>
6368
<p>Your favorite season is: {{form.controls['season'].value}}</p>
6469
<example-viewer [example]="exampleReactive"></example-viewer>
70+
</div>
71+
72+
<div class="demo-content">
73+
<h3 class="demo-content__headline">Accessibility</h3>
74+
<p>
75+
Material Design spec advises that touch targets should be at least 48 x 48
76+
px. To meet this requirement, add the `touch` property.
77+
</p>
78+
<p>
79+
Note that the outer mdc-touch-target-wrapper element is only necessary if
80+
you want to avoid potentially overlapping touch targets on adjacent elements
81+
(due to collapsing margins). </p>
82+
<div class="demo-layout__row">
83+
<div class="mdc-touch-target-wrapper">
84+
<mdc-form-field>
85+
<mdc-radio name="demo-radio-set" touch></mdc-radio>
86+
<label>My Accessibility Radio</label>
87+
</mdc-form-field>
88+
</div>
89+
</div>
90+
<example-viewer [example]="exampleAccessibility"></example-viewer>
6591
</div>

‎demos/src/app/components/radio-demo/radio.module.ts‎ renamed to ‎demos/src/app/components/radio/module.ts‎

File renamed without changes.

‎demos/src/app/components/radio-demo/radio-demo.ts‎ renamed to ‎demos/src/app/components/radio/radio.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {FormGroup, FormControl} from '@angular/forms';
66
import {MdcRadio} from '@angular-mdc/web';
77

88
@Component({template: '<component-viewer></component-viewer>'})
9-
export class RadioDemo implements OnInit {
9+
export class Radio implements OnInit {
1010
@ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
1111

1212
ngOnInit(): void {
@@ -101,4 +101,13 @@ form = new FormGroup({
101101
season: new FormControl(''),
102102
});`
103103
};
104+
105+
exampleAccessibility = {
106+
html: `<div class="mdc-touch-target-wrapper">
107+
<mdc-form-field>
108+
<mdc-radio name="demo-radio-set" touch></mdc-radio>
109+
<label>My Accessibility Radio</label>
110+
</mdc-form-field>
111+
</div>`
112+
};
104113
}

‎demos/src/app/components/radio/routing.module.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {NgModule} from '@angular/core';
2+
import {Routes, RouterModule} from '@angular/router';
3+
4+
import {Api, Examples, Sass, Radio} from './radio';
5+
6+
export const ROUTE_DECLARATIONS = [
7+
Api,
8+
Examples,
9+
Sass,
10+
Radio
11+
];
12+
13+
const ROUTES: Routes = [
14+
{
15+
path: '', component: Radio,
16+
children: [
17+
{path: '', redirectTo: 'api'},
18+
{path: 'api', component: Api},
19+
{path: 'sass', component: Sass},
20+
{path: 'examples', component: Examples}
21+
]
22+
}
23+
];
24+
25+
@NgModule({
26+
imports: [RouterModule.forChild(ROUTES)],
27+
exports: [RouterModule]
28+
})
29+
export class RoutingModule {}

‎demos/src/app/components/radio/sass.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<div class="docs-api">
2+
<h4 mdcSubtitle2>Sass Mixins</h4>
3+
4+
<table>
5+
<thead>
6+
<tr>
7+
<th>Mixin</th>
8+
<th>Description</th>
9+
</tr>
10+
</thead>
11+
<tbody>
12+
<tr>
13+
<td><code>unchecked-stroke-color($color)</code></td>
14+
<td>Sets the stroke color of an unchecked, enabled radio button</td>
15+
</tr>
16+
<tr>
17+
<td><code>checked-stroke-color($color)</code></td>
18+
<td>Sets the stroke color of a checked, enabled radio button</td>
19+
</tr>
20+
<tr>
21+
<td><code>ink-color($color)</code></td>
22+
<td>Sets the ink color of an enabled radio button</td>
23+
</tr>
24+
<tr>
25+
<td><code>disabled-unchecked-stroke-color($color)</code></td>
26+
<td>Sets the stroke color of an unchecked, disabled radio button</td>
27+
</tr>
28+
<tr>
29+
<td><code>disabled-checked-stroke-color($color)</code></td>
30+
<td>Sets the stroke color of a checked, disabled radio button</td>
31+
</tr>
32+
<tr>
33+
<td><code>disabled-ink-color($color)</code></td>
34+
<td>Sets the ink color of a disabled radio button</td>
35+
</tr>
36+
<tr>
37+
<td><code>focus-indicator-color($color)</code></td>
38+
<td>Sets the color of the focus indicator</td>
39+
</tr>
40+
<tr>
41+
<td><code>touch-target($size, $ripple-size)</code></td>
42+
<td>Sets radio touch target size which can be more than the ripple size.
43+
Param <code>$ripple-size</code> is required for custom ripple size,
44+
defaults to <code>$ripple-size</code>.</td>
45+
</tr>
46+
<tr>
47+
<td><code>ripple-size($size)</code></td>
48+
<td>Sets custom ripple size of radio.</td>
49+
</tr>
50+
<tr>
51+
<td><code>density($density-scale)</code></td>
52+
<td>Sets density scale for radio. Supported density scale values are
53+
<code>-3</code>, <code>-2</code>, <code>-1</code> and <code>0</code>
54+
(default).</td>
55+
</tr>
56+
</tbody>
57+
</table>
58+
</div>

‎demos/src/styles/_radio.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use '@material/radio/_index' as radio;
2-
@use '@material/ripple/mixins' as ripple;
2+
@use '@material/ripple/_index' as ripple;
33
@use '@material/theme/color-palette' as material-color;
44

55
.demo-radio--custom {

0 commit comments

Comments
 (0)