Skip to content

Commit bde0ed7

Browse files
claviskaclaviska
authored
add orientation example and use utils for spacing (#648)
1 parent 8dc49f7 commit bde0ed7

File tree

2 files changed

+50
-33
lines changed

2 files changed

+50
-33
lines changed

‎docs/docs/native/radio.md

Lines changed: 49 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,11 @@ elements:
99
file: styles/native/radio.css
1010
---
1111

12-
<style>
13-
label {
14-
display: inline-block;
15-
}
16-
17-
label + label {
18-
margin-inline-start: var(--wa-space);
19-
}
20-
</style>
21-
2212
```html {.example}
23-
<label><input type="radio" name="radio" value="1"> Option 1</label>
24-
<label><input type="radio" name="radio" value="2"> Option 2</label>
13+
<div class="wa-cluster">
14+
<label><input type="radio" name="radio" value="1"> Option 1</label>
15+
<label><input type="radio" name="radio" value="2"> Option 2</label>
16+
</div>
2517
```
2618

2719
## Examples
@@ -31,47 +23,71 @@ file: styles/native/radio.css
3123
To set the initial value and checked state, use the `checked` attribute on the corresponding radio.
3224

3325
```html {.example}
34-
<label><input type="radio" name="radio" value="1"> Option 1</label>
35-
<label><input type="radio" name="radio" value="2"> Option 2</label>
36-
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
26+
<div class="wa-cluster">
27+
<label><input type="radio" name="radio" value="1"> Option 1</label>
28+
<label><input type="radio" name="radio" value="2"> Option 2</label>
29+
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
30+
</div>
3731
```
3832

3933
### Disabled
4034

4135
Use the `disabled` attribute to disable a radio.
4236

4337
```html {.example}
44-
<label><input type="radio" name="radio" value="1"> Option 1</label>
45-
<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
46-
<label><input type="radio" name="radio" value="3"> Option 3</label>
38+
<div class="wa-cluster">
39+
<label><input type="radio" name="radio" value="1"> Option 1</label>
40+
<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
41+
<label><input type="radio" name="radio" value="3"> Option 3</label>
42+
</div>
4743
```
4844

4945
### Sizes
5046

5147
Use the [size utilities](/docs/utilities/size) to change the radios' size.
5248

5349
```html {.example}
54-
<fieldset class="wa-size-s">
55-
<legend>Small</legend>
56-
<label><input type="radio" name="radio" value="1"> Option 1</label>
57-
<label><input type="radio" name="radio" value="2"> Option 2</label>
58-
<label><input type="radio" name="radio" value="3"> Option 3</label>
50+
<fieldset class="wa-size-s wa-cluster">
51+
<legend>Small</legend>
52+
<label><input type="radio" name="radio" value="1"> Option 1</label>
53+
<label><input type="radio" name="radio" value="2"> Option 2</label>
54+
<label><input type="radio" name="radio" value="3"> Option 3</label>
5955
</fieldset>
6056

6157
<br />
62-
<fieldset class="wa-size-m">
63-
<legend>Medium</legend>
64-
<label><input type="radio" name="radio" value="1"> Option 1</label>
65-
<label><input type="radio" name="radio" value="2"> Option 2</label>
66-
<label><input type="radio" name="radio" value="3"> Option 3</label>
58+
<fieldset class="wa-size-m wa-cluster">
59+
<legend>Medium</legend>
60+
<label><input type="radio" name="radio" value="1"> Option 1</label>
61+
<label><input type="radio" name="radio" value="2"> Option 2</label>
62+
<label><input type="radio" name="radio" value="3"> Option 3</label>
6763
</fieldset>
6864

6965
<br />
7066

71-
<fieldset class="wa-size-l">
72-
<legend>Large</legend>
73-
<label><input type="radio" name="radio" value="1"> Option 1</label>
74-
<label><input type="radio" name="radio" value="2"> Option 2</label>
75-
<label><input type="radio" name="radio" value="3"> Option 3</label>
67+
<fieldset class="wa-size-l wa-cluster">
68+
<legend>Large</legend>
69+
<label><input type="radio" name="radio" value="1"> Option 1</label>
70+
<label><input type="radio" name="radio" value="2"> Option 2</label>
71+
<label><input type="radio" name="radio" value="3"> Option 3</label>
7672
</fieldset>
7773
```
74+
75+
### Orientation
76+
77+
You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy.
78+
79+
```html {.example}
80+
<div class="wa-cluster">
81+
<label><input type="radio" name="radio" value="1"> Option 1</label>
82+
<label><input type="radio" name="radio" value="2"> Option 2</label>
83+
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
84+
</div>
85+
```
86+
87+
```html {.example}
88+
<div class="wa-stack">
89+
<label><input type="radio" name="radio" value="1"> Option 1</label>
90+
<label><input type="radio" name="radio" value="2"> Option 2</label>
91+
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
92+
</div>
93+
```

‎docs/docs/resources/changelog.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ During the alpha period, things might break! We take breaking changes very serio
1414

1515
## Next
1616

17+
- Added an orientation example to the native radio docs
1718
- Fixed a number of broken event listeners throughout the docs
1819

1920
## 3.0.0-alpha.10

0 commit comments

Comments
 (0)