@brightspace-ui/core 2.11.2 → 2.12.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/dialog/demo/dialog-fullscreen.html +27 -0
- package/components/dialog/demo/dialog-nested.html +27 -1
- package/components/dialog/demo/dialog.html +27 -0
- package/components/dialog/dialog-fullscreen.js +16 -11
- package/components/dialog/dialog-mixin.js +6 -6
- package/components/dialog/dialog-styles.js +19 -13
- package/components/dialog/dialog.js +0 -4
- package/package.json +1 -1
|
@@ -13,8 +13,13 @@
|
|
|
13
13
|
import '../dialog-fullscreen.js';
|
|
14
14
|
import './dialog-async-content.js';
|
|
15
15
|
import '../../dropdown/dropdown.js';
|
|
16
|
+
import '../../dropdown/dropdown-button-subtle.js';
|
|
17
|
+
import '../../dropdown/dropdown-content.js';
|
|
16
18
|
import '../../dropdown/dropdown-more.js';
|
|
17
19
|
import '../../dropdown/dropdown-menu.js';
|
|
20
|
+
import '../../filter/filter.js';
|
|
21
|
+
import '../../filter/filter-dimension-set.js';
|
|
22
|
+
import '../../filter/filter-dimension-set-value.js';
|
|
18
23
|
import '../../menu/menu.js';
|
|
19
24
|
import '../../menu/menu-item.js';
|
|
20
25
|
import '../../tabs/tabs.js';
|
|
@@ -48,6 +53,28 @@
|
|
|
48
53
|
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
49
54
|
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
50
55
|
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
56
|
+
<d2l-dropdown-button-subtle text="More">
|
|
57
|
+
<d2l-dropdown-content mobile-tray="bottom">
|
|
58
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
59
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
60
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
61
|
+
</d2l-dropdown-content>
|
|
62
|
+
</d2l-dropdown-button-subtle>
|
|
63
|
+
<d2l-filter>
|
|
64
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
65
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
66
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
67
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
68
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
69
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
70
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
71
|
+
<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
|
|
72
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
73
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
74
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
75
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
76
|
+
</d2l-filter-dimension-set>
|
|
77
|
+
</d2l-filter>
|
|
51
78
|
<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
|
|
52
79
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
53
80
|
</d2l-dialog-fullscreen>
|
|
@@ -10,8 +10,12 @@
|
|
|
10
10
|
<script type="module">
|
|
11
11
|
import '../../demo/demo-page.js';
|
|
12
12
|
import '../../button/button.js';
|
|
13
|
+
import '../../dropdown/dropdown-button-subtle.js';
|
|
14
|
+
import '../../dropdown/dropdown-content.js';
|
|
15
|
+
import '../../filter/filter.js';
|
|
16
|
+
import '../../filter/filter-dimension-set.js';
|
|
17
|
+
import '../../filter/filter-dimension-set-value.js';
|
|
13
18
|
import '../dialog.js';
|
|
14
|
-
import '../dialog-confirm.js';
|
|
15
19
|
</script>
|
|
16
20
|
<style>
|
|
17
21
|
#openChild {
|
|
@@ -40,6 +44,28 @@
|
|
|
40
44
|
<div>
|
|
41
45
|
Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
|
|
42
46
|
Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.
|
|
47
|
+
<d2l-dropdown-button-subtle text="More">
|
|
48
|
+
<d2l-dropdown-content mobile-tray="left">
|
|
49
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
50
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
51
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
52
|
+
</d2l-dropdown-content>
|
|
53
|
+
</d2l-dropdown-button-subtle>
|
|
54
|
+
<d2l-filter>
|
|
55
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
56
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
57
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
58
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
59
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
60
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
61
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
62
|
+
<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
|
|
63
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
64
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
65
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
66
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
67
|
+
</d2l-filter-dimension-set>
|
|
68
|
+
</d2l-filter>
|
|
43
69
|
</div>
|
|
44
70
|
<d2l-button slot="footer" primary data-dialog-action="child ok">Child</d2l-button>
|
|
45
71
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
@@ -10,6 +10,11 @@
|
|
|
10
10
|
<script type="module">
|
|
11
11
|
import '../../demo/demo-page.js';
|
|
12
12
|
import '../../button/button.js';
|
|
13
|
+
import '../../dropdown/dropdown-button-subtle.js';
|
|
14
|
+
import '../../dropdown/dropdown-content.js';
|
|
15
|
+
import '../../filter/filter.js';
|
|
16
|
+
import '../../filter/filter-dimension-set.js';
|
|
17
|
+
import '../../filter/filter-dimension-set-value.js';
|
|
13
18
|
import '../dialog.js';
|
|
14
19
|
import './dialog-async-content.js';
|
|
15
20
|
import './dialog-container.js';
|
|
@@ -33,6 +38,28 @@
|
|
|
33
38
|
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
34
39
|
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
35
40
|
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
41
|
+
<d2l-dropdown-button-subtle text="More">
|
|
42
|
+
<d2l-dropdown-content mobile-tray="right">
|
|
43
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
|
44
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
|
45
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
|
46
|
+
</d2l-dropdown-content>
|
|
47
|
+
</d2l-dropdown-button-subtle>
|
|
48
|
+
<d2l-filter>
|
|
49
|
+
<d2l-filter-dimension-set key="course" text="Course" select-all>
|
|
50
|
+
<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
|
|
51
|
+
<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
|
|
52
|
+
<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
|
|
53
|
+
<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
|
|
54
|
+
<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
|
|
55
|
+
<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
|
|
56
|
+
<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
|
|
57
|
+
<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
|
|
58
|
+
<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
|
|
59
|
+
<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
|
|
60
|
+
<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
|
|
61
|
+
</d2l-filter-dimension-set>
|
|
62
|
+
</d2l-filter>
|
|
36
63
|
</div>
|
|
37
64
|
<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
|
|
38
65
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
@@ -74,16 +74,24 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
74
74
|
|
|
75
75
|
dialog.d2l-dialog-outer,
|
|
76
76
|
div.d2l-dialog-outer {
|
|
77
|
+
animation: d2l-dialog-fullscreen-close 200ms ease-out;
|
|
77
78
|
border-radius: 8px;
|
|
78
79
|
margin: 1.5rem;
|
|
79
80
|
max-width: 1170px;
|
|
80
|
-
opacity: 0;
|
|
81
81
|
top: 0;
|
|
82
|
-
transform: translateY(-50px) scale(0.97);
|
|
83
|
-
transition: transform 200ms ease-out, opacity 200ms ease-out;
|
|
84
82
|
width: auto;
|
|
85
83
|
}
|
|
86
84
|
|
|
85
|
+
@keyframes d2l-dialog-fullscreen-close {
|
|
86
|
+
0% { opacity: 1; transform: translateY(0); }
|
|
87
|
+
100% { opacity: 0; transform: translateY(-50px) scale(0.97); }
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes d2l-dialog-fullscreen-open {
|
|
91
|
+
0% { opacity: 0; transform: translateY(-50px) scale(0.97); }
|
|
92
|
+
100% { opacity: 1; transform: translateY(0); }
|
|
93
|
+
}
|
|
94
|
+
|
|
87
95
|
dialog.d2l-dialog-outer.d2l-dialog-fullscreen-within,
|
|
88
96
|
div.d2l-dialog-outer.d2l-dialog-fullscreen-within {
|
|
89
97
|
/* no margins when there is a fullscreen element within */
|
|
@@ -107,8 +115,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
107
115
|
|
|
108
116
|
:host([_state="showing"]) dialog.d2l-dialog-outer,
|
|
109
117
|
:host([_state="showing"]) div.d2l-dialog-outer {
|
|
110
|
-
|
|
111
|
-
transition-duration: 400ms;
|
|
118
|
+
animation: d2l-dialog-fullscreen-open 400ms ease-out;
|
|
112
119
|
}
|
|
113
120
|
|
|
114
121
|
dialog::backdrop {
|
|
@@ -128,8 +135,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
128
135
|
@media (prefers-reduced-motion: reduce) {
|
|
129
136
|
|
|
130
137
|
dialog.d2l-dialog-outer,
|
|
131
|
-
div.d2l-dialog-outer
|
|
132
|
-
|
|
138
|
+
div.d2l-dialog-outer,
|
|
139
|
+
:host([_state="showing"]) dialog.d2l-dialog-outer,
|
|
140
|
+
:host([_state="showing"]) div.d2l-dialog-outer {
|
|
141
|
+
animation: none;
|
|
133
142
|
}
|
|
134
143
|
|
|
135
144
|
dialog::backdrop {
|
|
@@ -161,10 +170,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
161
170
|
height: calc(100% - 1px);
|
|
162
171
|
}
|
|
163
172
|
|
|
164
|
-
div[nested].d2l-dialog-outer {
|
|
165
|
-
top: 0;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
173
|
:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
|
|
169
174
|
margin-left: -13px;
|
|
170
175
|
margin-right: 15px;
|
|
@@ -154,11 +154,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
154
154
|
|
|
155
155
|
this._scroll = false;
|
|
156
156
|
if (!reduceMotion) {
|
|
157
|
-
const
|
|
158
|
-
dialog.removeEventListener('
|
|
157
|
+
const animationEnd = () => {
|
|
158
|
+
dialog.removeEventListener('animationend', animationEnd);
|
|
159
159
|
doClose();
|
|
160
160
|
};
|
|
161
|
-
dialog.addEventListener('
|
|
161
|
+
dialog.addEventListener('animationend', animationEnd);
|
|
162
162
|
this._state = 'hiding';
|
|
163
163
|
} else {
|
|
164
164
|
this._state = 'hiding';
|
|
@@ -314,11 +314,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
|
314
314
|
const dialog = this.shadowRoot.querySelector('.d2l-dialog-outer');
|
|
315
315
|
|
|
316
316
|
const animPromise = new Promise((resolve) => {
|
|
317
|
-
const
|
|
318
|
-
dialog.removeEventListener('
|
|
317
|
+
const animationEnd = () => {
|
|
318
|
+
dialog.removeEventListener('animationend', animationEnd);
|
|
319
319
|
resolve();
|
|
320
320
|
};
|
|
321
|
-
dialog.addEventListener('
|
|
321
|
+
dialog.addEventListener('animationend', animationEnd);
|
|
322
322
|
});
|
|
323
323
|
|
|
324
324
|
if (this._useNative) {
|
|
@@ -21,6 +21,7 @@ export const dialogStyles = css`
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.d2l-dialog-outer {
|
|
24
|
+
animation: d2l-dialog-close 200ms ease-in;
|
|
24
25
|
background-color: white;
|
|
25
26
|
border: 1px solid var(--d2l-color-mica);
|
|
26
27
|
border-radius: 8px;
|
|
@@ -28,8 +29,21 @@ export const dialogStyles = css`
|
|
|
28
29
|
box-sizing: content-box;
|
|
29
30
|
position: fixed; /* also required for native to override position: absolute */
|
|
30
31
|
top: 100px;
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:host([_state="showing"]) > .d2l-dialog-outer {
|
|
35
|
+
/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
|
|
36
|
+
animation: d2l-dialog-open 200ms ease-in;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@keyframes d2l-dialog-close {
|
|
40
|
+
0% { transform: translateY(0); }
|
|
41
|
+
100% { transform: translateY(-50px); }
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes d2l-dialog-open {
|
|
45
|
+
0% { transform: translateY(-50px); }
|
|
46
|
+
100% { transform: translateY(0); }
|
|
33
47
|
}
|
|
34
48
|
|
|
35
49
|
.d2l-dialog-outer.d2l-dialog-outer-nested-showing {
|
|
@@ -45,10 +59,6 @@ export const dialogStyles = css`
|
|
|
45
59
|
z-index: 1000;
|
|
46
60
|
}
|
|
47
61
|
|
|
48
|
-
.d2l-dialog-outer.d2l-dialog-outer-nested {
|
|
49
|
-
top: 0;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
62
|
dialog.d2l-dialog-outer {
|
|
53
63
|
color: var(--d2l-color-ferrite);
|
|
54
64
|
margin-bottom: 0; /* required to override Chrome native positioning */
|
|
@@ -63,11 +73,6 @@ export const dialogStyles = css`
|
|
|
63
73
|
transition: opacity 200ms ease-in;
|
|
64
74
|
}
|
|
65
75
|
|
|
66
|
-
:host([_state="showing"]) > .d2l-dialog-outer {
|
|
67
|
-
/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
|
|
68
|
-
transform: translateY(0);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
76
|
:host([_state="showing"]) dialog::backdrop {
|
|
72
77
|
opacity: 0.7;
|
|
73
78
|
}
|
|
@@ -158,8 +163,9 @@ export const dialogStyles = css`
|
|
|
158
163
|
}
|
|
159
164
|
|
|
160
165
|
@media (prefers-reduced-motion: reduce) {
|
|
161
|
-
.d2l-dialog-outer
|
|
162
|
-
|
|
166
|
+
.d2l-dialog-outer,
|
|
167
|
+
:host([_state="showing"]) > .d2l-dialog-outer {
|
|
168
|
+
animation: none;
|
|
163
169
|
}
|
|
164
170
|
dialog::backdrop {
|
|
165
171
|
transition: none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.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",
|