@brightspace-ui/core 3.107.0 → 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.
- package/components/inputs/demo/input-checkbox.html +0 -6
- package/components/inputs/docs/input-checkbox.md +0 -22
- package/components/offscreen/offscreen.js +1 -2
- package/components/overflow-group/overflow-group-mixin.js +3 -5
- package/custom-elements.json +0 -11
- package/package.json +1 -1
- package/components/inputs/input-checkbox-spacer.js +0 -30
|
@@ -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:
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
|
2
|
-
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
3
2
|
|
|
4
3
|
/**
|
|
5
4
|
* A private helper declarations that should not be used by general consumers
|
|
@@ -25,7 +24,7 @@ export const offscreenStyles = css`
|
|
|
25
24
|
* A component for positioning content offscreen to only be visible to screen readers.
|
|
26
25
|
* @slot - Default content placed inside of the component
|
|
27
26
|
*/
|
|
28
|
-
class Offscreen extends
|
|
27
|
+
class Offscreen extends LitElement {
|
|
29
28
|
static get styles() {
|
|
30
29
|
return css`
|
|
31
30
|
:host {
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { css, html, nothing } from 'lit';
|
|
2
2
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
3
|
-
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
4
3
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
5
|
-
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
6
4
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
7
5
|
|
|
8
6
|
export const OVERFLOW_CLASS = 'd2l-overflow-container';
|
|
@@ -25,7 +23,7 @@ async function filterAsync(arr, callback) {
|
|
|
25
23
|
return results.filter(i => i !== fail);
|
|
26
24
|
}
|
|
27
25
|
|
|
28
|
-
export const OverflowGroupMixin = superclass => class extends LocalizeCoreElement(
|
|
26
|
+
export const OverflowGroupMixin = superclass => class extends LocalizeCoreElement(superclass) {
|
|
29
27
|
|
|
30
28
|
static get properties() {
|
|
31
29
|
return {
|
|
@@ -68,7 +66,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
68
66
|
}
|
|
69
67
|
|
|
70
68
|
static get styles() {
|
|
71
|
-
return
|
|
69
|
+
return css`
|
|
72
70
|
:host {
|
|
73
71
|
display: block;
|
|
74
72
|
}
|
|
@@ -82,7 +80,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
|
|
|
82
80
|
.d2l-overflow-group-container ::slotted([data-is-chomped]) {
|
|
83
81
|
display: none !important;
|
|
84
82
|
}
|
|
85
|
-
|
|
83
|
+
`;
|
|
86
84
|
}
|
|
87
85
|
|
|
88
86
|
constructor() {
|
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);
|