@brightspace-ui/core 3.0.1 → 3.1.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.
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import '../table-col-sort-button.js';
|
|
2
2
|
import '../table-controls.js';
|
|
3
|
+
import '../../button/button-icon.js';
|
|
3
4
|
import '../../dropdown/dropdown-button-subtle.js';
|
|
4
5
|
import '../../dropdown/dropdown-menu.js';
|
|
6
|
+
import '../../inputs/input-checkbox.js';
|
|
7
|
+
import '../../inputs/input-text.js';
|
|
5
8
|
import '../../menu/menu.js';
|
|
6
9
|
import '../../menu/menu-item.js';
|
|
7
10
|
import '../../paging/pager-load-more.js';
|
|
@@ -36,6 +39,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
|
|
|
36
39
|
static get properties() {
|
|
37
40
|
return {
|
|
38
41
|
paging: { type: Boolean, reflect: true },
|
|
42
|
+
showButtons: { type: Boolean, attribute: 'show-buttons' },
|
|
39
43
|
stickyControls: { attribute: 'sticky-controls', type: Boolean, reflect: true },
|
|
40
44
|
visibleBackground: { attribute: 'visible-background', type: Boolean, reflect: true },
|
|
41
45
|
_data: { state: true },
|
|
@@ -52,6 +56,13 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
|
|
|
52
56
|
:host([visible-background]) {
|
|
53
57
|
--d2l-table-controls-background-color: #dddddd;
|
|
54
58
|
}
|
|
59
|
+
.d2l-table > * > tr > :has(d2l-button-icon) {
|
|
60
|
+
padding-block: 0;
|
|
61
|
+
}
|
|
62
|
+
.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-button-icon {
|
|
63
|
+
margin-bottom: 4px;
|
|
64
|
+
vertical-align: top;
|
|
65
|
+
}
|
|
55
66
|
`];
|
|
56
67
|
}
|
|
57
68
|
|
|
@@ -59,6 +70,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
|
|
|
59
70
|
super();
|
|
60
71
|
|
|
61
72
|
this.paging = false;
|
|
73
|
+
this.showButtons = false;
|
|
62
74
|
this.stickyControls = false;
|
|
63
75
|
this.visibleBackground = false;
|
|
64
76
|
this._data = data();
|
|
@@ -99,7 +111,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
|
|
|
99
111
|
<th scope="col" sticky></th>
|
|
100
112
|
${thText.map(text => html`
|
|
101
113
|
<th scope="col">
|
|
102
|
-
${text}
|
|
114
|
+
${text}${text === 'Placeholder' && this.showButtons ? html`<d2l-button-icon text="Help" icon="tier1:help"></d2l-button-icon>` : nothing}
|
|
103
115
|
</th>
|
|
104
116
|
`)}
|
|
105
117
|
</tr>
|
|
@@ -117,7 +129,6 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
|
|
|
117
129
|
${columns.map(columnHeading => html`<td>${formatter.format(row.data[columnHeading.toLowerCase()])}</td>`)}
|
|
118
130
|
</tr>
|
|
119
131
|
`)}
|
|
120
|
-
|
|
121
132
|
</tbody>
|
|
122
133
|
</table>
|
|
123
134
|
${this.paging ? html`<d2l-pager-load-more slot="pager"
|
|
@@ -185,6 +196,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
|
|
|
185
196
|
@click="${this._handleSort}"
|
|
186
197
|
?desc="${this._sortDesc}"
|
|
187
198
|
?nosort="${noSort}">${item}</d2l-table-col-sort-button>
|
|
199
|
+
${item === 'Size' && this.showButtons ? html`<d2l-button-icon text="Help" icon="tier1:help"></d2l-button-icon>` : nothing}
|
|
188
200
|
</th>
|
|
189
201
|
`;
|
|
190
202
|
}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<h2>Default</h2>
|
|
17
17
|
<d2l-demo-snippet>
|
|
18
18
|
<template>
|
|
19
|
-
<d2l-test-table type="default" sticky-controls></d2l-test-table>
|
|
19
|
+
<d2l-test-table type="default" sticky-controls show-buttons></d2l-test-table>
|
|
20
20
|
</template>
|
|
21
21
|
</d2l-demo-snippet>
|
|
22
22
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
<h2>Light</h2>
|
|
31
31
|
<d2l-demo-snippet>
|
|
32
32
|
<template>
|
|
33
|
-
<d2l-test-table type="light" sticky-controls></d2l-test-table>
|
|
33
|
+
<d2l-test-table type="light" sticky-controls show-buttons></d2l-test-table>
|
|
34
34
|
</template>
|
|
35
35
|
</d2l-demo-snippet>
|
|
36
36
|
|
|
@@ -33,19 +33,32 @@ export class TableColSortButton extends FocusMixin(LitElement) {
|
|
|
33
33
|
|
|
34
34
|
static get styles() {
|
|
35
35
|
return css`
|
|
36
|
+
:host {
|
|
37
|
+
--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
|
|
38
|
+
--d2l-table-col-sort-button-margin-inline-end: var(--d2l-table-cell-col-sort-button-size-offset, 4px);
|
|
39
|
+
--d2l-table-col-sort-button-width: calc(100% - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
|
|
40
|
+
}
|
|
41
|
+
:host([nosort]) {
|
|
42
|
+
--d2l-table-col-sort-button-additional-padding-inline-end: calc(0.6rem + 18px);
|
|
43
|
+
}
|
|
36
44
|
button {
|
|
37
45
|
align-items: center;
|
|
38
46
|
background-color: transparent;
|
|
39
47
|
border: none;
|
|
48
|
+
border-radius: 4px;
|
|
40
49
|
color: inherit;
|
|
41
50
|
cursor: pointer;
|
|
42
51
|
display: inline-flex;
|
|
43
52
|
font-family: inherit;
|
|
44
53
|
font-size: inherit;
|
|
45
54
|
letter-spacing: inherit;
|
|
46
|
-
|
|
47
|
-
|
|
55
|
+
line-height: 0.9rem;
|
|
56
|
+
margin: var(--d2l-table-cell-col-sort-button-size-offset, 4px);
|
|
57
|
+
margin-inline-end: var(--d2l-table-col-sort-button-margin-inline-end);
|
|
58
|
+
padding: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
|
|
59
|
+
padding-inline-end: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px) + var(--d2l-table-col-sort-button-additional-padding-inline-end));
|
|
48
60
|
text-decoration: none;
|
|
61
|
+
width: var(--d2l-table-col-sort-button-width);
|
|
49
62
|
}
|
|
50
63
|
button::-moz-focus-inner {
|
|
51
64
|
border: 0;
|
|
@@ -54,14 +67,16 @@ export class TableColSortButton extends FocusMixin(LitElement) {
|
|
|
54
67
|
opacity: 0.5;
|
|
55
68
|
}
|
|
56
69
|
button:hover {
|
|
57
|
-
|
|
70
|
+
background-color: var(--d2l-color-gypsum);
|
|
58
71
|
}
|
|
59
72
|
button:focus-visible,
|
|
60
73
|
button:${unsafeCSS(getFocusPseudoClass())} {
|
|
61
|
-
border-radius: 0.2rem;
|
|
62
74
|
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
|
|
63
75
|
outline-style: none;
|
|
64
76
|
}
|
|
77
|
+
d2l-icon {
|
|
78
|
+
margin-inline-start: 0.6rem;
|
|
79
|
+
}
|
|
65
80
|
`;
|
|
66
81
|
}
|
|
67
82
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import '../scroll-wrapper/scroll-wrapper.js';
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
+
import { cssSizes } from '../inputs/input-checkbox.js';
|
|
4
5
|
import { PageableMixin } from '../paging/pageable-mixin.js';
|
|
5
6
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
6
7
|
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
@@ -32,6 +33,38 @@ export const tableStyles = css`
|
|
|
32
33
|
d2l-table-wrapper[dir="rtl"] .d2l-table > * > tr > * {
|
|
33
34
|
text-align: right;
|
|
34
35
|
}
|
|
36
|
+
d2l-table-wrapper d2l-button-icon {
|
|
37
|
+
--d2l-button-icon-min-height: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
|
|
38
|
+
--d2l-button-icon-min-width: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* once we only support browsers that support :has the section below can be removed up until @supports */
|
|
42
|
+
.d2l-table .d2l-checkbox,
|
|
43
|
+
.d2l-table d2l-input-checkbox,
|
|
44
|
+
.d2l-table d2l-selection-select-all,
|
|
45
|
+
.d2l-table d2l-selection-input {
|
|
46
|
+
margin-block: calc(0.5 * (var(--d2l-table-cell-height) - ${cssSizes.inputBoxSize}rem));
|
|
47
|
+
}
|
|
48
|
+
.d2l-table > * > tr.d2l-table-selected-first d2l-input-checkbox,
|
|
49
|
+
.d2l-table > * > tr.d2l-table-selected-first d2l-selection-input,
|
|
50
|
+
.d2l-table > * > tr.d2l-table-selected-first .d2l-checkbox {
|
|
51
|
+
margin-bottom: calc(0.5 * (var(--d2l-table-cell-height) - ${cssSizes.inputBoxSize}rem));
|
|
52
|
+
margin-top: calc(0.5 * (var(--d2l-table-cell-height) - ${cssSizes.inputBoxSize}rem) - 1px);
|
|
53
|
+
}
|
|
54
|
+
@supports selector(:has(a, b)) {
|
|
55
|
+
.d2l-table > * > tr > :has(.d2l-checkbox),
|
|
56
|
+
.d2l-table > * > tr > :has(d2l-selection-select-all),
|
|
57
|
+
.d2l-table > * > tr > :has(d2l-input-checkbox),
|
|
58
|
+
.d2l-table > * > tr > :has(d2l-selection-input) {
|
|
59
|
+
padding-block: calc(0.5 * (var(--d2l-table-cell-overall-height) - ${cssSizes.inputBoxSize}rem));
|
|
60
|
+
}
|
|
61
|
+
.d2l-table > * > tr.d2l-table-selected-first > :has(.d2l-checkbox),
|
|
62
|
+
.d2l-table > * > tr.d2l-table-selected-first > :has(d2l-input-checkbox),
|
|
63
|
+
.d2l-table > * > tr.d2l-table-selected-first > :has(d2l-selection-input) {
|
|
64
|
+
padding-bottom: calc(0.5 * (var(--d2l-table-cell-overall-height) - ${cssSizes.inputBoxSize}rem));
|
|
65
|
+
padding-top: calc(0.5 * (var(--d2l-table-cell-overall-height) - ${cssSizes.inputBoxSize}rem) - 1px);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
35
68
|
|
|
36
69
|
/* default cells */
|
|
37
70
|
d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > * > tr > *,
|
|
@@ -54,10 +87,53 @@ export const tableStyles = css`
|
|
|
54
87
|
font-size: 0.7rem;
|
|
55
88
|
line-height: 0.9rem;
|
|
56
89
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
d2l-table-
|
|
60
|
-
|
|
90
|
+
|
|
91
|
+
/* sortable header cells */
|
|
92
|
+
d2l-table-col-sort-button {
|
|
93
|
+
vertical-align: middle;
|
|
94
|
+
}
|
|
95
|
+
d2l-table-col-sort-button:not(:only-child) {
|
|
96
|
+
--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
margin-inline-start: calc(-1 * var(--d2l-table-cell-col-sort-button-size-offset));
|
|
99
|
+
margin-top: calc(-1 * var(--d2l-table-cell-col-sort-button-size-offset));
|
|
100
|
+
}
|
|
101
|
+
d2l-table-col-sort-button:not(:last-child) {
|
|
102
|
+
--d2l-table-col-sort-button-margin-inline-end: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* TODO: once we only support browsers that support :has the section below can be removed up until @supports */
|
|
106
|
+
.d2l-table th.d2l-table-header-col-sortable {
|
|
107
|
+
height: var(--d2l-table-cell-overall-height);
|
|
108
|
+
padding: 0;
|
|
109
|
+
}
|
|
110
|
+
.d2l-table th.d2l-table-header-col-sortable.d2l-table-header-col-sortable-siblings {
|
|
111
|
+
height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
|
|
112
|
+
padding-top: var(--d2l-table-cell-col-sort-button-size-offset);
|
|
113
|
+
}
|
|
114
|
+
.d2l-table th.d2l-table-header-col-sortable-siblings d2l-table-col-sort-button {
|
|
115
|
+
--d2l-table-col-sort-button-width: unset;
|
|
116
|
+
}
|
|
117
|
+
.d2l-table-header-col-sortable-no-sorted.d2l-table-header-col-sortable-siblings :last-child {
|
|
118
|
+
padding-inline-end: calc(0.6rem + 18px);
|
|
119
|
+
}
|
|
120
|
+
@supports selector(:has(a, b)) {
|
|
121
|
+
.d2l-table th:has(d2l-table-col-sort-button) {
|
|
122
|
+
height: var(--d2l-table-cell-overall-height);
|
|
123
|
+
padding: 0;
|
|
124
|
+
}
|
|
125
|
+
.d2l-table th:has(d2l-table-col-sort-button:not(:only-child)) {
|
|
126
|
+
height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
|
|
127
|
+
padding-inline-start: var(--d2l-table-cell-col-sort-button-size-offset);
|
|
128
|
+
padding-top: var(--d2l-table-cell-col-sort-button-size-offset);
|
|
129
|
+
}
|
|
130
|
+
.d2l-table th:has(d2l-table-col-sort-button:not(:only-child)) d2l-table-col-sort-button {
|
|
131
|
+
--d2l-table-col-sort-button-width: unset;
|
|
132
|
+
}
|
|
133
|
+
/* has at least one d2l-table-col-sort-button with [nosort], does not have d2l-table-col-sort-button without nosort */
|
|
134
|
+
.d2l-table > * > tr > :has(d2l-table-col-sort-button[nosort]:not(:only-child)):not(:has(d2l-table-col-sort-button:not([nosort]))) :last-child {
|
|
135
|
+
padding-inline-end: calc(0.6rem + 18px);
|
|
136
|
+
}
|
|
61
137
|
}
|
|
62
138
|
|
|
63
139
|
/* border radiuses */
|
|
@@ -242,9 +318,11 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
|
|
|
242
318
|
--d2l-table-border-color: var(--d2l-color-mica);
|
|
243
319
|
--d2l-table-border-radius: 0.3rem;
|
|
244
320
|
--d2l-table-border-radius-sticky-offset: calc(1px - var(--d2l-table-border-radius));
|
|
245
|
-
--d2l-table-cell-height:
|
|
246
|
-
--d2l-table-cell-
|
|
247
|
-
--d2l-table-cell-padding
|
|
321
|
+
--d2l-table-cell-overall-height: 46px;
|
|
322
|
+
--d2l-table-cell-height: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-padding));
|
|
323
|
+
--d2l-table-cell-padding: 0.7rem;
|
|
324
|
+
--d2l-table-cell-padding-alt: calc(0.7rem - 1px) 0.7rem 0.7rem 0.7rem;
|
|
325
|
+
--d2l-table-cell-col-sort-button-size-offset: 4px;
|
|
248
326
|
--d2l-table-header-background-color: var(--d2l-color-regolith);
|
|
249
327
|
--d2l-table-row-border-color-selected: var(--d2l-color-celestine);
|
|
250
328
|
--d2l-table-row-background-color-selected: var(--d2l-color-celestine-plus-2);
|
|
@@ -257,9 +335,6 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
|
|
|
257
335
|
:host([type="light"]) {
|
|
258
336
|
--d2l-table-border-radius: 0rem; /* stylelint-disable-line length-zero-no-unit */
|
|
259
337
|
--d2l-table-border-radius-sticky-offset: 0rem; /* stylelint-disable-line length-zero-no-unit */
|
|
260
|
-
--d2l-table-cell-height: 1.15rem; /* min-height to be 48px including border */
|
|
261
|
-
--d2l-table-cell-padding: 0.6rem;
|
|
262
|
-
--d2l-table-cell-padding-alt: calc(0.6rem - 1px) 0.6rem 0.6rem 0.6rem;
|
|
263
338
|
--d2l-table-border-color: var(--d2l-color-gypsum);
|
|
264
339
|
--d2l-table-header-background-color: #ffffff;
|
|
265
340
|
}
|
|
@@ -368,6 +443,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
|
|
|
368
443
|
r.classList.toggle('d2l-table-selected-first', firstNonHeaderRow && isSelected);
|
|
369
444
|
|
|
370
445
|
Array.from(r.cells).forEach((c, index) => {
|
|
446
|
+
if (isHeader && !CSS.supports('selector(:has(a, b))')) this._checkSiblingSortableCells(c);
|
|
371
447
|
c.classList.toggle('d2l-table-cell-first', index === 0 && skipFirst === 0);
|
|
372
448
|
if (index === 0 && skipFirst === 0 && c.hasAttribute('rowspan')) {
|
|
373
449
|
skipFirst = parseInt(c.getAttribute('rowspan'));
|
|
@@ -380,6 +456,16 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
|
|
|
380
456
|
});
|
|
381
457
|
}
|
|
382
458
|
|
|
459
|
+
_checkSiblingSortableCells(c) {
|
|
460
|
+
const hasColSortButton = c.querySelector('d2l-table-col-sort-button');
|
|
461
|
+
if (!hasColSortButton) return;
|
|
462
|
+
c.classList.toggle('d2l-table-header-col-sortable', true);
|
|
463
|
+
c.classList.toggle('d2l-table-header-col-sortable-siblings', c.childElementCount > 1);
|
|
464
|
+
|
|
465
|
+
const hasSorted = c.querySelector('d2l-table-col-sort-button:not([nosort])');
|
|
466
|
+
c.classList.toggle('d2l-table-header-col-sortable-no-sorted', !hasSorted);
|
|
467
|
+
}
|
|
468
|
+
|
|
383
469
|
_getItemByIndex(index) {
|
|
384
470
|
return this._getItems()[index];
|
|
385
471
|
}
|
|
@@ -498,11 +584,15 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
|
|
|
498
584
|
for (let i = 0; i < firstRowHead.cells.length; i++) {
|
|
499
585
|
const headCell = firstRowHead.cells[i];
|
|
500
586
|
const bodyCell = firstRowBody.cells[i];
|
|
587
|
+
const bodyStyle = getComputedStyle(bodyCell);
|
|
588
|
+
const headStyle = getComputedStyle(headCell);
|
|
501
589
|
|
|
502
590
|
if (headCell.clientWidth > bodyCell.clientWidth) {
|
|
503
|
-
|
|
591
|
+
const headOverallWidth = parseFloat(headStyle.width) + parseFloat(headStyle.paddingLeft) + parseFloat(headStyle.paddingRight);
|
|
592
|
+
bodyCell.style.minWidth = `${headOverallWidth - parseFloat(bodyStyle.paddingLeft) - parseFloat(bodyStyle.paddingRight)}px`;
|
|
504
593
|
} else if (headCell.clientWidth < bodyCell.clientWidth) {
|
|
505
|
-
|
|
594
|
+
const bodyOverallWidth = parseFloat(bodyStyle.width) + parseFloat(bodyStyle.paddingLeft) + parseFloat(bodyStyle.paddingRight);
|
|
595
|
+
headCell.style.minWidth = `${bodyOverallWidth - parseFloat(headStyle.paddingLeft) - parseFloat(headStyle.paddingRight)}px`;
|
|
506
596
|
}
|
|
507
597
|
}
|
|
508
598
|
}
|
package/custom-elements.json
CHANGED
|
@@ -11861,6 +11861,11 @@
|
|
|
11861
11861
|
"type": "boolean",
|
|
11862
11862
|
"default": "false"
|
|
11863
11863
|
},
|
|
11864
|
+
{
|
|
11865
|
+
"name": "show-buttons",
|
|
11866
|
+
"type": "boolean",
|
|
11867
|
+
"default": "false"
|
|
11868
|
+
},
|
|
11864
11869
|
{
|
|
11865
11870
|
"name": "sticky-controls",
|
|
11866
11871
|
"type": "boolean",
|
|
@@ -11914,6 +11919,12 @@
|
|
|
11914
11919
|
"type": "boolean",
|
|
11915
11920
|
"default": "false"
|
|
11916
11921
|
},
|
|
11922
|
+
{
|
|
11923
|
+
"name": "showButtons",
|
|
11924
|
+
"attribute": "show-buttons",
|
|
11925
|
+
"type": "boolean",
|
|
11926
|
+
"default": "false"
|
|
11927
|
+
},
|
|
11917
11928
|
{
|
|
11918
11929
|
"name": "stickyControls",
|
|
11919
11930
|
"attribute": "sticky-controls",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.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",
|