@brightspace-ui/core 3.108.0 → 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/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 -1
- package/package.json +1 -1
|
@@ -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
|
@@ -13147,7 +13147,8 @@
|
|
|
13147
13147
|
},
|
|
13148
13148
|
{
|
|
13149
13149
|
"name": "id",
|
|
13150
|
-
"description": "REQUIRED: Unique identifier for the tab"
|
|
13150
|
+
"description": "REQUIRED: Unique identifier for the tab",
|
|
13151
|
+
"type": "string"
|
|
13151
13152
|
}
|
|
13152
13153
|
],
|
|
13153
13154
|
"properties": [
|
|
@@ -13190,6 +13191,16 @@
|
|
|
13190
13191
|
"name": "d2l-tab-selected",
|
|
13191
13192
|
"description": "Dispatched when a tab is selected"
|
|
13192
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
|
+
}
|
|
13193
13204
|
]
|
|
13194
13205
|
},
|
|
13195
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",
|