@brightspace-ui/core 3.102.2 → 3.102.4
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.
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
2
|
+
import { getFocusPseudoClass } from '../../../helpers/focus.js';
|
|
3
|
+
import { TabMixin } from '../tab-mixin.js';
|
|
4
|
+
|
|
5
|
+
class TabCustom extends TabMixin(LitElement) {
|
|
6
|
+
|
|
7
|
+
static get styles() {
|
|
8
|
+
const styles = [ css`
|
|
9
|
+
.d2l-tab-custom-content {
|
|
10
|
+
margin: 0.5rem;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
padding: 0.1rem;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
}
|
|
15
|
+
:host(:first-child) .d2l-tab-custom-content {
|
|
16
|
+
margin-inline-start: 0;
|
|
17
|
+
}
|
|
18
|
+
:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-custom-content {
|
|
19
|
+
border-radius: 0.3rem;
|
|
20
|
+
color: var(--d2l-color-celestine);
|
|
21
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
22
|
+
}
|
|
23
|
+
`];
|
|
24
|
+
|
|
25
|
+
super.styles && styles.unshift(super.styles);
|
|
26
|
+
return styles;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
renderContent() {
|
|
30
|
+
return html`
|
|
31
|
+
<div class="d2l-tab-custom-content">
|
|
32
|
+
<slot></slot>
|
|
33
|
+
</div>
|
|
34
|
+
`;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
customElements.define('d2l-tab-custom', TabCustom);
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
<script type="module">
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../../button/button-subtle.js';
|
|
10
|
+
import '../../count-badge/count-badge.js';
|
|
10
11
|
import '../../dropdown/dropdown-button-subtle.js';
|
|
11
12
|
import '../../dropdown/dropdown-menu.js';
|
|
12
13
|
import '../../menu/menu.js';
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
import '../tab.js';
|
|
15
16
|
import '../tabs.js';
|
|
16
17
|
import '../tab-panel.js';
|
|
18
|
+
import './tab-custom.js';
|
|
17
19
|
</script>
|
|
18
20
|
</head>
|
|
19
21
|
<body unresolved>
|
|
@@ -22,22 +24,6 @@
|
|
|
22
24
|
|
|
23
25
|
<h2>Tabs</h2>
|
|
24
26
|
|
|
25
|
-
<d2l-demo-snippet>
|
|
26
|
-
<template>
|
|
27
|
-
<d2l-tabs>
|
|
28
|
-
<d2l-tab-panel text="All">Tab content for All</d2l-tab-panel>
|
|
29
|
-
<d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
|
|
30
|
-
<d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
|
|
31
|
-
<d2l-tab-panel text="Earth & Planetary Sciences">Tab content for Earth & Planetary Sciences</d2l-tab-panel>
|
|
32
|
-
<d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
|
|
33
|
-
<d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
|
|
34
|
-
</d2l-tabs>
|
|
35
|
-
</template>
|
|
36
|
-
</d2l-demo-snippet>
|
|
37
|
-
|
|
38
|
-
<h2>Tabs (new structure)</h2>
|
|
39
|
-
<div>This format is still a WIP. Please do not use yet.</div>
|
|
40
|
-
|
|
41
27
|
<d2l-demo-snippet>
|
|
42
28
|
<template>
|
|
43
29
|
<d2l-tabs text="Courses">
|
|
@@ -69,56 +55,19 @@
|
|
|
69
55
|
</template>
|
|
70
56
|
</d2l-demo-snippet>
|
|
71
57
|
|
|
72
|
-
<
|
|
58
|
+
<h2>Tabs (with custom tab)</h2>
|
|
73
59
|
|
|
74
|
-
<
|
|
75
|
-
<d2l-button-subtle id="add-old" text="Add"></d2l-button-subtle>
|
|
76
|
-
<d2l-button-subtle id="add-selected-old" text="Add Selected"></d2l-button-subtle>
|
|
77
|
-
<d2l-button-subtle id="remove-old" text="Remove"></d2l-button-subtle>
|
|
78
|
-
<d2l-button-subtle id="remove-multiple-old" text="Remove Multiple"></d2l-button-subtle>
|
|
79
|
-
</div>
|
|
80
|
-
<script>
|
|
81
|
-
let newPanelIdOld = 0;
|
|
82
|
-
const addPanelOld = (selected, tabs) => {
|
|
83
|
-
newPanelIdOld += 1;
|
|
84
|
-
const panel = document.createElement('d2l-tab-panel');
|
|
85
|
-
panel.selected = selected;
|
|
86
|
-
panel.text = `New Panel ${newPanelIdOld}`;
|
|
87
|
-
panel.textContent = `Content for new panel ${newPanelIdOld}`;
|
|
88
|
-
const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
|
|
89
|
-
if (panels.length < 2) tabs.appendChild(panel);
|
|
90
|
-
else tabs.insertBefore(panel, panels[1]);
|
|
91
|
-
};
|
|
92
|
-
const removePanelOld = (tabs) => {
|
|
93
|
-
const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
|
|
94
|
-
if (panels.length === 0) return;
|
|
95
|
-
if (panels.length === 1) tabs.removeChild(panels[0]);
|
|
96
|
-
else tabs.removeChild(panels[1]);
|
|
97
|
-
};
|
|
98
|
-
const removePanelsOld = (tabs) => {
|
|
99
|
-
const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
|
|
100
|
-
if (panels.length === 0) return;
|
|
101
|
-
if (panels.length === 1) tabs.removeChild(panels[0]);
|
|
102
|
-
else {
|
|
103
|
-
tabs.removeChild(panels[1]);
|
|
104
|
-
tabs.removeChild(panels[0]);
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
document.querySelector('#add-old').addEventListener('click', () => addPanelOld(false, document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
|
|
109
|
-
document.querySelector('#add-selected-old').addEventListener('click', () => addPanelOld(true, document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
|
|
110
|
-
document.querySelector('#remove-old').addEventListener('click', () => removePanelOld(document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
|
|
111
|
-
document.querySelector('#remove-multiple-old').addEventListener('click', () => removePanelsOld(document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
|
|
112
|
-
</script>
|
|
113
|
-
|
|
114
|
-
<d2l-demo-snippet id="withSlotOld">
|
|
60
|
+
<d2l-demo-snippet>
|
|
115
61
|
<template>
|
|
116
|
-
<d2l-tabs>
|
|
117
|
-
<d2l-tab-
|
|
118
|
-
<d2l-tab-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
<d2l-tab-
|
|
62
|
+
<d2l-tabs text="Courses">
|
|
63
|
+
<d2l-tab-custom id="all" slot="tabs"><div style="color: purple;">All</div></d2l-tab-custom>
|
|
64
|
+
<d2l-tab-custom id="biology" slot="tabs" selected>
|
|
65
|
+
Biology <d2l-count-badge number="100" size="small" text="100 new notifications" type="notification"></d2l-count-badge>
|
|
66
|
+
</d2l-tab-custom>
|
|
67
|
+
<d2l-tab-custom id="chemistry" slot="tabs">Chemistry</d2l-tab-custom>
|
|
68
|
+
<d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
|
|
69
|
+
<d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
|
|
70
|
+
<d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
|
|
122
71
|
<d2l-dropdown-button-subtle slot="ext" text="Explore Topics">
|
|
123
72
|
<d2l-dropdown-menu>
|
|
124
73
|
<d2l-menu label="Astronomy">
|
|
@@ -135,7 +84,7 @@
|
|
|
135
84
|
</template>
|
|
136
85
|
</d2l-demo-snippet>
|
|
137
86
|
|
|
138
|
-
<h3>Tabs (with slot
|
|
87
|
+
<h3>Tabs (with slot)</h3>
|
|
139
88
|
|
|
140
89
|
<div style="margin-bottom: 30px;">
|
|
141
90
|
<d2l-button-subtle id="add" text="Add"></d2l-button-subtle>
|
|
@@ -238,6 +187,165 @@
|
|
|
238
187
|
|
|
239
188
|
<h3>Tabs (responsive)</h3>
|
|
240
189
|
|
|
190
|
+
<d2l-demo-snippet>
|
|
191
|
+
<template>
|
|
192
|
+
<div style="max-width: 500px;">
|
|
193
|
+
<d2l-tabs text="Many Miscellaneous Tabs">
|
|
194
|
+
<d2l-tab id="s18" text="S18" slot="tabs"></d2l-tab>
|
|
195
|
+
<d2l-tab-panel labelled-by="s18" slot="panels">Tab content for S18</d2l-tab-panel>
|
|
196
|
+
<d2l-tab id="w18" text="W18" slot="tabs"></d2l-tab>
|
|
197
|
+
<d2l-tab-panel labelled-by="w18" slot="panels">Tab content for W18</d2l-tab-panel>
|
|
198
|
+
<d2l-tab id="f17" text="F17" slot="tabs"></d2l-tab>
|
|
199
|
+
<d2l-tab-panel labelled-by="f17" slot="panels">Tab content for F17</d2l-tab-panel>
|
|
200
|
+
<d2l-tab id="s17" text="S17" slot="tabs"></d2l-tab>
|
|
201
|
+
<d2l-tab-panel labelled-by="s17" slot="panels">Tab content for S17</d2l-tab-panel>
|
|
202
|
+
<d2l-tab id="w17" text="W17" slot="tabs"></d2l-tab>
|
|
203
|
+
<d2l-tab-panel labelled-by="w17" slot="panels">Tab content for W17</d2l-tab-panel>
|
|
204
|
+
<d2l-tab id="f16" text="F16" slot="tabs"></d2l-tab>
|
|
205
|
+
<d2l-tab-panel labelled-by="f16" slot="panels">Tab content for F16</d2l-tab-panel>
|
|
206
|
+
<d2l-tab id="s16" text="S16" slot="tabs"></d2l-tab>
|
|
207
|
+
<d2l-tab-panel labelled-by="s16" slot="panels">Tab content for S16</d2l-tab-panel>
|
|
208
|
+
<d2l-tab id="w16" text="W16" slot="tabs"></d2l-tab>
|
|
209
|
+
<d2l-tab-panel labelled-by="w16" slot="panels">Tab content for W16</d2l-tab-panel>
|
|
210
|
+
<d2l-tab id="f15" text="F15" slot="tabs"></d2l-tab>
|
|
211
|
+
<d2l-tab-panel labelled-by="f15" slot="panels">Tab content for F15</d2l-tab-panel>
|
|
212
|
+
<d2l-tab id="s15" text="S15" slot="tabs"></d2l-tab>
|
|
213
|
+
<d2l-tab-panel labelled-by="s15" slot="panels">Tab content for S15</d2l-tab-panel>
|
|
214
|
+
<d2l-tab id="w15" text="W15" slot="tabs"></d2l-tab>
|
|
215
|
+
<d2l-tab-panel labelled-by="w15" slot="panels">Tab content for W15</d2l-tab-panel>
|
|
216
|
+
<d2l-tab id="f14" text="F14" slot="tabs"></d2l-tab>
|
|
217
|
+
<d2l-tab-panel labelled-by="f14" slot="panels">Tab content for F14</d2l-tab-panel>
|
|
218
|
+
<d2l-tab id="s14" text="S14" slot="tabs"></d2l-tab>
|
|
219
|
+
<d2l-tab-panel labelled-by="s14" slot="panels">Tab content for S14</d2l-tab-panel>
|
|
220
|
+
<d2l-tab id="w14" text="W14" slot="tabs"></d2l-tab>
|
|
221
|
+
<d2l-tab-panel labelled-by="w14" slot="panels">Tab content for W14</d2l-tab-panel>
|
|
222
|
+
<d2l-tab id="f13" text="F13" slot="tabs"></d2l-tab>
|
|
223
|
+
<d2l-tab-panel labelled-by="f13" slot="panels">Tab content for F13</d2l-tab-panel>
|
|
224
|
+
<d2l-tab id="s13" text="S13" slot="tabs"></d2l-tab>
|
|
225
|
+
<d2l-tab-panel labelled-by="s13" slot="panels">Tab content for S13</d2l-tab-panel>
|
|
226
|
+
<d2l-tab id="w13" text="W13" slot="tabs"></d2l-tab>
|
|
227
|
+
<d2l-tab-panel labelled-by="w13" slot="panels">Tab content for W13</d2l-tab-panel>
|
|
228
|
+
<d2l-tab id="f12" text="F12" slot="tabs"></d2l-tab>
|
|
229
|
+
<d2l-tab-panel labelled-by="f12" slot="panels">Tab content for F12</d2l-tab-panel>
|
|
230
|
+
<d2l-tab id="s12" text="S12" slot="tabs"></d2l-tab>
|
|
231
|
+
<d2l-tab-panel labelled-by="s12" slot="panels">Tab content for S12</d2l-tab-panel>
|
|
232
|
+
<d2l-tab id="w12" text="W12" slot="tabs"></d2l-tab>
|
|
233
|
+
<d2l-tab-panel labelled-by="w12" slot="panels">Tab content for W12</d2l-tab-panel>
|
|
234
|
+
<d2l-tab id="f11" text="F11" slot="tabs"></d2l-tab>
|
|
235
|
+
<d2l-tab-panel labelled-by="f11" slot="panels">Tab content for F11</d2l-tab-panel>
|
|
236
|
+
<d2l-tab id="s11" text="S11" slot="tabs"></d2l-tab>
|
|
237
|
+
<d2l-tab-panel labelled-by="s11" slot="panels">Tab content for S11</d2l-tab-panel>
|
|
238
|
+
</d2l-tabs>
|
|
239
|
+
</div>
|
|
240
|
+
</template>
|
|
241
|
+
</d2l-demo-snippet>
|
|
242
|
+
|
|
243
|
+
<h3>Tabs (max-to-show)</h3>
|
|
244
|
+
|
|
245
|
+
<d2l-demo-snippet>
|
|
246
|
+
<template>
|
|
247
|
+
<d2l-tabs max-to-show="3" text="Courses">
|
|
248
|
+
<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
|
|
249
|
+
<d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
|
|
250
|
+
<d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
|
|
251
|
+
<d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
|
|
252
|
+
<d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
|
|
253
|
+
<d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
|
|
254
|
+
<d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs"></d2l-tab>
|
|
255
|
+
<d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
|
|
256
|
+
<d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
|
|
257
|
+
<d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
|
|
258
|
+
<d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
|
|
259
|
+
<d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
|
|
260
|
+
<d2l-tab id="community" text="Community" slot="tabs"></d2l-tab>
|
|
261
|
+
<d2l-tab-panel labelled-by="community" slot="panels">Tab content for Community</d2l-tab-panel>
|
|
262
|
+
</d2l-tabs>
|
|
263
|
+
</template>
|
|
264
|
+
</d2l-demo-snippet>
|
|
265
|
+
|
|
266
|
+
<h2>Tabs (deprecated structure)</h2>
|
|
267
|
+
|
|
268
|
+
<d2l-demo-snippet>
|
|
269
|
+
<template>
|
|
270
|
+
<d2l-tabs>
|
|
271
|
+
<d2l-tab-panel text="All">Tab content for All</d2l-tab-panel>
|
|
272
|
+
<d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
|
|
273
|
+
<d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
|
|
274
|
+
<d2l-tab-panel text="Earth & Planetary Sciences">Tab content for Earth & Planetary Sciences</d2l-tab-panel>
|
|
275
|
+
<d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
|
|
276
|
+
<d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
|
|
277
|
+
</d2l-tabs>
|
|
278
|
+
</template>
|
|
279
|
+
</d2l-demo-snippet>
|
|
280
|
+
|
|
281
|
+
<h3>Tabs (deprecated; with slot)</h3>
|
|
282
|
+
|
|
283
|
+
<div style="margin-bottom: 30px;">
|
|
284
|
+
<d2l-button-subtle id="add-deprecated" text="Add"></d2l-button-subtle>
|
|
285
|
+
<d2l-button-subtle id="add-selected-deprecated" text="Add Selected"></d2l-button-subtle>
|
|
286
|
+
<d2l-button-subtle id="remove-deprecated" text="Remove"></d2l-button-subtle>
|
|
287
|
+
<d2l-button-subtle id="remove-multiple-deprecated" text="Remove Multiple"></d2l-button-subtle>
|
|
288
|
+
</div>
|
|
289
|
+
<script>
|
|
290
|
+
let newPanelIdDeprecated = 0;
|
|
291
|
+
const addPanelDeprecated = (selected, tabs) => {
|
|
292
|
+
newPanelIdDeprecated += 1;
|
|
293
|
+
const panel = document.createElement('d2l-tab-panel');
|
|
294
|
+
panel.selected = selected;
|
|
295
|
+
panel.text = `New Panel ${newPanelIdDeprecated}`;
|
|
296
|
+
panel.textContent = `Content for new panel ${newPanelIdDeprecated}`;
|
|
297
|
+
const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
|
|
298
|
+
if (panels.length < 2) tabs.appendChild(panel);
|
|
299
|
+
else tabs.insertBefore(panel, panels[1]);
|
|
300
|
+
};
|
|
301
|
+
const removePanelDeprecated = (tabs) => {
|
|
302
|
+
const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
|
|
303
|
+
if (panels.length === 0) return;
|
|
304
|
+
if (panels.length === 1) tabs.removeChild(panels[0]);
|
|
305
|
+
else tabs.removeChild(panels[1]);
|
|
306
|
+
};
|
|
307
|
+
const removePanelsDeprecated = (tabs) => {
|
|
308
|
+
const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
|
|
309
|
+
if (panels.length === 0) return;
|
|
310
|
+
if (panels.length === 1) tabs.removeChild(panels[0]);
|
|
311
|
+
else {
|
|
312
|
+
tabs.removeChild(panels[1]);
|
|
313
|
+
tabs.removeChild(panels[0]);
|
|
314
|
+
}
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
document.querySelector('#add-deprecated').addEventListener('click', () => addPanelDeprecated(false, document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
|
|
318
|
+
document.querySelector('#add-selected-deprecated').addEventListener('click', () => addPanelDeprecated(true, document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
|
|
319
|
+
document.querySelector('#remove-deprecated').addEventListener('click', () => removePanelDeprecated(document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
|
|
320
|
+
document.querySelector('#remove-multiple-deprecated').addEventListener('click', () => removePanelsDeprecated(document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
|
|
321
|
+
</script>
|
|
322
|
+
|
|
323
|
+
<d2l-demo-snippet id="withSlotDeprecated">
|
|
324
|
+
<template>
|
|
325
|
+
<d2l-tabs>
|
|
326
|
+
<d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
|
|
327
|
+
<d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
|
|
328
|
+
<d2l-tab-panel text="Earth Sciences">Tab content for Earth Sciences</d2l-tab-panel>
|
|
329
|
+
<d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
|
|
330
|
+
<d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
|
|
331
|
+
<d2l-dropdown-button-subtle slot="ext" text="Explore Topics">
|
|
332
|
+
<d2l-dropdown-menu>
|
|
333
|
+
<d2l-menu label="Astronomy">
|
|
334
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
335
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
336
|
+
<d2l-menu-item text="The Solar System"></d2l-menu-item>
|
|
337
|
+
<d2l-menu-item text="Stars & Galaxies"></d2l-menu-item>
|
|
338
|
+
<d2l-menu-item text="The Night Sky"></d2l-menu-item>
|
|
339
|
+
<d2l-menu-item text="The Universe"></d2l-menu-item>
|
|
340
|
+
</d2l-menu>
|
|
341
|
+
</d2l-dropdown-menu>
|
|
342
|
+
</d2l-dropdown-button-subtle>
|
|
343
|
+
</d2l-tabs>
|
|
344
|
+
</template>
|
|
345
|
+
</d2l-demo-snippet>
|
|
346
|
+
|
|
347
|
+
<h3>Tabs (deprecated; responsive)</h3>
|
|
348
|
+
|
|
241
349
|
<d2l-demo-snippet>
|
|
242
350
|
<template>
|
|
243
351
|
<div style="max-width: 500px;">
|
|
@@ -269,7 +377,7 @@
|
|
|
269
377
|
</template>
|
|
270
378
|
</d2l-demo-snippet>
|
|
271
379
|
|
|
272
|
-
<h3>Tabs (max-to-show)</h3>
|
|
380
|
+
<h3>Tabs (deprecated; max-to-show)</h3>
|
|
273
381
|
|
|
274
382
|
<d2l-demo-snippet>
|
|
275
383
|
<template>
|
package/components/tabs/tab.js
CHANGED
|
@@ -28,8 +28,8 @@ class Tab extends TabMixin(LitElement) {
|
|
|
28
28
|
}
|
|
29
29
|
:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text {
|
|
30
30
|
border-radius: 0.3rem;
|
|
31
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
|
32
31
|
color: var(--d2l-color-celestine);
|
|
32
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
33
33
|
}
|
|
34
34
|
.d2l-tab-text-skeletize-override {
|
|
35
35
|
min-width: 50px;
|
package/components/tabs/tabs.js
CHANGED
|
@@ -1212,8 +1212,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
1212
1212
|
}
|
|
1213
1213
|
|
|
1214
1214
|
async #updateSelectedTab(selectedTab) {
|
|
1215
|
-
selectedTab.tabIndex = 0;
|
|
1216
|
-
|
|
1217
1215
|
await this.updateComplete;
|
|
1218
1216
|
|
|
1219
1217
|
selectedTab.selected = true;
|
|
@@ -10,7 +10,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
|
10
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
11
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
12
12
|
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
|
13
|
-
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
14
13
|
|
|
15
14
|
const keyCodes = {
|
|
16
15
|
BACKSPACE: 8,
|
|
@@ -38,7 +37,7 @@ export function resetHasDisplayedKeyboardTooltip() {
|
|
|
38
37
|
hasDisplayedKeyboardTooltip = false;
|
|
39
38
|
}
|
|
40
39
|
|
|
41
|
-
export const TagListItemMixin = superclass => class extends LocalizeCoreElement(PropertyRequiredMixin(
|
|
40
|
+
export const TagListItemMixin = superclass => class extends LocalizeCoreElement(PropertyRequiredMixin(superclass)) {
|
|
42
41
|
|
|
43
42
|
static get properties() {
|
|
44
43
|
return {
|
|
@@ -95,11 +94,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
95
94
|
white-space: nowrap;
|
|
96
95
|
}
|
|
97
96
|
.tag-list-item-container.tag-list-item-container-clearable {
|
|
98
|
-
padding-
|
|
99
|
-
}
|
|
100
|
-
:host([dir="rtl"]) .tag-list-item-container.tag-list-item-container-clearable {
|
|
101
|
-
padding-left: 0.2rem;
|
|
102
|
-
padding-right: 0;
|
|
97
|
+
padding-inline-end: 0.2rem;
|
|
103
98
|
}
|
|
104
99
|
.tag-list-item-content {
|
|
105
100
|
outline: none;
|
|
@@ -135,11 +130,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
|
|
|
135
130
|
}
|
|
136
131
|
}
|
|
137
132
|
.d2l-tag-list-item-clear-button {
|
|
138
|
-
margin-
|
|
139
|
-
}
|
|
140
|
-
:host([dir="rtl"]) .d2l-tag-list-item-clear-button {
|
|
141
|
-
margin-left: 0;
|
|
142
|
-
margin-right: calc(-0.6rem + 3px);
|
|
133
|
+
margin-inline-start: calc(-0.6rem + 3px);
|
|
143
134
|
}
|
|
144
135
|
d2l-button-icon {
|
|
145
136
|
--d2l-button-icon-fill-color: var(--d2l-color-chromite);
|
package/custom-elements.json
CHANGED
|
@@ -12829,6 +12829,69 @@
|
|
|
12829
12829
|
}
|
|
12830
12830
|
]
|
|
12831
12831
|
},
|
|
12832
|
+
{
|
|
12833
|
+
"name": "d2l-tab-custom",
|
|
12834
|
+
"path": "./components/tabs/demo/tab-custom.js",
|
|
12835
|
+
"attributes": [
|
|
12836
|
+
{
|
|
12837
|
+
"name": "role",
|
|
12838
|
+
"type": "string",
|
|
12839
|
+
"default": "\"tab\""
|
|
12840
|
+
},
|
|
12841
|
+
{
|
|
12842
|
+
"name": "selected",
|
|
12843
|
+
"type": "boolean",
|
|
12844
|
+
"default": "false"
|
|
12845
|
+
},
|
|
12846
|
+
{
|
|
12847
|
+
"name": "tabindex",
|
|
12848
|
+
"type": "number",
|
|
12849
|
+
"default": "-1"
|
|
12850
|
+
},
|
|
12851
|
+
{
|
|
12852
|
+
"name": "skeleton",
|
|
12853
|
+
"description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
|
|
12854
|
+
"type": "boolean"
|
|
12855
|
+
}
|
|
12856
|
+
],
|
|
12857
|
+
"properties": [
|
|
12858
|
+
{
|
|
12859
|
+
"name": "role",
|
|
12860
|
+
"attribute": "role",
|
|
12861
|
+
"type": "string",
|
|
12862
|
+
"default": "\"tab\""
|
|
12863
|
+
},
|
|
12864
|
+
{
|
|
12865
|
+
"name": "selected",
|
|
12866
|
+
"attribute": "selected",
|
|
12867
|
+
"type": "boolean",
|
|
12868
|
+
"default": "false"
|
|
12869
|
+
},
|
|
12870
|
+
{
|
|
12871
|
+
"name": "tabIndex",
|
|
12872
|
+
"attribute": "tabindex",
|
|
12873
|
+
"type": "number",
|
|
12874
|
+
"default": "-1"
|
|
12875
|
+
},
|
|
12876
|
+
{
|
|
12877
|
+
"name": "skeleton",
|
|
12878
|
+
"attribute": "skeleton",
|
|
12879
|
+
"description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
|
|
12880
|
+
"type": "boolean"
|
|
12881
|
+
}
|
|
12882
|
+
],
|
|
12883
|
+
"events": [
|
|
12884
|
+
{
|
|
12885
|
+
"name": "d2l-tab-selected"
|
|
12886
|
+
},
|
|
12887
|
+
{
|
|
12888
|
+
"name": "d2l-tab-content-change"
|
|
12889
|
+
},
|
|
12890
|
+
{
|
|
12891
|
+
"name": "d2l-tab-resize"
|
|
12892
|
+
}
|
|
12893
|
+
]
|
|
12894
|
+
},
|
|
12832
12895
|
{
|
|
12833
12896
|
"name": "d2l-tab-internal",
|
|
12834
12897
|
"path": "./components/tabs/tab-internal.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.102.
|
|
3
|
+
"version": "3.102.4",
|
|
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",
|