@brightspace-ui/core 3.0.1 → 3.1.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.
Files changed (6) hide show
  1. package/components/table/demo/table-test.js +13 -2
  2. package/components/table/demo/table.html +2 -2
  3. package/components/table/table-col-sort-button.js +18 -4
  4. package/components/table/table-wrapper.js +89 -12
  5. package/custom-elements.json +11 -0
  6. package/package.json +1 -1
package/components/table/demo/table-test.js CHANGED
@@ -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,12 @@ 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
+ vertical-align: top;
64
+ }
55
65
  `];
56
66
  }
57
67
 
@@ -59,6 +69,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
59
69
  super();
60
70
 
61
71
  this.paging = false;
72
+ this.showButtons = false;
62
73
  this.stickyControls = false;
63
74
  this.visibleBackground = false;
64
75
  this._data = data();
@@ -99,7 +110,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
99
110
  <th scope="col" sticky></th>
100
111
  ${thText.map(text => html`
101
112
  <th scope="col">
102
- ${text}
113
+ ${text}${text === 'Placeholder' && this.showButtons ? html`<d2l-button-icon text="Help" icon="tier1:help"></d2l-button-icon>` : nothing}
103
114
  </th>
104
115
  `)}
105
116
  </tr>
@@ -117,7 +128,6 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
117
128
  ${columns.map(columnHeading => html`<td>${formatter.format(row.data[columnHeading.toLowerCase()])}</td>`)}
118
129
  </tr>
119
130
  `)}
120
-
121
131
  </tbody>
122
132
  </table>
123
133
  ${this.paging ? html`<d2l-pager-load-more slot="pager"
@@ -185,6 +195,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
185
195
  @click="${this._handleSort}"
186
196
  ?desc="${this._sortDesc}"
187
197
  ?nosort="${noSort}">${item}</d2l-table-col-sort-button>
198
+ ${item === 'Size' && this.showButtons ? html`<d2l-button-icon text="Help" icon="tier1:help"></d2l-button-icon>` : nothing}
188
199
  </th>
189
200
  `;
190
201
  }
package/components/table/demo/table.html CHANGED
@@ -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
 
package/components/table/table-col-sort-button.js CHANGED
@@ -33,19 +33,31 @@ 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-width: calc(100% - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
39
+ }
40
+ :host([nosort]) {
41
+ --d2l-table-col-sort-button-additional-padding-inline-end: calc(0.6rem + 18px);
42
+ }
36
43
  button {
37
44
  align-items: center;
38
45
  background-color: transparent;
39
46
  border: none;
47
+ border-radius: 4px;
40
48
  color: inherit;
41
49
  cursor: pointer;
42
50
  display: inline-flex;
43
51
  font-family: inherit;
44
52
  font-size: inherit;
45
53
  letter-spacing: inherit;
46
- margin: 0;
47
- padding: 0;
54
+ line-height: 0.9rem;
55
+ margin-block: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
56
+ margin-inline: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
57
+ padding: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
58
+ 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
59
  text-decoration: none;
60
+ width: var(--d2l-table-col-sort-button-width);
49
61
  }
50
62
  button::-moz-focus-inner {
51
63
  border: 0;
@@ -54,14 +66,16 @@ export class TableColSortButton extends FocusMixin(LitElement) {
54
66
  opacity: 0.5;
55
67
  }
56
68
  button:hover {
57
- text-decoration: underline;
69
+ background-color: var(--d2l-color-gypsum);
58
70
  }
59
71
  button:focus-visible,
60
72
  button:${unsafeCSS(getFocusPseudoClass())} {
61
- border-radius: 0.2rem;
62
73
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
63
74
  outline-style: none;
64
75
  }
76
+ d2l-icon {
77
+ margin-inline-start: 0.6rem;
78
+ }
65
79
  `;
66
80
  }
67
81
 
package/components/table/table-wrapper.js CHANGED
@@ -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,40 @@ export const tableStyles = css`
54
87
  font-size: 0.7rem;
55
88
  line-height: 0.9rem;
56
89
  }
57
- d2l-table-wrapper[type="default"] .d2l-table > thead > tr > th,
58
- d2l-table-wrapper[type="default"] .d2l-table > * > tr.d2l-table-header > th,
59
- d2l-table-wrapper[type="default"] .d2l-table > * > tr[header] > th {
60
- height: 27px; /* min-height to be 48px including border */
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
+ }
98
+
99
+ /* TODO: once we only support browsers that support :has the section below can be removed up until @supports */
100
+ .d2l-table th.d2l-table-header-col-sortable {
101
+ height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
102
+ padding-block: var(--d2l-table-cell-col-sort-button-size-offset) 0;
103
+ padding-inline: var(--d2l-table-cell-col-sort-button-size-offset) 0;
104
+ }
105
+ .d2l-table th.d2l-table-header-col-sortable-siblings d2l-table-col-sort-button {
106
+ --d2l-table-col-sort-button-width: unset;
107
+ }
108
+ .d2l-table-header-col-sortable-no-sorted.d2l-table-header-col-sortable-siblings :last-child {
109
+ padding-inline-end: calc(0.6rem + 18px);
110
+ }
111
+ @supports selector(:has(a, b)) {
112
+ .d2l-table > * > tr > th:has(d2l-table-col-sort-button) {
113
+ height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
114
+ padding-block: var(--d2l-table-cell-col-sort-button-size-offset) 0;
115
+ padding-inline: var(--d2l-table-cell-col-sort-button-size-offset) 0;
116
+ }
117
+ .d2l-table th:has(d2l-table-col-sort-button:not(:only-child)) d2l-table-col-sort-button {
118
+ --d2l-table-col-sort-button-width: unset;
119
+ }
120
+ /* has at least one d2l-table-col-sort-button with [nosort], does not have d2l-table-col-sort-button without nosort */
121
+ .d2l-table > * > tr > :has(d2l-table-col-sort-button[nosort]:not(:only-child)):not(:has(d2l-table-col-sort-button:not([nosort]))) :last-child {
122
+ padding-inline-end: calc(0.6rem + 18px);
123
+ }
61
124
  }
62
125
 
63
126
  /* border radiuses */
@@ -242,9 +305,11 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
242
305
  --d2l-table-border-color: var(--d2l-color-mica);
243
306
  --d2l-table-border-radius: 0.3rem;
244
307
  --d2l-table-border-radius-sticky-offset: calc(1px - var(--d2l-table-border-radius));
245
- --d2l-table-cell-height: 41px; /* min-height to be 62px including border */
246
- --d2l-table-cell-padding: 0.5rem 1rem;
247
- --d2l-table-cell-padding-alt: calc(0.5rem - 1px) 1rem 0.5rem 1rem;
308
+ --d2l-table-cell-overall-height: 46px;
309
+ --d2l-table-cell-height: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-padding));
310
+ --d2l-table-cell-padding: 0.7rem;
311
+ --d2l-table-cell-padding-alt: calc(0.7rem - 1px) 0.7rem 0.7rem 0.7rem;
312
+ --d2l-table-cell-col-sort-button-size-offset: 4px;
248
313
  --d2l-table-header-background-color: var(--d2l-color-regolith);
249
314
  --d2l-table-row-border-color-selected: var(--d2l-color-celestine);
250
315
  --d2l-table-row-background-color-selected: var(--d2l-color-celestine-plus-2);
@@ -257,9 +322,6 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
257
322
  :host([type="light"]) {
258
323
  --d2l-table-border-radius: 0rem; /* stylelint-disable-line length-zero-no-unit */
259
324
  --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
325
  --d2l-table-border-color: var(--d2l-color-gypsum);
264
326
  --d2l-table-header-background-color: #ffffff;
265
327
  }
@@ -368,6 +430,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
368
430
  r.classList.toggle('d2l-table-selected-first', firstNonHeaderRow && isSelected);
369
431
 
370
432
  Array.from(r.cells).forEach((c, index) => {
433
+ if (isHeader && !CSS.supports('selector(:has(a, b))')) this._checkSiblingSortableCells(c);
371
434
  c.classList.toggle('d2l-table-cell-first', index === 0 && skipFirst === 0);
372
435
  if (index === 0 && skipFirst === 0 && c.hasAttribute('rowspan')) {
373
436
  skipFirst = parseInt(c.getAttribute('rowspan'));
@@ -380,6 +443,16 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
380
443
  });
381
444
  }
382
445
 
446
+ _checkSiblingSortableCells(c) {
447
+ const hasColSortButton = c.querySelector('d2l-table-col-sort-button');
448
+ if (!hasColSortButton) return;
449
+ c.classList.toggle('d2l-table-header-col-sortable', true);
450
+ c.classList.toggle('d2l-table-header-col-sortable-siblings', c.childElementCount > 1);
451
+
452
+ const hasSorted = c.querySelector('d2l-table-col-sort-button:not([nosort])');
453
+ c.classList.toggle('d2l-table-header-col-sortable-no-sorted', !hasSorted);
454
+ }
455
+
383
456
  _getItemByIndex(index) {
384
457
  return this._getItems()[index];
385
458
  }
@@ -498,11 +571,15 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
498
571
  for (let i = 0; i < firstRowHead.cells.length; i++) {
499
572
  const headCell = firstRowHead.cells[i];
500
573
  const bodyCell = firstRowBody.cells[i];
574
+ const bodyStyle = getComputedStyle(bodyCell);
575
+ const headStyle = getComputedStyle(headCell);
501
576
 
502
577
  if (headCell.clientWidth > bodyCell.clientWidth) {
503
- bodyCell.style.minWidth = getComputedStyle(headCell).width;
578
+ const headOverallWidth = parseFloat(headStyle.width) + parseFloat(headStyle.paddingLeft) + parseFloat(headStyle.paddingRight);
579
+ bodyCell.style.minWidth = `${headOverallWidth - parseFloat(bodyStyle.paddingLeft) - parseFloat(bodyStyle.paddingRight)}px`;
504
580
  } else if (headCell.clientWidth < bodyCell.clientWidth) {
505
- headCell.style.minWidth = getComputedStyle(bodyCell).width;
581
+ const bodyOverallWidth = parseFloat(bodyStyle.width) + parseFloat(bodyStyle.paddingLeft) + parseFloat(bodyStyle.paddingRight);
582
+ headCell.style.minWidth = `${bodyOverallWidth - parseFloat(headStyle.paddingLeft) - parseFloat(headStyle.paddingRight)}px`;
506
583
  }
507
584
  }
508
585
  }
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.1",
3
+ "version": "3.1.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",