Skip to content

Commit 5d9992e

Browse files
wagnermacielwagnermaciel
committed
feat(cdk-experimental/radio): use case examples
feat(cdk-experimental/radio): Normalize radio example data and remove selected value display Updates the cdk-experimental radio examples to use a consistent list of fruits for their options, aligning with the listbox examples. Removes the display of the selected option's value from each example, as it is not necessary for demonstration purposes.
1 parent 97d60c5 commit 5d9992e

25 files changed

+734
-45
lines changed

‎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)