@brightspace-ui/core 3.107.1 → 3.108.0
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.
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
<script type="module">
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../input-checkbox.js';
|
|
10
|
-
import '../input-checkbox-spacer.js';
|
|
11
10
|
</script>
|
|
12
11
|
</head>
|
|
13
12
|
<body unresolved>
|
|
@@ -59,11 +58,6 @@
|
|
|
59
58
|
also line up nicely with the checkbox.
|
|
60
59
|
</div>
|
|
61
60
|
</d2l-input-checkbox>
|
|
62
|
-
<d2l-input-checkbox label="Label for checkbox"></d2l-input-checkbox>
|
|
63
|
-
<d2l-input-checkbox-spacer style="color: #999999;">
|
|
64
|
-
Additional content can go here and will<br>
|
|
65
|
-
also line up nicely with the checkbox.
|
|
66
|
-
</d2l-input-checkbox-spacer>
|
|
67
61
|
</template>
|
|
68
62
|
</d2l-demo-snippet>
|
|
69
63
|
|
|
@@ -80,28 +80,6 @@ checkbox.addEventListener('change', (e) => {
|
|
|
80
80
|
* `supporting`: Supporting information which will appear below and be aligned with the checkbox.
|
|
81
81
|
<!-- docs: end hidden content -->
|
|
82
82
|
|
|
83
|
-
## Checkbox Spacer [d2l-input-checkbox-spacer]
|
|
84
|
-
|
|
85
|
-
> [!NOTE]
|
|
86
|
-
> Spacer is obsolete. Use the `supporting` slot instead.
|
|
87
|
-
|
|
88
|
-
To align related content below checkboxes, the `d2l-input-checkbox-spacer` element can be used:
|
|
89
|
-
|
|
90
|
-
<!-- docs: demo code display:block -->
|
|
91
|
-
```html
|
|
92
|
-
<script type="module">
|
|
93
|
-
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
94
|
-
import '@brightspace-ui/core/components/inputs/input-checkbox-spacer.js';
|
|
95
|
-
</script>
|
|
96
|
-
<div>
|
|
97
|
-
<d2l-input-checkbox>Label for checkbox</d2l-input-checkbox>
|
|
98
|
-
<d2l-input-checkbox-spacer>
|
|
99
|
-
Additional content can go here and will
|
|
100
|
-
line up nicely with the edge of the checkbox.
|
|
101
|
-
</d2l-input-checkbox-spacer>
|
|
102
|
-
</div>
|
|
103
|
-
```
|
|
104
|
-
|
|
105
83
|
## Applying styles to native checkboxes
|
|
106
84
|
|
|
107
85
|
As an alternative to using the `<d2l-input-checkbox>` custom element, you can style a native checkbox inside your own element. Import `input-checkbox-styles.js` and apply the `d2l-input-checkbox` CSS class to the input:
|
package/custom-elements.json
CHANGED
|
@@ -5113,17 +5113,6 @@
|
|
|
5113
5113
|
}
|
|
5114
5114
|
]
|
|
5115
5115
|
},
|
|
5116
|
-
{
|
|
5117
|
-
"name": "d2l-input-checkbox-spacer",
|
|
5118
|
-
"path": "./components/inputs/input-checkbox-spacer.js",
|
|
5119
|
-
"description": "Used to align related content below checkboxes",
|
|
5120
|
-
"slots": [
|
|
5121
|
-
{
|
|
5122
|
-
"name": "",
|
|
5123
|
-
"description": "Additional related content"
|
|
5124
|
-
}
|
|
5125
|
-
]
|
|
5126
|
-
},
|
|
5127
5116
|
{
|
|
5128
5117
|
"name": "d2l-input-checkbox",
|
|
5129
5118
|
"path": "./components/inputs/input-checkbox.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.108.0",
|
|
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",
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { css, html, LitElement } from 'lit';
|
|
2
|
-
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Used to align related content below checkboxes
|
|
6
|
-
* @slot - Additional related content
|
|
7
|
-
*/
|
|
8
|
-
class InputCheckboxSpacer extends RtlMixin(LitElement) {
|
|
9
|
-
|
|
10
|
-
static get styles() {
|
|
11
|
-
return css`
|
|
12
|
-
:host {
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
display: block;
|
|
15
|
-
margin-bottom: 0.9rem;
|
|
16
|
-
padding-left: 1.7rem;
|
|
17
|
-
}
|
|
18
|
-
:host([dir="rtl"]) {
|
|
19
|
-
padding-left: 0;
|
|
20
|
-
padding-right: 1.7rem;
|
|
21
|
-
}
|
|
22
|
-
`;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
render() {
|
|
26
|
-
return html`<slot></slot>`;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
customElements.define('d2l-input-checkbox-spacer', InputCheckboxSpacer);
|