Skip to content

Commit 3ff8745

Browse files
claviskalindsaym-fa
claviska
and
lindsaym-fa
authored
Add orientation to radio group (#635)
* add orientation to radio group; fixes #613 * fix timing issue that prevents value from being set sometimes * gimme a break * make radio button examples horizontal --------- Co-authored-by: lindsaym-fa <[email protected]>
1 parent 0cb72ad commit 3ff8745

File tree

8 files changed

+121
-41
lines changed

8 files changed

+121
-41
lines changed

‎docs/docs/components/radio-button.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ icon: radio-group
99
Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
1010

1111
```html {.example}
12-
<wa-radio-group label="Select an option" name="a" value="1">
12+
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
1313
<wa-radio-button value="1">Option 1</wa-radio-button>
1414
<wa-radio-button value="2">Option 2</wa-radio-button>
1515
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -23,7 +23,7 @@ Radio buttons are designed to be used with [radio groups](/docs/components/radio
2323
To set the initial value and checked state, use the `value` attribute on the containing radio group.
2424

2525
```html {.example}
26-
<wa-radio-group label="Select an option" name="a" value="1">
26+
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
2727
<wa-radio-button value="1">Option 1</wa-radio-button>
2828
<wa-radio-button value="2">Option 2</wa-radio-button>
2929
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -35,7 +35,7 @@ To set the initial value and checked state, use the `value` attribute on the con
3535
Use the `disabled` attribute to disable a radio button.
3636

3737
```html {.example}
38-
<wa-radio-group label="Select an option" name="a" value="1">
38+
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
3939
<wa-radio-button value="1">Option 1</wa-radio-button>
4040
<wa-radio-button value="2" disabled>Option 2</wa-radio-button>
4141
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -47,23 +47,23 @@ Use the `disabled` attribute to disable a radio button.
4747
Use the `size` attribute to change a radio button's size.
4848

4949
```html {.example}
50-
<wa-radio-group size="small" label="Select an option" name="a" value="1">
50+
<wa-radio-group size="small" label="Select an option" orientation="horizontal" name="a" value="1">
5151
<wa-radio-button value="1">Option 1</wa-radio-button>
5252
<wa-radio-button value="2">Option 2</wa-radio-button>
5353
<wa-radio-button value="3">Option 3</wa-radio-button>
5454
</wa-radio-group>
5555

5656
<br />
5757

58-
<wa-radio-group size="medium" label="Select an option" name="a" value="1">
58+
<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
5959
<wa-radio-button value="1">Option 1</wa-radio-button>
6060
<wa-radio-button value="2">Option 2</wa-radio-button>
6161
<wa-radio-button value="3">Option 3</wa-radio-button>
6262
</wa-radio-group>
6363

6464
<br />
6565

66-
<wa-radio-group size="large" label="Select an option" name="a" value="1">
66+
<wa-radio-group size="large" label="Select an option" orientation="horizontal" name="a" value="1">
6767
<wa-radio-button value="1">Option 1</wa-radio-button>
6868
<wa-radio-button value="2">Option 2</wa-radio-button>
6969
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -75,23 +75,23 @@ Use the `size` attribute to change a radio button's size.
7575
Use the `pill` attribute to give radio buttons rounded edges.
7676

7777
```html {.example}
78-
<wa-radio-group size="small" label="Select an option" name="a" value="1">
78+
<wa-radio-group size="small" label="Select an option" orientation="horizontal" name="a" value="1">
7979
<wa-radio-button pill value="1">Option 1</wa-radio-button>
8080
<wa-radio-button pill value="2">Option 2</wa-radio-button>
8181
<wa-radio-button pill value="3">Option 3</wa-radio-button>
8282
</wa-radio-group>
8383

8484
<br />
8585

86-
<wa-radio-group size="medium" label="Select an option" name="a" value="1">
86+
<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
8787
<wa-radio-button pill value="1">Option 1</wa-radio-button>
8888
<wa-radio-button pill value="2">Option 2</wa-radio-button>
8989
<wa-radio-button pill value="3">Option 3</wa-radio-button>
9090
</wa-radio-group>
9191

9292
<br />
9393

94-
<wa-radio-group size="large" label="Select an option" name="a" value="1">
94+
<wa-radio-group size="large" label="Select an option" orientation="horizontal" name="a" value="1">
9595
<wa-radio-button pill value="1">Option 1</wa-radio-button>
9696
<wa-radio-button pill value="2">Option 2</wa-radio-button>
9797
<wa-radio-button pill value="3">Option 3</wa-radio-button>
@@ -103,7 +103,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
103103
Use the `prefix` and `suffix` slots to add icons.
104104

105105
```html {.example}
106-
<wa-radio-group label="Select an option" name="a" value="1">
106+
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
107107
<wa-radio-button value="1">
108108
<wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
109109
Option 1
@@ -127,7 +127,7 @@ Use the `prefix` and `suffix` slots to add icons.
127127
You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
128128

129129
```html {.example}
130-
<wa-radio-group label="Select an option" name="a" value="neutral">
130+
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="neutral">
131131
<wa-radio-button value="angry">
132132
<wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
133133
</wa-radio-button>

‎docs/docs/components/radio-group.md

Lines changed: 53 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ icon: radio-group
77

88
```html {.example}
99
<wa-radio-group label="Select an option" name="a" value="1">
10-
<wa-radio value="1">Option 1</wa-radio><br>
11-
<wa-radio value="2">Option 2</wa-radio><br>
10+
<wa-radio value="1">Option 1</wa-radio>
11+
<wa-radio value="2">Option 2</wa-radio>
1212
<wa-radio value="3">Option 3</wa-radio>
1313
</wa-radio-group>
1414
```
@@ -21,8 +21,8 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that
2121

2222
```html {.example}
2323
<wa-radio-group label="Select an option" hint="Choose the most appropriate option." name="a" value="1">
24-
<wa-radio value="1">Option 1</wa-radio><br>
25-
<wa-radio value="2">Option 2</wa-radio><br>
24+
<wa-radio value="1">Option 1</wa-radio>
25+
<wa-radio value="2">Option 2</wa-radio>
2626
<wa-radio value="3">Option 3</wa-radio>
2727
</wa-radio-group>
2828
```
@@ -32,7 +32,28 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that
3232
[Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control.
3333

3434
```html {.example}
35-
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
35+
<wa-radio-group
36+
label="Horizontal options"
37+
hint="Select an option that makes you proud."
38+
orientation="horizontal"
39+
name="a"
40+
value="1"
41+
>
42+
<wa-radio-button value="1">Option 1</wa-radio-button>
43+
<wa-radio-button value="2">Option 2</wa-radio-button>
44+
<wa-radio-button value="3">Option 3</wa-radio-button>
45+
</wa-radio-group>
46+
47+
<br>
48+
49+
<wa-radio-group
50+
label="Vertical options"
51+
hint="Select an option that makes you proud."
52+
orientation="vertical"
53+
name="a"
54+
value="1"
55+
style="max-width: 300px;"
56+
>
3657
<wa-radio-button value="1">Option 1</wa-radio-button>
3758
<wa-radio-button value="2">Option 2</wa-radio-button>
3859
<wa-radio-button value="3">Option 3</wa-radio-button>
@@ -45,8 +66,26 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
4566

4667
```html {.example}
4768
<wa-radio-group label="Select an option" name="a" value="1">
48-
<wa-radio value="1">Option 1</wa-radio><br>
49-
<wa-radio value="2" disabled>Option 2</wa-radio><br>
69+
<wa-radio value="1">Option 1</wa-radio>
70+
<wa-radio value="2" disabled>Option 2</wa-radio>
71+
<wa-radio value="3">Option 3</wa-radio>
72+
</wa-radio-group>
73+
```
74+
75+
### Orientation
76+
77+
The default orientation for radio items is `vertical`. Set the `orientation` to `horizontal` to items on the same row.
78+
79+
```html {.example}
80+
<wa-radio-group
81+
label="Select an option"
82+
hint="Choose the most appropriate option."
83+
orientation="horizontal"
84+
name="a"
85+
value="1"
86+
>
87+
<wa-radio value="1">Option 1</wa-radio>
88+
<wa-radio value="2">Option 2</wa-radio>
5089
<wa-radio value="3">Option 3</wa-radio>
5190
</wa-radio-group>
5291
```
@@ -57,8 +96,8 @@ The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/component
5796

5897
```html preview
5998
<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
60-
<wa-radio value="small">Small</wa-radio><br>
61-
<wa-radio value="medium">Medium</wa-radio><br>
99+
<wa-radio value="small">Small</wa-radio>
100+
<wa-radio value="medium">Medium</wa-radio>
62101
<wa-radio value="large">Large</wa-radio>
63102
</wa-radio-group>
64103

@@ -82,8 +121,8 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
82121
```html {.example}
83122
<form class="validation">
84123
<wa-radio-group label="Select an option" name="a" required>
85-
<wa-radio value="1">Option 1</wa-radio><br>
86-
<wa-radio value="2">Option 2</wa-radio><br>
124+
<wa-radio value="1">Option 1</wa-radio>
125+
<wa-radio value="2">Option 2</wa-radio>
87126
<wa-radio value="3">Option 3</wa-radio>
88127
</wa-radio-group>
89128
<br />
@@ -108,8 +147,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
108147
```html {.example}
109148
<form class="custom-validity">
110149
<wa-radio-group label="Select an option" name="a" value="1">
111-
<wa-radio value="1">Not me</wa-radio><br>
112-
<wa-radio value="2">Me neither</wa-radio><br>
150+
<wa-radio value="1">Not me</wa-radio>
151+
<wa-radio value="2">Me neither</wa-radio>
113152
<wa-radio value="3">Choose me</wa-radio>
114153
</wa-radio-group>
115154
<br />
@@ -127,7 +166,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
127166
});
128167
129168
// Update validity when a selection is made
130-
form.addEventlistener('change', () => {
169+
form.addEventListener('change', () => {
131170
const isValid = radioGroup.value === '3';
132171
radioGroup.setCustomValidity(isValid ? '' : errorMessage);
133172
});

‎docs/docs/components/radio.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ Radios are designed to be used with [radio groups](/docs/components/radio-group)
1111

1212
```html {.example}
1313
<wa-radio-group label="Select an option" name="a" value="1">
14-
<wa-radio value="1">Option 1</wa-radio><br>
15-
<wa-radio value="2">Option 2</wa-radio><br>
14+
<wa-radio value="1">Option 1</wa-radio>
15+
<wa-radio value="2">Option 2</wa-radio>
1616
<wa-radio value="3">Option 3</wa-radio>
1717
</wa-radio-group>
1818
```
@@ -29,8 +29,8 @@ To set the initial value and checked state, use the `value` attribute on the con
2929

3030
```html {.example}
3131
<wa-radio-group label="Select an option" name="a" value="3">
32-
<wa-radio value="1">Option 1</wa-radio><br>
33-
<wa-radio value="2">Option 2</wa-radio><br>
32+
<wa-radio value="1">Option 1</wa-radio>
33+
<wa-radio value="2">Option 2</wa-radio>
3434
<wa-radio value="3">Option 3</wa-radio>
3535
</wa-radio-group>
3636
```
@@ -41,8 +41,8 @@ Use the `disabled` attribute to disable a radio.
4141

4242
```html {.example}
4343
<wa-radio-group label="Select an option" name="a" value="1">
44-
<wa-radio value="1">Option 1</wa-radio><br>
45-
<wa-radio value="2" disabled>Option 2</wa-radio><br>
44+
<wa-radio value="1">Option 1</wa-radio>
45+
<wa-radio value="2" disabled>Option 2</wa-radio>
4646
<wa-radio value="3">Option 3</wa-radio>
4747
</wa-radio-group>
4848
```
@@ -53,24 +53,24 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
5353

5454
```html {.example}
5555
<wa-radio-group size="small" value="1">
56-
<wa-radio value="1">Small 1</wa-radio><br>
57-
<wa-radio value="2">Small 2</wa-radio><br>
56+
<wa-radio value="1">Small 1</wa-radio>
57+
<wa-radio value="2">Small 2</wa-radio>
5858
<wa-radio value="3">Small 3</wa-radio>
5959
</wa-radio-group>
6060

6161
<br />
6262

6363
<wa-radio-group size="medium" value="1">
64-
<wa-radio value="1">Medium 1</wa-radio><br>
65-
<wa-radio value="2">Medium 2</wa-radio><br>
64+
<wa-radio value="1">Medium 1</wa-radio>
65+
<wa-radio value="2">Medium 2</wa-radio>
6666
<wa-radio value="3">Medium 3</wa-radio>
6767
</wa-radio-group>
6868

6969
<br />
7070

7171
<wa-radio-group size="large" value="1">
72-
<wa-radio value="1">Large 1</wa-radio><br>
73-
<wa-radio value="2">Large 2</wa-radio><br>
72+
<wa-radio value="1">Large 1</wa-radio>
73+
<wa-radio value="2">Large 2</wa-radio>
7474
<wa-radio value="3">Large 3</wa-radio>
7575
</wa-radio-group>
7676
```

‎docs/docs/resources/changelog.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ During the alpha period, things might break! We take breaking changes very serio
2020
- `wa-blur` => `blur` (this event will no longer bubble, use `focusout` for a bubbling version)
2121
- `wa-focus` => `focus` (this event will no longer bubble)
2222
- Added `.wa-callout` utility class
23+
- Added the `orientation` attribute to `<wa-radio-group>` to support vertical and horizontal radio items
2324
- Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
2425
- Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions
2526

‎src/components/radio-group/radio-group.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,26 @@
2222
display: flex;
2323
}
2424

25+
[part~='form-control-input'] {
26+
display: flex;
27+
flex-direction: column;
28+
flex-wrap: wrap;
29+
gap: var(--wa-space-s);
30+
margin-block-end: var(--wa-space-xs);
31+
}
32+
33+
/* Horizontal */
34+
:host([orientation='horizontal']) [part~='form-control-input'] {
35+
flex-direction: row;
36+
gap: var(--wa-space-m);
37+
}
38+
39+
/* When radio buttons are slotted */
40+
:host([orientation]) .form-control--has-radio-buttons [part~='form-control-input'] {
41+
gap: 0;
42+
flex-wrap: nowrap;
43+
}
44+
2545
/* Help text */
2646
[part~='hint'] {
2747
margin-block-start: var(--wa-space-2xs);

0 commit comments

Comments
 (0)