@brightspace-ui/core 3.107.1 → 3.109.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/tabs/README.md +13 -1
- package/components/tabs/demo/tabs.html +30 -0
- package/components/tabs/tab.js +32 -7
- package/custom-elements.json +12 -12
- 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:
|
|
@@ -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,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",
|
|
@@ -13158,7 +13147,8 @@
|
|
|
13158
13147
|
},
|
|
13159
13148
|
{
|
|
13160
13149
|
"name": "id",
|
|
13161
|
-
"description": "REQUIRED: Unique identifier for the tab"
|
|
13150
|
+
"description": "REQUIRED: Unique identifier for the tab",
|
|
13151
|
+
"type": "string"
|
|
13162
13152
|
}
|
|
13163
13153
|
],
|
|
13164
13154
|
"properties": [
|
|
@@ -13201,6 +13191,16 @@
|
|
|
13201
13191
|
"name": "d2l-tab-selected",
|
|
13202
13192
|
"description": "Dispatched when a tab is selected"
|
|
13203
13193
|
}
|
|
13194
|
+
],
|
|
13195
|
+
"slots": [
|
|
13196
|
+
{
|
|
13197
|
+
"name": "before",
|
|
13198
|
+
"description": "Slot for content to be displayed before the tab text"
|
|
13199
|
+
},
|
|
13200
|
+
{
|
|
13201
|
+
"name": "after",
|
|
13202
|
+
"description": "Slot for content to be displayed after the tab text"
|
|
13203
|
+
}
|
|
13204
13204
|
]
|
|
13205
13205
|
},
|
|
13206
13206
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.109.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);
|