@brightspace-ui/core 2.187.3 → 2.187.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,20 +1,43 @@
|
|
|
1
1
|
import '../input-radio-spacer.js';
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
|
+
import { bodySmallStyles } from '../../typography/styles.js';
|
|
3
4
|
import { radioStyles } from '../input-radio-styles.js';
|
|
4
5
|
|
|
5
6
|
class TestInputRadioSpacer extends LitElement {
|
|
6
7
|
|
|
7
8
|
static get styles() {
|
|
8
|
-
return radioStyles;
|
|
9
|
+
return [ radioStyles, bodySmallStyles ];
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
render() {
|
|
12
13
|
return html`
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
<div>
|
|
15
|
+
<label class="d2l-input-radio-label">
|
|
16
|
+
<input type="radio" name="myGroup" value="normal" checked>
|
|
17
|
+
Option 1
|
|
18
|
+
</label>
|
|
19
|
+
<d2l-input-radio-spacer>
|
|
20
|
+
Additional content can go here and will line up nicely with the edge of the radio.
|
|
21
|
+
</d2l-input-radio-spacer>
|
|
22
|
+
</div>
|
|
23
|
+
<div>
|
|
24
|
+
<label class="d2l-input-radio-label">
|
|
25
|
+
<input type="radio" name="myGroup" value="normal">
|
|
26
|
+
Option 1 (A really really long label that will wrap to the next line where the indentation will be applied. All the text should align.)
|
|
27
|
+
</label>
|
|
28
|
+
<d2l-input-radio-spacer>
|
|
29
|
+
Additional content can go here and will line up nicely with the edge of the radio.
|
|
30
|
+
</d2l-input-radio-spacer>
|
|
31
|
+
</div>
|
|
32
|
+
<div>
|
|
33
|
+
<label class="d2l-input-radio-label">
|
|
34
|
+
<input type="radio" name="myGroup" value="normal">
|
|
35
|
+
Option 1
|
|
36
|
+
</label>
|
|
37
|
+
<d2l-input-radio-spacer>
|
|
38
|
+
<div class="d2l-body-small">Additional content can go here and will line up nicely with the edge of the radio.</div>
|
|
39
|
+
</d2l-input-radio-spacer>
|
|
40
|
+
</div>
|
|
18
41
|
`;
|
|
19
42
|
}
|
|
20
43
|
|
|
@@ -116,7 +116,7 @@ If you'd like to manually link the radio input with a label, or use an ARIA labe
|
|
|
116
116
|
|
|
117
117
|
## Radio Spacer [d2l-input-radio-spacer]
|
|
118
118
|
|
|
119
|
-
To align related content below radio buttons, the `d2l-input-radio-spacer` element can be used:
|
|
119
|
+
To align related content below radio buttons, the `d2l-input-radio-spacer` element can be used in conjunction with the `d2l-input-radio-label` class:
|
|
120
120
|
|
|
121
121
|
<!-- docs: demo code display:block -->
|
|
122
122
|
```html
|
|
@@ -133,11 +133,13 @@ To align related content below radio buttons, the `d2l-input-radio-spacer` eleme
|
|
|
133
133
|
|
|
134
134
|
render() {
|
|
135
135
|
return html`
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
136
|
+
<label class="d2l-input-radio-label">
|
|
137
|
+
<input type="radio" value="normal" checked>
|
|
138
|
+
Option 1
|
|
139
|
+
</label>
|
|
140
|
+
<d2l-input-radio-spacer>
|
|
141
|
+
Additional content can go here and will line up nicely with the edge of the radio.
|
|
142
|
+
</d2l-input-radio-spacer>
|
|
141
143
|
`;
|
|
142
144
|
}
|
|
143
145
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.187.
|
|
3
|
+
"version": "2.187.4",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|