@brightspace-ui/core 2.183.1 → 2.184.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.
Files changed (4) hide show
  1. package/components/table/demo/table-test.js +2 -1
  2. package/components/table/table-col-sort-button.js +23 -5
  3. package/components/table/table-wrapper.js +20 -8
  4. package/package.json +1 -1
package/components/table/demo/table-test.js CHANGED
@@ -99,7 +99,8 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
99
99
  <tbody>
100
100
  <tr class="d2l-table-header">
101
101
  <th scope="col" sticky></th>
102
- ${thText.map(text => html`<th scope="col">${text}</th>`)}
102
+ ${this._renderSortButton('Avocado')}
103
+ ${fruits.map(fruit => this._renderSortButton(fruit))}
103
104
  </tr>
104
105
  <tr header>
105
106
  <th scope="col" sticky></th>
package/components/table/table-col-sort-button.js CHANGED
@@ -37,15 +37,19 @@ export class TableColSortButton extends FocusMixin(LitElement) {
37
37
  align-items: center;
38
38
  background-color: transparent;
39
39
  border: none;
40
+ box-sizing: border-box;
40
41
  color: inherit;
41
42
  cursor: pointer;
42
43
  display: inline-flex;
43
44
  font-family: inherit;
44
45
  font-size: inherit;
46
+ height: var(--d2l-sortable-button-height);
45
47
  letter-spacing: inherit;
48
+ line-height: 0.9rem;
46
49
  margin: 0;
47
- padding: 0;
50
+ padding: var(--d2l-table-cell-padding);
48
51
  text-decoration: none;
52
+ width: var(--d2l-sortable-button-width);
49
53
  }
50
54
  button::-moz-focus-inner {
51
55
  border: 0;
@@ -53,14 +57,27 @@ export class TableColSortButton extends FocusMixin(LitElement) {
53
57
  button:disabled {
54
58
  opacity: 0.5;
55
59
  }
56
- button:hover {
57
- text-decoration: underline;
58
- }
59
60
  button:focus-visible,
60
61
  button:${unsafeCSS(getFocusPseudoClass())} {
61
- border-radius: 0.2rem;
62
+ border-radius: var(--d2l-sortable-button-border-focus-radius);
62
63
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
64
+ height: calc(100% - 8px);
65
+ margin-inline-start: 4px; /* Used to offset the outer box shadow */
63
66
  outline-style: none;
67
+ padding-inline-start: calc(var(--d2l-table-cell-padding) - 4px);
68
+ width: calc(100% - 8px);
69
+ }
70
+ button:focus-visible:hover,
71
+ button:${unsafeCSS(getFocusPseudoClass())}:hover {
72
+ border-radius: var(--d2l-sortable-button-border-focus-radius);
73
+ }
74
+ button:hover {
75
+ background-color: var(--d2l-color-gypsum);
76
+ border-radius: var(--d2l-sortable-button-border-radius);
77
+ }
78
+ d2l-icon {
79
+ margin-inline-end: -12px;
80
+ margin-inline-start: 12px;
64
81
  }
65
82
  `;
66
83
  }
@@ -79,6 +96,7 @@ export class TableColSortButton extends FocusMixin(LitElement) {
79
96
  const iconView = !this.nosort ?
80
97
  html`<d2l-icon icon="${this.desc ? 'tier1:arrow-toggle-down' : 'tier1:arrow-toggle-up'}"></d2l-icon>` :
81
98
  null;
99
+
82
100
  return html`<button type="button"><slot></slot>${iconView}</button>`;
83
101
  }
84
102
 
package/components/table/table-wrapper.js CHANGED
@@ -32,6 +32,9 @@ export const tableStyles = css`
32
32
  d2l-table-wrapper[dir="rtl"] .d2l-table > * > tr > * {
33
33
  text-align: right;
34
34
  }
35
+ th.d2l-table-header-col-sortable {
36
+ padding: 0;
37
+ }
35
38
 
36
39
  /* default cells */
37
40
  d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > * > tr > *,
@@ -57,9 +60,8 @@ export const tableStyles = css`
57
60
  d2l-table-wrapper[type="default"] .d2l-table > thead > tr > th,
58
61
  d2l-table-wrapper[type="default"] .d2l-table > * > tr.d2l-table-header > th,
59
62
  d2l-table-wrapper[type="default"] .d2l-table > * > tr[header] > th {
60
- height: 27px; /* min-height to be 48px including border */
63
+ height: 17px; /* min-height to be 48px including border */
61
64
  }
62
-
63
65
  /* border radiuses */
64
66
  d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-first > .d2l-table-cell-first,
65
67
  d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-first > .d2l-table-cell-last {
@@ -242,12 +244,16 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
242
244
  --d2l-table-border-color: var(--d2l-color-mica);
243
245
  --d2l-table-border-radius: 0.3rem;
244
246
  --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;
247
+ --d2l-table-cell-height: 31px; /* min-height to be 62px including border */
248
+ --d2l-table-cell-padding: 0.75rem;
249
+ --d2l-table-cell-padding-alt: calc(0.75rem - 1px) 0.75rem 0.75rem 0.75rem;
248
250
  --d2l-table-header-background-color: var(--d2l-color-regolith);
249
251
  --d2l-table-row-border-color-selected: var(--d2l-color-celestine);
250
252
  --d2l-table-row-background-color-selected: var(--d2l-color-celestine-plus-2);
253
+ --d2l-sortable-button-border-radius: 0;
254
+ --d2l-sortable-button-border-focus-radius: 0;
255
+ --d2l-sortable-button-height: 100%;
256
+ --d2l-sortable-button-width: 100%;
251
257
  display: block;
252
258
  width: 100%;
253
259
  }
@@ -257,11 +263,13 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
257
263
  :host([type="light"]) {
258
264
  --d2l-table-border-radius: 0rem; /* stylelint-disable-line length-zero-no-unit */
259
265
  --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;
266
+ --d2l-table-cell-height: 17px; /* min-height to be 48px including border */
263
267
  --d2l-table-border-color: var(--d2l-color-gypsum);
264
268
  --d2l-table-header-background-color: #ffffff;
269
+ --d2l-sortable-button-border-radius: 0.2rem;
270
+ --d2l-sortable-button-border-focus-radius: 0.3rem;
271
+ --d2l-sortable-button-height: calc(100% - 8px);
272
+ --d2l-sortable-button-width: calc(100% - 8px);
265
273
  }
266
274
  :host([sticky-headers]) {
267
275
  --d2l-table-controls-shadow-display: none;
@@ -368,6 +376,10 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
368
376
  r.classList.toggle('d2l-table-selected-first', firstNonHeaderRow && isSelected);
369
377
 
370
378
  Array.from(r.cells).forEach((c, index) => {
379
+ if (isHeader) {
380
+ const isSortableCell = Array.from(c.childNodes).some((element) => element.localName === 'd2l-table-col-sort-button');
381
+ c.classList.toggle('d2l-table-header-col-sortable', isSortableCell);
382
+ }
371
383
  c.classList.toggle('d2l-table-cell-first', index === 0 && skipFirst === 0);
372
384
  if (index === 0 && skipFirst === 0 && c.hasAttribute('rowspan')) {
373
385
  skipFirst = parseInt(c.getAttribute('rowspan'));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.183.1",
3
+ "version": "2.184.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",