@brightspace-ui/core 2.123.0 → 2.124.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.
|
@@ -86,13 +86,40 @@
|
|
|
86
86
|
document.querySelector('#dialogFullscreen').opened = true;
|
|
87
87
|
});
|
|
88
88
|
document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
|
|
89
|
-
console.log('
|
|
89
|
+
console.log('dialog action:', e.detail.action);
|
|
90
|
+
});
|
|
91
|
+
</script>
|
|
92
|
+
</template>
|
|
93
|
+
</d2l-demo-snippet>
|
|
94
|
+
|
|
95
|
+
<h2>Fullscreen Dialog (no-padding)</h2>
|
|
96
|
+
|
|
97
|
+
<d2l-demo-snippet>
|
|
98
|
+
<template>
|
|
99
|
+
<d2l-button id="openNoPadding">Show Dialog</d2l-button>
|
|
100
|
+
<d2l-dialog-fullscreen id="dialogFullscreenNoPadding" title-text="Fullscreen Title" no-padding>
|
|
101
|
+
<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>
|
|
102
|
+
<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>
|
|
103
|
+
<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>
|
|
104
|
+
<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>
|
|
105
|
+
<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>
|
|
106
|
+
<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>
|
|
107
|
+
|
|
108
|
+
<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
|
|
109
|
+
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
110
|
+
</d2l-dialog-fullscreen>
|
|
111
|
+
<script>
|
|
112
|
+
document.querySelector('#openNoPadding').addEventListener('click', () => {
|
|
113
|
+
document.querySelector('#dialogFullscreenNoPadding').opened = true;
|
|
114
|
+
});
|
|
115
|
+
document.querySelector('#dialogFullscreenNoPadding').addEventListener('d2l-dialog-close', (e) => {
|
|
116
|
+
console.log('dialog action:', e.detail.action);
|
|
90
117
|
});
|
|
91
118
|
</script>
|
|
92
119
|
</template>
|
|
93
120
|
</d2l-demo-snippet>
|
|
94
121
|
|
|
95
|
-
<h2>Fullscreen Dialog
|
|
122
|
+
<h2>Fullscreen Dialog (overflowing content)</h2>
|
|
96
123
|
|
|
97
124
|
<d2l-demo-snippet>
|
|
98
125
|
<template>
|
|
@@ -152,7 +179,7 @@
|
|
|
152
179
|
document.querySelector('#dialogFullscreenOverflow').opened = true;
|
|
153
180
|
});
|
|
154
181
|
document.querySelector('#dialogFullscreenOverflow').addEventListener('d2l-dialog-close', (e) => {
|
|
155
|
-
console.log('
|
|
182
|
+
console.log('dialog action:', e.detail.action);
|
|
156
183
|
});
|
|
157
184
|
</script>
|
|
158
185
|
</template>
|
|
@@ -180,7 +207,7 @@
|
|
|
180
207
|
</template>
|
|
181
208
|
</d2l-demo-snippet>
|
|
182
209
|
|
|
183
|
-
<h2>Fullscreen Dialog
|
|
210
|
+
<h2>Fullscreen Dialog (width)</h2>
|
|
184
211
|
|
|
185
212
|
<d2l-demo-snippet>
|
|
186
213
|
<template>
|
|
@@ -232,7 +259,7 @@
|
|
|
232
259
|
document.querySelector('#dialogWidth').opened = true;
|
|
233
260
|
});
|
|
234
261
|
document.querySelector('#dialogWidth').addEventListener('d2l-dialog-close', (e) => {
|
|
235
|
-
console.log('
|
|
262
|
+
console.log('dialog action:', e.detail.action);
|
|
236
263
|
});
|
|
237
264
|
</script>
|
|
238
265
|
</template>
|
|
@@ -27,7 +27,11 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
27
27
|
* @type {boolean}
|
|
28
28
|
*/
|
|
29
29
|
async: { type: Boolean },
|
|
30
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Render with no content padding
|
|
32
|
+
* @type {boolean}
|
|
33
|
+
*/
|
|
34
|
+
noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
|
|
31
35
|
/**
|
|
32
36
|
* The preferred width (unit-less) for the dialog. Maximum 1170.
|
|
33
37
|
*/
|
|
@@ -54,6 +58,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
54
58
|
max-width: calc(100% - 3rem);
|
|
55
59
|
}
|
|
56
60
|
|
|
61
|
+
:host([no-padding]) .d2l-dialog-content {
|
|
62
|
+
padding: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
57
65
|
@media (min-width: 616px) {
|
|
58
66
|
|
|
59
67
|
.d2l-dialog-header {
|
|
@@ -74,6 +82,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
74
82
|
height: calc(100% - 1rem);
|
|
75
83
|
}
|
|
76
84
|
|
|
85
|
+
:host([no-padding]) .d2l-dialog-content > div {
|
|
86
|
+
height: 100%;
|
|
87
|
+
}
|
|
88
|
+
|
|
77
89
|
.d2l-dialog-header > div > d2l-button-icon {
|
|
78
90
|
flex: none;
|
|
79
91
|
margin: -2px -12px 0 0;
|
|
@@ -178,6 +190,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
|
|
|
178
190
|
constructor() {
|
|
179
191
|
super();
|
|
180
192
|
this.async = false;
|
|
193
|
+
this.noPadding = false;
|
|
181
194
|
this._autoSize = false;
|
|
182
195
|
this._hasFooterContent = false;
|
|
183
196
|
this._icon = 'tier1:close-large-thick';
|
|
@@ -98,6 +98,8 @@ export const dialogStyles = css`
|
|
|
98
98
|
box-sizing: border-box;
|
|
99
99
|
flex: none;
|
|
100
100
|
padding: 19px 30px 23px 30px;
|
|
101
|
+
position: relative; /* stack header overflow shadow on top of content */
|
|
102
|
+
z-index: 1; /* stack header overflow shadow on top of content */
|
|
101
103
|
}
|
|
102
104
|
|
|
103
105
|
.d2l-dialog-outer.d2l-dialog-outer-overflow-top .d2l-dialog-header {
|
|
@@ -120,6 +122,10 @@ export const dialogStyles = css`
|
|
|
120
122
|
padding: 0 30px;
|
|
121
123
|
}
|
|
122
124
|
|
|
125
|
+
.d2l-dialog-content > div {
|
|
126
|
+
position: relative; /* make this the positioned parent for absolute positioned elements like d2l-template-primary-secondary */
|
|
127
|
+
}
|
|
128
|
+
|
|
123
129
|
.d2l-dialog-outer-scroll .d2l-dialog-content {
|
|
124
130
|
overflow: auto;
|
|
125
131
|
}
|
|
@@ -128,6 +134,7 @@ export const dialogStyles = css`
|
|
|
128
134
|
box-sizing: border-box;
|
|
129
135
|
flex: none;
|
|
130
136
|
padding: 30px 30px 12px 30px; /* 18px margin below footer children */
|
|
137
|
+
position: relative; /* stack footer overflow shadow on top of content */
|
|
131
138
|
}
|
|
132
139
|
|
|
133
140
|
.d2l-dialog-outer.d2l-dialog-outer-overflow-bottom .d2l-dialog-footer {
|
package/custom-elements.json
CHANGED
|
@@ -1948,6 +1948,12 @@
|
|
|
1948
1948
|
"type": "boolean",
|
|
1949
1949
|
"default": "false"
|
|
1950
1950
|
},
|
|
1951
|
+
{
|
|
1952
|
+
"name": "no-padding",
|
|
1953
|
+
"description": "Render with no content padding",
|
|
1954
|
+
"type": "boolean",
|
|
1955
|
+
"default": "false"
|
|
1956
|
+
},
|
|
1951
1957
|
{
|
|
1952
1958
|
"name": "width",
|
|
1953
1959
|
"description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
|
|
@@ -1974,6 +1980,13 @@
|
|
|
1974
1980
|
"type": "boolean",
|
|
1975
1981
|
"default": "false"
|
|
1976
1982
|
},
|
|
1983
|
+
{
|
|
1984
|
+
"name": "noPadding",
|
|
1985
|
+
"attribute": "no-padding",
|
|
1986
|
+
"description": "Render with no content padding",
|
|
1987
|
+
"type": "boolean",
|
|
1988
|
+
"default": "false"
|
|
1989
|
+
},
|
|
1977
1990
|
{
|
|
1978
1991
|
"name": "width",
|
|
1979
1992
|
"attribute": "width",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.124.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",
|
|
@@ -55,8 +55,7 @@
|
|
|
55
55
|
|
|
56
56
|
<d2l-list item-count="50" extend-separators>
|
|
57
57
|
<d2l-list-controls slot="controls" select-all-pages-allowed>
|
|
58
|
-
|
|
59
|
-
<d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
|
|
58
|
+
<d2l-selection-action id="openMainDialog" icon="tier1:plus-default" text="Add"></d2l-selection-action>
|
|
60
59
|
<d2l-selection-action-dropdown text="Move To" requires-selection>
|
|
61
60
|
<d2l-dropdown-menu>
|
|
62
61
|
<d2l-menu label="Move To Options">
|
|
@@ -342,19 +341,33 @@
|
|
|
342
341
|
</d2l-list-item>
|
|
343
342
|
</d2l-list>
|
|
344
343
|
|
|
345
|
-
<d2l-dialog-fullscreen id="dialogMain" title-text="Dialog Title">
|
|
346
|
-
<
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
344
|
+
<d2l-dialog-fullscreen id="dialogMain" title-text="Dialog Title" no-padding>
|
|
345
|
+
<d2l-template-primary-secondary resizable storage-key="demo-dialog">
|
|
346
|
+
<div slot="header" style="background-color: #dddddd; padding: 1rem;">Primary/Secondary Controls</div>
|
|
347
|
+
<div slot="primary" style="padding: 1rem;">
|
|
348
|
+
<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>
|
|
349
|
+
<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>
|
|
350
|
+
<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>
|
|
351
|
+
<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>
|
|
352
|
+
<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>
|
|
353
|
+
<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>
|
|
354
|
+
</div>
|
|
355
|
+
<div slot="secondary" style="padding: 1rem;">
|
|
356
|
+
<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>
|
|
357
|
+
<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>
|
|
358
|
+
<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>
|
|
359
|
+
<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>
|
|
360
|
+
<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>
|
|
361
|
+
<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>
|
|
362
|
+
</div>
|
|
363
|
+
<div slot="footer">Primary/Secondary Footer</div>
|
|
364
|
+
</d2l-template-primary-secondary>
|
|
352
365
|
<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
|
|
353
366
|
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
354
367
|
</d2l-dialog-fullscreen>
|
|
355
368
|
|
|
356
369
|
<script>
|
|
357
|
-
document.querySelector('#openMainDialog').addEventListener('click', () => {
|
|
370
|
+
document.querySelector('#openMainDialog').addEventListener('d2l-selection-action-click', () => {
|
|
358
371
|
document.querySelector('#dialogMain').opened = true;
|
|
359
372
|
});
|
|
360
373
|
document.querySelector('#dialogMain').addEventListener('d2l-dialog-close', (e) => {
|