@brightspace-ui/core 3.96.0 → 3.97.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.
- package/components/empty-state/empty-state-action-button.js +6 -1
- package/components/empty-state/empty-state-action-link.js +6 -1
- package/components/empty-state/empty-state-illustrated.js +3 -3
- package/components/empty-state/empty-state-mixin.js +22 -0
- package/components/empty-state/empty-state-simple.js +3 -4
- package/components/empty-state/empty-state-styles.js +8 -1
- package/components/tabs/tab-mixin.js +11 -1
- package/components/tabs/tab.js +10 -8
- package/package.json +1 -1
@@ -1,6 +1,7 @@
|
|
1
1
|
import '../button/button.js';
|
2
2
|
import '../button/button-subtle.js';
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
4
|
+
import { FocusMixin } from '../../mixins/focus-mixin.js';
|
4
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
5
6
|
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
6
7
|
|
@@ -9,7 +10,7 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
|
|
9
10
|
* @fires d2l-empty-state-action - Dispatched when the action button is clicked
|
10
11
|
* @fires d2l-empty-state-illustrated-check - Internal event
|
11
12
|
*/
|
12
|
-
class EmptyStateActionButton extends PropertyRequiredMixin(LitElement) {
|
13
|
+
class EmptyStateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) {
|
13
14
|
|
14
15
|
static get properties() {
|
15
16
|
return {
|
@@ -40,6 +41,10 @@ class EmptyStateActionButton extends PropertyRequiredMixin(LitElement) {
|
|
40
41
|
this._illustrated = false;
|
41
42
|
}
|
42
43
|
|
44
|
+
static get focusElementSelector() {
|
45
|
+
return '.d2l-empty-state-action';
|
46
|
+
}
|
47
|
+
|
43
48
|
connectedCallback() {
|
44
49
|
super.connectedCallback();
|
45
50
|
requestAnimationFrame(() => {
|
@@ -1,12 +1,13 @@
|
|
1
1
|
import { html, LitElement, nothing } from 'lit';
|
2
2
|
import { bodyCompactStyles } from '../typography/styles.js';
|
3
|
+
import { FocusMixin } from '../../mixins/focus-mixin.js';
|
3
4
|
import { linkStyles } from '../link/link.js';
|
4
5
|
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
5
6
|
|
6
7
|
/**
|
7
8
|
* `d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.
|
8
9
|
*/
|
9
|
-
class EmptyStateActionLink extends PropertyRequiredMixin(LitElement) {
|
10
|
+
class EmptyStateActionLink extends FocusMixin(PropertyRequiredMixin(LitElement)) {
|
10
11
|
|
11
12
|
static get properties() {
|
12
13
|
return {
|
@@ -27,6 +28,10 @@ class EmptyStateActionLink extends PropertyRequiredMixin(LitElement) {
|
|
27
28
|
return [bodyCompactStyles, linkStyles];
|
28
29
|
}
|
29
30
|
|
31
|
+
static get focusElementSelector() {
|
32
|
+
return '.d2l-link';
|
33
|
+
}
|
34
|
+
|
30
35
|
render() {
|
31
36
|
const actionLink = this.text && this.href
|
32
37
|
? html`
|
@@ -2,9 +2,9 @@ import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-sty
|
|
2
2
|
import { html, LitElement, nothing } from 'lit';
|
3
3
|
import { bodyCompactStyles } from '../typography/styles.js';
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
5
|
+
import { EmptyStateMixin } from './empty-state-mixin.js';
|
5
6
|
import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
|
6
7
|
import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.js';
|
7
|
-
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
8
8
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
9
9
|
import { runAsync } from '../../directives/run-async/run-async.js';
|
10
10
|
import { styleMap } from 'lit/directives/style-map.js';
|
@@ -17,7 +17,7 @@ const illustrationAspectRatio = 500 / 330;
|
|
17
17
|
* @slot - Slot for empty state actions
|
18
18
|
* @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
|
19
19
|
*/
|
20
|
-
class EmptyStateIllustrated extends LoadingCompleteMixin(
|
20
|
+
class EmptyStateIllustrated extends LoadingCompleteMixin(EmptyStateMixin(LitElement)) {
|
21
21
|
|
22
22
|
static get properties() {
|
23
23
|
return {
|
@@ -74,7 +74,7 @@ class EmptyStateIllustrated extends LoadingCompleteMixin(PropertyRequiredMixin(L
|
|
74
74
|
return html`
|
75
75
|
${this.#renderIllustration()}
|
76
76
|
<p class="${classMap(titleClass)}">${this.titleText}</p>
|
77
|
-
<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
|
77
|
+
<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
|
78
78
|
<slot class="action-slot"></slot>
|
79
79
|
`;
|
80
80
|
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
2
|
+
|
3
|
+
export const EmptyStateMixin = superclass => class extends PropertyRequiredMixin(superclass) {
|
4
|
+
|
5
|
+
focus() {
|
6
|
+
if (!this.hasUpdated) {
|
7
|
+
return;
|
8
|
+
}
|
9
|
+
const action = this.shadowRoot?.querySelector('.action-slot').assignedElements().find(
|
10
|
+
el => el.tagName === 'D2L-EMPTY-STATE-ACTION-BUTTON' || el.tagName === 'D2L-EMPTY-STATE-ACTION-LINK'
|
11
|
+
);
|
12
|
+
if (action !== undefined) {
|
13
|
+
action.focus();
|
14
|
+
return;
|
15
|
+
}
|
16
|
+
const title = this.shadowRoot?.querySelector('.d2l-empty-state-description');
|
17
|
+
if (title !== null) {
|
18
|
+
title.focus();
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
};
|
@@ -2,14 +2,13 @@ import '../button/button-subtle.js';
|
|
2
2
|
import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
|
3
3
|
import { html, LitElement } from 'lit';
|
4
4
|
import { bodyCompactStyles } from '../typography/styles.js';
|
5
|
-
import {
|
6
|
-
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
5
|
+
import { EmptyStateMixin } from './empty-state-mixin.js';
|
7
6
|
|
8
7
|
/**
|
9
8
|
* The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.
|
10
9
|
* @slot - Slot for empty state actions
|
11
10
|
*/
|
12
|
-
class EmptyStateSimple extends
|
11
|
+
class EmptyStateSimple extends EmptyStateMixin(LitElement) {
|
13
12
|
|
14
13
|
static get properties() {
|
15
14
|
return {
|
@@ -28,7 +27,7 @@ class EmptyStateSimple extends PropertyRequiredMixin(RtlMixin(LitElement)) {
|
|
28
27
|
render() {
|
29
28
|
return html`
|
30
29
|
<div class="empty-state-container">
|
31
|
-
<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
|
30
|
+
<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
|
32
31
|
<slot class="action-slot"></slot>
|
33
32
|
</div>
|
34
33
|
`;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
|
-
import { css } from 'lit';
|
2
|
+
import { css, unsafeCSS } from 'lit';
|
3
|
+
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
3
4
|
|
4
5
|
export const emptyStateStyles = css`
|
5
6
|
|
@@ -20,6 +21,12 @@ export const emptyStateStyles = css`
|
|
20
21
|
display: inline;
|
21
22
|
}
|
22
23
|
|
24
|
+
.d2l-empty-state-description:${unsafeCSS(getFocusPseudoClass())} {
|
25
|
+
border-radius: 0.3rem;
|
26
|
+
outline: 2px solid var(--d2l-color-celestine);
|
27
|
+
outline-offset: 3px;
|
28
|
+
}
|
29
|
+
|
23
30
|
`;
|
24
31
|
|
25
32
|
export const emptyStateSimpleStyles = css`
|
@@ -28,6 +28,12 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
|
|
28
28
|
position: relative;
|
29
29
|
vertical-align: middle;
|
30
30
|
}
|
31
|
+
.d2l-tab-content {
|
32
|
+
margin: 0.5rem;
|
33
|
+
}
|
34
|
+
:host(:first-child) .d2l-tab-content {
|
35
|
+
margin-inline-start: 0;
|
36
|
+
}
|
31
37
|
.d2l-tab-selected-indicator {
|
32
38
|
border-top: 4px solid var(--d2l-color-celestine);
|
33
39
|
border-top-left-radius: 4px;
|
@@ -57,6 +63,10 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
|
|
57
63
|
:host([selected]) .d2l-tab-selected-indicator {
|
58
64
|
display: block;
|
59
65
|
}
|
66
|
+
:host([skeleton]) .d2l-tab-selected-indicator {
|
67
|
+
position: absolute !important; /* make sure skeleton styles do not override this */
|
68
|
+
}
|
69
|
+
|
60
70
|
`];
|
61
71
|
|
62
72
|
super.styles && styles.unshift(super.styles);
|
@@ -94,7 +104,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
|
|
94
104
|
|
95
105
|
render() {
|
96
106
|
return html`
|
97
|
-
|
107
|
+
<div class="d2l-skeletize d2l-tab-content">${this.renderContent()}</div>
|
98
108
|
<div class="d2l-tab-selected-indicator d2l-skeletize-container"></div>
|
99
109
|
`;
|
100
110
|
}
|
package/components/tabs/tab.js
CHANGED
@@ -21,20 +21,22 @@ class Tab extends TabMixin(LitElement) {
|
|
21
21
|
static get styles() {
|
22
22
|
const styles = [ css`
|
23
23
|
.d2l-tab-text {
|
24
|
-
margin: 0.5rem;
|
25
24
|
overflow: hidden;
|
26
25
|
padding: 0.1rem;
|
27
26
|
text-overflow: ellipsis;
|
28
27
|
white-space: nowrap;
|
29
28
|
}
|
30
|
-
:host(
|
31
|
-
margin-inline-start: 0;
|
32
|
-
}
|
33
|
-
:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
|
29
|
+
:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text {
|
34
30
|
border-radius: 0.3rem;
|
35
31
|
box-shadow: 0 0 0 2px var(--d2l-color-celestine);
|
36
32
|
color: var(--d2l-color-celestine);
|
37
33
|
}
|
34
|
+
.d2l-tab-text-skeletize-override {
|
35
|
+
min-width: 50px;
|
36
|
+
}
|
37
|
+
:host([skeleton]) .d2l-tab-content.d2l-skeletize::before {
|
38
|
+
inset-block: 0.15rem;
|
39
|
+
}
|
38
40
|
`];
|
39
41
|
|
40
42
|
super.styles && styles.unshift(super.styles);
|
@@ -50,14 +52,14 @@ class Tab extends TabMixin(LitElement) {
|
|
50
52
|
}
|
51
53
|
|
52
54
|
renderContent() {
|
55
|
+
const overrideSkeletonText = this.skeleton && (!this.text || this.text.length === 0);
|
53
56
|
const contentClasses = {
|
54
57
|
'd2l-tab-text': true,
|
58
|
+
'd2l-tab-text-skeletize-override': overrideSkeletonText
|
55
59
|
};
|
56
60
|
|
57
61
|
return html`
|
58
|
-
<div class="${classMap(contentClasses)}">
|
59
|
-
${this.text}
|
60
|
-
</div>
|
62
|
+
<div class="${classMap(contentClasses)}">${overrideSkeletonText ? html` ` : this.text}</div>
|
61
63
|
`;
|
62
64
|
}
|
63
65
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.97.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",
|