@brightspace-ui/core 3.250.0 → 3.250.1
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
|
+
import { getFlag } from '../../helpers/flags.js';
|
|
3
4
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
4
5
|
|
|
5
6
|
const keyCodes = {
|
|
@@ -39,16 +40,12 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
|
|
|
39
40
|
:host {
|
|
40
41
|
box-sizing: border-box;
|
|
41
42
|
display: inline-block;
|
|
42
|
-
|
|
43
|
+
/* TODO: When removing the GAUD-9963-dropdown-tabs-not-resizing flag, Keep the min max code */
|
|
44
|
+
max-width: var(--d2l-gaud-9963-tab-max-width, 200px);
|
|
43
45
|
outline: none;
|
|
44
46
|
position: relative;
|
|
45
47
|
vertical-align: middle;
|
|
46
48
|
}
|
|
47
|
-
@container tabs-container (width >= 615px) {
|
|
48
|
-
:host {
|
|
49
|
-
max-width: min(20rem, 40%);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
49
|
:host([hidden]) {
|
|
53
50
|
display: none;
|
|
54
51
|
}
|
|
@@ -118,6 +115,13 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
|
|
|
118
115
|
this.addEventListener('keyup', this.#handleKeyup);
|
|
119
116
|
|
|
120
117
|
this.#hasInitialized = true;
|
|
118
|
+
/**
|
|
119
|
+
* TODO: remove this whole if when removing the GAUD-9963-dropdown-tabs-not-resizing flag
|
|
120
|
+
* keep the min max code an place that into the styles above
|
|
121
|
+
*/
|
|
122
|
+
if (getFlag('GAUD-9963-dropdown-tabs-not-resizing', false)) {
|
|
123
|
+
this.style.setProperty('--d2l-gaud-9963-tab-max-width', 'min(20rem, max(33%, 10rem))');
|
|
124
|
+
}
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
render() {
|
package/components/tabs/tabs.js
CHANGED
|
@@ -61,7 +61,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
61
61
|
:host {
|
|
62
62
|
--d2l-tabs-background-color: var(--d2l-theme-background-color-base);
|
|
63
63
|
box-sizing: border-box;
|
|
64
|
-
container: tabs-container / inline-size;
|
|
65
64
|
display: block;
|
|
66
65
|
margin-bottom: 1.2rem;
|
|
67
66
|
}
|
|
@@ -426,6 +425,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
426
425
|
return (Object.keys(this._tabIds).length > 1 && !reduceMotion) ? this._animateTabRemoval(tab) : Promise.resolve();
|
|
427
426
|
}
|
|
428
427
|
|
|
428
|
+
#GAUD_9963_FLAG = getFlag('GAUD-9963-dropdown-tabs-not-resizing', false);
|
|
429
429
|
#checkTabPanelMatchRequested;
|
|
430
430
|
#newTabsPanelStructure = getFlag('GAUD-8299-core-tabs-use-new-structure', false);
|
|
431
431
|
#panels;
|
|
@@ -895,7 +895,8 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
895
895
|
}
|
|
896
896
|
|
|
897
897
|
if (selectedTab) {
|
|
898
|
-
Promise.all(animPromises).then(() => {
|
|
898
|
+
Promise.all(animPromises).then(async() => {
|
|
899
|
+
if (this.#GAUD_9963_FLAG) await new Promise(resolve => requestAnimationFrame(resolve)); /* TODO: when removing the GAUD-9963-dropdown-tabs-not-resizing flag, keep the Promise */
|
|
899
900
|
this._updateMeasures();
|
|
900
901
|
this._updateScrollPosition(selectedTab);
|
|
901
902
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.250.
|
|
3
|
+
"version": "3.250.1",
|
|
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",
|