@brightspace-ui/core 3.108.0 → 3.110.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 +9 -4
- package/components/inputs/docs/input-checkbox.md +43 -9
- package/components/inputs/input-checkbox-group.js +30 -0
- package/components/tabs/README.md +13 -1
- package/components/tabs/demo/tabs.html +30 -0
- package/components/tabs/tab.js +32 -7
- package/custom-elements.json +23 -1
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
<script type="module">
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../input-checkbox.js';
|
|
10
|
+
import '../input-checkbox-group.js';
|
|
10
11
|
</script>
|
|
11
12
|
</head>
|
|
12
13
|
<body unresolved>
|
|
@@ -15,16 +16,20 @@
|
|
|
15
16
|
<h2>Simple checkbox with label</h2>
|
|
16
17
|
<d2l-demo-snippet>
|
|
17
18
|
<template>
|
|
18
|
-
<d2l-input-checkbox
|
|
19
|
-
|
|
19
|
+
<d2l-input-checkbox-group>
|
|
20
|
+
<d2l-input-checkbox label="Checked item" checked></d2l-input-checkbox>
|
|
21
|
+
<d2l-input-checkbox label="Unchecked item"></d2l-input-checkbox>
|
|
22
|
+
</d2l-input-checkbox-group>
|
|
20
23
|
</template>
|
|
21
24
|
</d2l-demo-snippet>
|
|
22
25
|
|
|
23
26
|
<h2>Checkbox with multi-line label</h2>
|
|
24
27
|
<d2l-demo-snippet>
|
|
25
28
|
<template>
|
|
26
|
-
<d2l-input-checkbox
|
|
27
|
-
|
|
29
|
+
<d2l-input-checkbox-group>
|
|
30
|
+
<d2l-input-checkbox style="overflow: hidden; width: 200px;" label="Label for checkbox that wraps nicely onto multiple lines and stays aligned"></d2l-input-checkbox>
|
|
31
|
+
<d2l-input-checkbox style="overflow: hidden; width: 200px;" label="https://en.wikipedia.org/wiki/Dark_matter"></d2l-input-checkbox>
|
|
32
|
+
</d2l-input-checkbox-group>
|
|
28
33
|
</template>
|
|
29
34
|
</d2l-demo-snippet>
|
|
30
35
|
|
|
@@ -36,16 +36,15 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
|
|
|
36
36
|
<script type="module">
|
|
37
37
|
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
38
38
|
|
|
39
|
-
window.addEventListener('load',
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
window.addEventListener('load', () => {
|
|
40
|
+
document.querySelector('d2l-input-checkbox')
|
|
41
|
+
.addEventListener('change', e => {
|
|
42
|
+
console.log('checked value: ', e.target.checked);
|
|
43
|
+
});
|
|
44
44
|
});
|
|
45
45
|
</script>
|
|
46
46
|
<div>
|
|
47
|
-
<d2l-input-checkbox
|
|
48
|
-
<d2l-input-checkbox label="Label for second checkbox"></d2l-input-checkbox>
|
|
47
|
+
<d2l-input-checkbox label="Label for checkbox"></d2l-input-checkbox>
|
|
49
48
|
</div>
|
|
50
49
|
```
|
|
51
50
|
|
|
@@ -69,8 +68,8 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
|
|
|
69
68
|
When the checkbox's state changes, it dispatches the `change` event:
|
|
70
69
|
|
|
71
70
|
```javascript
|
|
72
|
-
checkbox.addEventListener('change',
|
|
73
|
-
console.log(
|
|
71
|
+
checkbox.addEventListener('change', e => {
|
|
72
|
+
console.log(e.target.checked);
|
|
74
73
|
});
|
|
75
74
|
```
|
|
76
75
|
|
|
@@ -80,6 +79,41 @@ checkbox.addEventListener('change', (e) => {
|
|
|
80
79
|
* `supporting`: Supporting information which will appear below and be aligned with the checkbox.
|
|
81
80
|
<!-- docs: end hidden content -->
|
|
82
81
|
|
|
82
|
+
### Groups of Checkboxes
|
|
83
|
+
|
|
84
|
+
If multiple checkboxes are displayed together, wrapping them in a `<d2l-input-checkbox-group>` provides consistent spacing between each checkbox.
|
|
85
|
+
|
|
86
|
+
<!-- docs: demo code -->
|
|
87
|
+
```html
|
|
88
|
+
<script type="module">
|
|
89
|
+
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
90
|
+
import '@brightspace-ui/core/components/inputs/input-checkbox-group.js';
|
|
91
|
+
</script>
|
|
92
|
+
<d2l-input-checkbox-group>
|
|
93
|
+
<d2l-input-checkbox label="Option 1"></d2l-input-checkbox>
|
|
94
|
+
<d2l-input-checkbox label="Option 2"></d2l-input-checkbox>
|
|
95
|
+
<d2l-input-checkbox label="Option 3"></d2l-input-checkbox>
|
|
96
|
+
</d2l-input-checkbox-group>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Often, the checkboxes in the group are related to each other and may have a label for the whole group. In this case, a `<d2l-input-fieldset>` should be used.
|
|
100
|
+
|
|
101
|
+
<!-- docs: demo code -->
|
|
102
|
+
```html
|
|
103
|
+
<script type="module">
|
|
104
|
+
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
105
|
+
import '@brightspace-ui/core/components/inputs/input-checkbox-group.js';
|
|
106
|
+
import '@brightspace-ui/core/components/inputs/input-fieldset.js';
|
|
107
|
+
</script>
|
|
108
|
+
<d2l-input-fieldset label="Toppings">
|
|
109
|
+
<d2l-input-checkbox-group>
|
|
110
|
+
<d2l-input-checkbox label="Ketchup"></d2l-input-checkbox>
|
|
111
|
+
<d2l-input-checkbox label="Mustard"></d2l-input-checkbox>
|
|
112
|
+
<d2l-input-checkbox label="Relish"></d2l-input-checkbox>
|
|
113
|
+
</d2l-input-checkbox-group>
|
|
114
|
+
</d2l-input-fieldset>
|
|
115
|
+
```
|
|
116
|
+
|
|
83
117
|
## Applying styles to native checkboxes
|
|
84
118
|
|
|
85
119
|
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:
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { css, html, LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* A wrapper for <d2l-input-checkbox> components which provides spacing between the items.
|
|
5
|
+
* @slot - Checkbox components
|
|
6
|
+
*/
|
|
7
|
+
class InputCheckboxGroup extends LitElement {
|
|
8
|
+
|
|
9
|
+
static get styles() {
|
|
10
|
+
return css`
|
|
11
|
+
:host {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
gap: 0.6rem;
|
|
15
|
+
}
|
|
16
|
+
:host([hidden]) {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
::slotted(d2l-input-checkbox) {
|
|
20
|
+
margin-bottom: 0;
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
render() {
|
|
26
|
+
return html`<slot></slot>`;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
}
|
|
30
|
+
customElements.define('d2l-input-checkbox-group', InputCheckboxGroup);
|
|
@@ -91,6 +91,7 @@ An element that displays the corresponding tab panel when selected.
|
|
|
91
91
|
<!-- docs: demo code properties name:d2l-tab sandboxTitle:'Tab' display:block -->
|
|
92
92
|
```html
|
|
93
93
|
<script type="module">
|
|
94
|
+
import '@brightspace-ui/core/components/count-badge/count-badge.js';
|
|
94
95
|
import '@brightspace-ui/core/components/tabs/tab.js';
|
|
95
96
|
import '@brightspace-ui/core/components/tabs/tabs.js';
|
|
96
97
|
import '@brightspace-ui/core/components/tabs/tab-panel.js';
|
|
@@ -99,7 +100,9 @@ An element that displays the corresponding tab panel when selected.
|
|
|
99
100
|
<d2l-tabs text="Courses">
|
|
100
101
|
<d2l-tab id="all" text="All" slot="tabs" selected></d2l-tab>
|
|
101
102
|
<d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
|
|
102
|
-
<d2l-tab id="biology" text="Biology" slot="tabs"
|
|
103
|
+
<d2l-tab id="biology" text="Biology" slot="tabs">
|
|
104
|
+
<d2l-count-badge number="100" size="small" text="100 new notifications" type="notification" slot="after"></d2l-count-badge>
|
|
105
|
+
</d2l-tab>
|
|
103
106
|
<d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
|
|
104
107
|
<d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
|
|
105
108
|
<d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
|
|
@@ -122,6 +125,13 @@ An element that displays the corresponding tab panel when selected.
|
|
|
122
125
|
| `text` | String, required | The text used for the tab and for labelling the corresponding panel |
|
|
123
126
|
| `selected` | Boolean | Use to select the tab |
|
|
124
127
|
|
|
128
|
+
### Slots
|
|
129
|
+
|
|
130
|
+
| Slot | Description |
|
|
131
|
+
|--|--|
|
|
132
|
+
| `before` | Slot for content to be displayed before the tab text |
|
|
133
|
+
| `after` | Slot for content to be displayed after the tab text |
|
|
134
|
+
|
|
125
135
|
### Events
|
|
126
136
|
- `d2l-tab-content-change`: Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent `d2l-tabs`.
|
|
127
137
|
- `d2l-tab-selected`: Dispatched when a tab is selected
|
|
@@ -145,6 +155,8 @@ Promise.resolve(tabs.hideTab((tab))).then(() => {
|
|
|
145
155
|
|
|
146
156
|
The `TabMixin` can be used to create custom tabs. It is IMPORTANT to call the `dispatchContentChangeEvent` function in `TabMixin` when content changes in the consumer in order to properly trigger calculations. Ensure that there is only one element in any custom tab to focus on, else the focus and keyboard navigation behaviors become confusing for users. Note that the parent `d2l-tabs` element handles `tabindex` focus management, and so consumers should not be rendering focusable elements within custom tabs.
|
|
147
157
|
|
|
158
|
+
Before creating a custom tab, ensure that the case is not covered by using a standard `d2l-tab` with content in the `before` and/or `after` slot(s).
|
|
159
|
+
|
|
148
160
|
<!-- docs: demo code sandboxTitle:'TabMixin' display:block-->
|
|
149
161
|
```html
|
|
150
162
|
<script type="module">
|
|
@@ -55,6 +55,36 @@
|
|
|
55
55
|
</template>
|
|
56
56
|
</d2l-demo-snippet>
|
|
57
57
|
|
|
58
|
+
<h2>Tabs (with before and after slot content)</h2>
|
|
59
|
+
|
|
60
|
+
<d2l-demo-snippet>
|
|
61
|
+
<template>
|
|
62
|
+
<d2l-tabs text="Courses">
|
|
63
|
+
<d2l-tab id="beforelong" text="Long Panel Text That Will Also Have Slot Content" slot="tabs">
|
|
64
|
+
<d2l-icon icon="tier1:gear" slot="before"></d2l-icon>
|
|
65
|
+
</d2l-tab>
|
|
66
|
+
<d2l-tab id="afterlong" text="Long Panel Text That Will Also Have Slot Content" slot="tabs">
|
|
67
|
+
<d2l-count-badge number="100" size="small" text="100 new notifications" type="notification" slot="after"></d2l-count-badge>
|
|
68
|
+
</d2l-tab>
|
|
69
|
+
<d2l-tab id="beforeshort" text="Biology" slot="tabs">
|
|
70
|
+
<d2l-count-badge number="100" size="small" text="100 new notifications" type="notification" slot="before"></d2l-count-badge>
|
|
71
|
+
</d2l-tab>
|
|
72
|
+
<d2l-tab id="aftershort" text="Biology" slot="tabs">
|
|
73
|
+
<d2l-count-badge number="100" size="small" text="100 new notifications" type="notification" slot="after"></d2l-count-badge>
|
|
74
|
+
</d2l-tab>
|
|
75
|
+
<d2l-tab id="beforeafter" text="Biology" slot="tabs">
|
|
76
|
+
<d2l-count-badge number="5" size="small" text="100 new notifications" type="notification" slot="before"></d2l-count-badge>
|
|
77
|
+
<d2l-count-badge number="10" size="small" text="100 new notifications" type="notification" slot="after"></d2l-count-badge>
|
|
78
|
+
</d2l-tab>
|
|
79
|
+
<d2l-tab-panel labelled-by="beforelong" slot="panels">Tab content for All</d2l-tab-panel>
|
|
80
|
+
<d2l-tab-panel labelled-by="afterlong" slot="panels">Tab content for Biology</d2l-tab-panel>
|
|
81
|
+
<d2l-tab-panel labelled-by="beforeshort" slot="panels">Tab content for Chemistry</d2l-tab-panel>
|
|
82
|
+
<d2l-tab-panel labelled-by="aftershort" slot="panels">Tab content for Physics</d2l-tab-panel>
|
|
83
|
+
<d2l-tab-panel labelled-by="beforeafter" slot="panels">Tab content for Trig</d2l-tab-panel>
|
|
84
|
+
</d2l-tabs>
|
|
85
|
+
</template>
|
|
86
|
+
</d2l-demo-snippet>
|
|
87
|
+
|
|
58
88
|
<h2>Tabs (with custom tab)</h2>
|
|
59
89
|
|
|
60
90
|
<d2l-demo-snippet>
|
package/components/tabs/tab.js
CHANGED
|
@@ -4,8 +4,10 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
|
4
4
|
import { TabMixin } from './tab-mixin.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* @attr id - REQUIRED: Unique identifier for the tab
|
|
7
|
+
* @attr {string} id - REQUIRED: Unique identifier for the tab
|
|
8
8
|
* @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
|
|
9
|
+
* @slot before - Slot for content to be displayed before the tab text
|
|
10
|
+
* @slot after - Slot for content to be displayed after the tab text
|
|
9
11
|
*/
|
|
10
12
|
class Tab extends TabMixin(LitElement) {
|
|
11
13
|
|
|
@@ -21,17 +23,36 @@ class Tab extends TabMixin(LitElement) {
|
|
|
21
23
|
|
|
22
24
|
static get styles() {
|
|
23
25
|
const styles = [ css`
|
|
24
|
-
.d2l-tab-text {
|
|
25
|
-
|
|
26
|
+
.d2l-tab-text-inner-content {
|
|
27
|
+
display: flex;
|
|
26
28
|
padding: 0.1rem;
|
|
27
|
-
text-overflow: ellipsis;
|
|
28
|
-
white-space: nowrap;
|
|
29
29
|
}
|
|
30
|
-
:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text {
|
|
30
|
+
:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text-inner-content {
|
|
31
31
|
border-radius: 0.3rem;
|
|
32
32
|
color: var(--d2l-color-celestine);
|
|
33
33
|
outline: 2px solid var(--d2l-color-celestine);
|
|
34
34
|
}
|
|
35
|
+
:host(:${unsafeCSS(getFocusPseudoClass())}) ::slotted(d2l-icon) {
|
|
36
|
+
color: var(--d2l-color-celestine);
|
|
37
|
+
}
|
|
38
|
+
slot {
|
|
39
|
+
align-items: center;
|
|
40
|
+
display: flex;
|
|
41
|
+
}
|
|
42
|
+
::slotted([slot="before"]) {
|
|
43
|
+
padding-inline-end: 0.3rem;
|
|
44
|
+
}
|
|
45
|
+
::slotted([slot="after"]) {
|
|
46
|
+
padding-inline-start: 0.3rem;
|
|
47
|
+
}
|
|
48
|
+
:host(:not([selected]):hover) ::slotted(d2l-icon) {
|
|
49
|
+
color: var(--d2l-color-celestine);
|
|
50
|
+
}
|
|
51
|
+
span {
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
text-overflow: ellipsis;
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
}
|
|
35
56
|
.d2l-tab-text-skeletize-override {
|
|
36
57
|
min-width: 50px;
|
|
37
58
|
}
|
|
@@ -60,7 +81,11 @@ class Tab extends TabMixin(LitElement) {
|
|
|
60
81
|
};
|
|
61
82
|
|
|
62
83
|
return html`
|
|
63
|
-
<div class="
|
|
84
|
+
<div class="d2l-tab-text-inner-content">
|
|
85
|
+
<slot name="before"></slot>
|
|
86
|
+
<span class="${classMap(contentClasses)}">${overrideSkeletonText ? html` ` : this.text}</span>
|
|
87
|
+
<slot name="after"></slot>
|
|
88
|
+
</div>
|
|
64
89
|
`;
|
|
65
90
|
}
|
|
66
91
|
}
|
package/custom-elements.json
CHANGED
|
@@ -5113,6 +5113,17 @@
|
|
|
5113
5113
|
}
|
|
5114
5114
|
]
|
|
5115
5115
|
},
|
|
5116
|
+
{
|
|
5117
|
+
"name": "d2l-input-checkbox-group",
|
|
5118
|
+
"path": "./components/inputs/input-checkbox-group.js",
|
|
5119
|
+
"description": "A wrapper for <d2l-input-checkbox> components which provides spacing between the items.",
|
|
5120
|
+
"slots": [
|
|
5121
|
+
{
|
|
5122
|
+
"name": "",
|
|
5123
|
+
"description": "Checkbox components"
|
|
5124
|
+
}
|
|
5125
|
+
]
|
|
5126
|
+
},
|
|
5116
5127
|
{
|
|
5117
5128
|
"name": "d2l-input-checkbox",
|
|
5118
5129
|
"path": "./components/inputs/input-checkbox.js",
|
|
@@ -13147,7 +13158,8 @@
|
|
|
13147
13158
|
},
|
|
13148
13159
|
{
|
|
13149
13160
|
"name": "id",
|
|
13150
|
-
"description": "REQUIRED: Unique identifier for the tab"
|
|
13161
|
+
"description": "REQUIRED: Unique identifier for the tab",
|
|
13162
|
+
"type": "string"
|
|
13151
13163
|
}
|
|
13152
13164
|
],
|
|
13153
13165
|
"properties": [
|
|
@@ -13190,6 +13202,16 @@
|
|
|
13190
13202
|
"name": "d2l-tab-selected",
|
|
13191
13203
|
"description": "Dispatched when a tab is selected"
|
|
13192
13204
|
}
|
|
13205
|
+
],
|
|
13206
|
+
"slots": [
|
|
13207
|
+
{
|
|
13208
|
+
"name": "before",
|
|
13209
|
+
"description": "Slot for content to be displayed before the tab text"
|
|
13210
|
+
},
|
|
13211
|
+
{
|
|
13212
|
+
"name": "after",
|
|
13213
|
+
"description": "Slot for content to be displayed after the tab text"
|
|
13214
|
+
}
|
|
13193
13215
|
]
|
|
13194
13216
|
},
|
|
13195
13217
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.110.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",
|