Skip to content

Commit 4be8722

Browse files
wagnermacielwagnermaciel
authored
test(cdk-experimental/radio): use case examples (angular#31380)
* test(cdk-experimental/radio): use case examples * fixup! test(cdk-experimental/radio): use case examples
1 parent b20b46c commit 4be8722

26 files changed

+736
-47
lines changed

‎src/cdk-experimental/radio/radio.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,9 @@ describe('CdkRadioGroup', () => {
119119
});
120120
});
121121

122-
it('should set aria-orientation to "horizontal"', () => {
122+
it('should set aria-orientation to "vertical"', () => {
123123
setupDefaultRadioGroup();
124-
expect(radioGroupElement.getAttribute('aria-orientation')).toBe('horizontal');
124+
expect(radioGroupElement.getAttribute('aria-orientation')).toBe('vertical');
125125
});
126126

127127
it('should set aria-disabled to false', () => {

‎src/cdk-experimental/radio/radio.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export class CdkRadioGroup<V> {
101101
protected items = computed(() => this._cdkRadioButtons().map(radio => radio.pattern));
102102

103103
/** Whether the radio group is vertically or horizontally oriented. */
104-
orientation = input<'vertical' | 'horizontal'>('horizontal');
104+
orientation = input<'vertical' | 'horizontal'>('vertical');
105105

106106
/** Whether disabled items in the group should be skipped when navigating. */
107107
skipDisabled = input(true, {transform: booleanAttribute});

‎src/components-examples/cdk-experimental/radio/cdk-radio-active-descendant/cdk-radio-active-descendant-example.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="example-container">
2+
<ul
3+
cdkRadioGroup
4+
navigationMode="activedescendant"
5+
class="example-radio-group"
6+
aria-labelledby="active-descendant-radio-label"
7+
>
8+
<label class="example-label" id="active-descendant-radio-label">Favorite Fruit (Active Descendant)</label>
9+
@for (fruit of fruits; track fruit) {
10+
<li
11+
class="example-radio-button"
12+
[value]="fruit"
13+
cdkRadioButton
14+
#radioButton="cdkRadioButton"
15+
>
16+
<span class="example-radio-indicator" [class.example-radio-checked]="radioButton.pattern.selected()"></span>
17+
<span>{{ fruit }}</span>
18+
</li>
19+
}
20+
</ul>
21+
</div>

‎src/components-examples/cdk-experimental/radio/cdk-radio-active-descendant/cdk-radio-active-descendant-example.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {Component} from '@angular/core';
2+
import {FormsModule} from '@angular/forms';
3+
import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio';
4+
5+
/** @title Active descendant radio group. */
6+
@Component({
7+
selector: 'cdk-radio-active-descendant-example',
8+
exportAs: 'cdkRadioActiveDescendantExample',
9+
templateUrl: 'cdk-radio-active-descendant-example.html',
10+
standalone: true,
11+
styleUrl: '../radio-common.css',
12+
imports: [CdkRadioGroup, CdkRadioButton, FormsModule],
13+
})
14+
export class CdkRadioActiveDescendantExample {
15+
fruits = [
16+
'Apple',
17+
'Apricot',
18+
'Banana',
19+
'Blackberry',
20+
'Blueberry',
21+
'Cantaloupe',
22+
'Cherry',
23+
'Clementine',
24+
'Cranberry',
25+
'Dates',
26+
'Figs',
27+
'Grapes',
28+
'Grapefruit',
29+
'Guava',
30+
'Kiwi',
31+
'Kumquat',
32+
'Lemon',
33+
'Lime',
34+
'Mandarin',
35+
'Mango',
36+
'Nectarine',
37+
'Orange',
38+
'Papaya',
39+
'Passion',
40+
'Peach',
41+
'Pear',
42+
'Pineapple',
43+
'Plum',
44+
'Pomegranate',
45+
'Raspberries',
46+
'Strawberry',
47+
'Tangerine',
48+
'Watermelon',
49+
];
50+
}

‎src/components-examples/cdk-experimental/radio/cdk-radio/cdk-radio-example.html renamed to ‎src/components-examples/cdk-experimental/radio/cdk-radio-configurable/cdk-radio-configurable-example.html

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,11 @@
33
<mat-checkbox [formControl]="readonly">Readonly</mat-checkbox>
44
<mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
55

6-
<mat-form-field subscriptSizing="dynamic" appearance="outline">
7-
<mat-label>Selected Flavor</mat-label>
8-
<mat-select [(value)]="selectedValue">
9-
<mat-option [value]="null"><em>None</em></mat-option>
10-
@for (flavor of flavors; track flavor) {
11-
<mat-option [value]="flavor">{{flavor}}</mat-option>
12-
}
13-
</mat-select>
14-
</mat-form-field>
15-
166
<mat-form-field subscriptSizing="dynamic" appearance="outline">
177
<mat-label>Disabled Radio Options</mat-label>
188
<mat-select [(value)]="disabledOptions" multiple>
19-
@for (flavor of flavors; track flavor) {
20-
<mat-option [value]="flavor">{{flavor}}</mat-option>
9+
@for (fruit of fruits; track fruit) {
10+
<mat-option [value]="fruit">{{fruit}}</mat-option>
2111
}
2212
</mat-select>
2313
</mat-form-field>
@@ -42,20 +32,19 @@
4232
<!-- #docregion radio-group -->
4333
<ul
4434
cdkRadioGroup
45-
[(value)]="selectedValue"
4635
[disabled]="disabled.value"
4736
[readonly]="readonly.value"
4837
[skipDisabled]="skipDisabled.value"
4938
[orientation]="orientation"
5039
[focusMode]="focusMode"
5140
class="example-radio-group"
52-
aria-label="Select your favorite ice cream flavor"
41+
aria-label="Select your favorite fruit"
5342
>
54-
@for (flavor of flavors; track flavor) {
55-
@let optionDisabled = disabledOptions.includes(flavor);
56-
<li cdkRadioButton [value]="flavor" [disabled]="optionDisabled" class="example-radio-button">
43+
@for (fruit of fruits; track fruit) {
44+
@let optionDisabled = disabledOptions.includes(fruit);
45+
<li cdkRadioButton [value]="fruit" [disabled]="optionDisabled" class="example-radio-button">
5746
<span class="example-radio-indicator"></span>
58-
<span>{{ flavor }}</span>
47+
<span>{{ fruit }}</span>
5948
</li>
6049
}
6150
</ul>

‎src/components-examples/cdk-experimental/radio/cdk-radio/cdk-radio-example.ts renamed to ‎src/components-examples/cdk-experimental/radio/cdk-radio-configurable/cdk-radio-configurable-example.ts

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import {MatFormFieldModule} from '@angular/material/form-field';
55
import {MatSelectModule} from '@angular/material/select';
66
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
77

8-
/** @title Basic CDK Radio Group */
8+
/** @title Configurable CDK Radio Group */
99
@Component({
10-
selector: 'cdk-radio-example',
11-
exportAs: 'cdkRadioExample',
12-
templateUrl: 'cdk-radio-example.html',
13-
styleUrl: 'cdk-radio-example.css',
10+
selector: 'cdk-radio-configurable-example',
11+
exportAs: 'cdkRadioConfigurableExample',
12+
templateUrl: 'cdk-radio-configurable-example.html',
13+
styleUrl: '../radio-common.css',
1414
standalone: true,
1515
imports: [
1616
CdkRadioGroup,
@@ -22,18 +22,51 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
2222
ReactiveFormsModule,
2323
],
2424
})
25-
export class CdkRadioExample {
25+
export class CdkRadioConfigurableExample {
2626
orientation: 'vertical' | 'horizontal' = 'vertical';
2727
disabled = new FormControl(false, {nonNullable: true});
2828

29-
flavors = ['Vanilla', 'Chocolate', 'Strawberry', 'Mint Chip', 'Cookies & Cream', 'Rocky Road'];
29+
fruits = [
30+
'Apple',
31+
'Apricot',
32+
'Banana',
33+
'Blackberry',
34+
'Blueberry',
35+
'Cantaloupe',
36+
'Cherry',
37+
'Clementine',
38+
'Cranberry',
39+
'Dates',
40+
'Figs',
41+
'Grapes',
42+
'Grapefruit',
43+
'Guava',
44+
'Kiwi',
45+
'Kumquat',
46+
'Lemon',
47+
'Lime',
48+
'Mandarin',
49+
'Mango',
50+
'Nectarine',
51+
'Orange',
52+
'Papaya',
53+
'Passion',
54+
'Peach',
55+
'Pear',
56+
'Pineapple',
57+
'Plum',
58+
'Pomegranate',
59+
'Raspberries',
60+
'Strawberry',
61+
'Tangerine',
62+
'Watermelon',
63+
];
3064

3165
// New controls
3266
readonly = new FormControl(false, {nonNullable: true});
3367
skipDisabled = new FormControl(true, {nonNullable: true});
3468
focusMode: 'roving' | 'activedescendant' = 'roving';
35-
selectedValue: string | null = 'Vanilla'; // To control/reflect the radio group's value
3669

3770
// Control for which radio options are individually disabled
38-
disabledOptions: string[] = ['Chocolate'];
71+
disabledOptions: string[] = ['Banana'];
3972
}

‎src/components-examples/cdk-experimental/radio/cdk-radio-disabled-focusable/cdk-radio-disabled-focusable-example.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="example-container">
2+
<ul
3+
cdkRadioGroup
4+
[skipDisabled]="false"
5+
class="example-radio-group"
6+
aria-labelledby="disabled-focusable-radio-label"
7+
>
8+
<label class="example-label" id="disabled-focusable-radio-label">Favorite Fruit (Disabled are Focusable)</label>
9+
@for (fruit of fruits; track fruit) {
10+
<li
11+
class="example-radio-button"
12+
[value]="fruit"
13+
[disabled]="disabledFruits.includes(fruit)"
14+
cdkRadioButton
15+
#radioButton="cdkRadioButton"
16+
>
17+
<span class="example-radio-indicator" [class.example-radio-checked]="radioButton.pattern.selected()"></span>
18+
<span>{{ fruit }} {{ disabledFruits.includes(fruit) ? '(Disabled)' : '' }}</span>
19+
</li>
20+
}
21+
</ul>
22+
</div>

‎src/components-examples/cdk-experimental/radio/cdk-radio-disabled-focusable/cdk-radio-disabled-focusable-example.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {Component} from '@angular/core';
2+
import {FormsModule} from '@angular/forms';
3+
import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio';
4+
5+
/** @title Radio group with disabled options that are focusable. */
6+
@Component({
7+
selector: 'cdk-radio-disabled-focusable-example',
8+
exportAs: 'cdkRadioDisabledFocusableExample',
9+
templateUrl: 'cdk-radio-disabled-focusable-example.html',
10+
styleUrl: '../radio-common.css',
11+
standalone: true,
12+
imports: [CdkRadioGroup, CdkRadioButton, FormsModule],
13+
})
14+
export class CdkRadioDisabledFocusableExample {
15+
fruits = [
16+
'Apple',
17+
'Apricot',
18+
'Banana',
19+
'Blackberry',
20+
'Blueberry',
21+
'Cantaloupe',
22+
'Cherry',
23+
'Clementine',
24+
'Cranberry',
25+
'Dates',
26+
'Figs',
27+
'Grapes',
28+
'Grapefruit',
29+
'Guava',
30+
'Kiwi',
31+
'Kumquat',
32+
'Lemon',
33+
'Lime',
34+
'Mandarin',
35+
'Mango',
36+
'Nectarine',
37+
'Orange',
38+
'Papaya',
39+
'Passion',
40+
'Peach',
41+
'Pear',
42+
'Pineapple',
43+
'Plum',
44+
'Pomegranate',
45+
'Raspberries',
46+
'Strawberry',
47+
'Tangerine',
48+
'Watermelon',
49+
];
50+
disabledFruits = ['Banana', 'Kiwi'];
51+
}

‎src/components-examples/cdk-experimental/radio/cdk-radio-disabled-skipped/cdk-radio-disabled-skipped-example.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="example-container">
2+
<ul
3+
cdkRadioGroup
4+
class="example-radio-group"
5+
aria-labelledby="disabled-skipped-radio-label"
6+
>
7+
<label class="example-label" id="disabled-skipped-radio-label">Select a Fruit (Disabled are Skipped)</label>
8+
@for (fruit of fruits; track fruit) {
9+
<li
10+
class="example-radio-button"
11+
[value]="fruit"
12+
[disabled]="disabledFruits.includes(fruit)"
13+
cdkRadioButton
14+
#radioButton="cdkRadioButton"
15+
>
16+
<span class="example-radio-indicator" [class.example-radio-checked]="radioButton.pattern.selected()"></span>
17+
<span>{{ fruit }} {{ disabledFruits.includes(fruit) ? '(Disabled)' : '' }}</span>
18+
</li>
19+
}
20+
</ul>
21+
</div>

‎src/components-examples/cdk-experimental/radio/cdk-radio-disabled-skipped/cdk-radio-disabled-skipped-example.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {Component} from '@angular/core';
2+
import {FormsModule} from '@angular/forms';
3+
import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio';
4+
5+
/** @title Radio group with disabled options that are skipped. */
6+
@Component({
7+
selector: 'cdk-radio-disabled-skipped-example',
8+
exportAs: 'cdkRadioDisabledSkippedExample',
9+
templateUrl: 'cdk-radio-disabled-skipped-example.html',
10+
styleUrl: '../radio-common.css',
11+
standalone: true,
12+
imports: [CdkRadioGroup, CdkRadioButton, FormsModule],
13+
})
14+
export class CdkRadioDisabledSkippedExample {
15+
fruits = [
16+
'Apple',
17+
'Apricot',
18+
'Banana',
19+
'Blackberry',
20+
'Blueberry',
21+
'Cantaloupe',
22+
'Cherry',
23+
'Clementine',
24+
'Cranberry',
25+
'Dates',
26+
'Figs',
27+
'Grapes',
28+
'Grapefruit',
29+
'Guava',
30+
'Kiwi',
31+
'Kumquat',
32+
'Lemon',
33+
'Lime',
34+
'Mandarin',
35+
'Mango',
36+
'Nectarine',
37+
'Orange',
38+
'Papaya',
39+
'Passion',
40+
'Peach',
41+
'Pear',
42+
'Pineapple',
43+
'Plum',
44+
'Pomegranate',
45+
'Raspberries',
46+
'Strawberry',
47+
'Tangerine',
48+
'Watermelon',
49+
];
50+
disabledFruits = ['Banana', 'Kiwi'];
51+
}

‎src/components-examples/cdk-experimental/radio/cdk-radio-disabled/cdk-radio-disabled-example.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="example-container">
2+
<ul
3+
cdkRadioGroup
4+
[disabled]="true"
5+
class="example-radio-group"
6+
aria-labelledby="disabled-radio-label"
7+
>
8+
<label class="example-label" id="disabled-radio-label">Favorite Fruit (Disabled)</label>
9+
@for (fruit of fruits; track fruit) {
10+
<li class="example-radio-button" [value]="fruit" cdkRadioButton #radioButton="cdkRadioButton">
11+
<span
12+
class="example-radio-indicator"
13+
[class.example-radio-checked]="radioButton.pattern.selected()"
14+
></span>
15+
<span>{{ fruit }}</span>
16+
</li>
17+
}
18+
</ul>
19+
<p><i>The entire radio group is disabled. Focus should not enter the group.</i></p>
20+
</div>

0 commit comments

Comments
 (0)