@brightspace-ui/core 3.0.0 → 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.
Files changed (11) hide show
  1. package/components/dropdown/demo/dropdown.html +13 -1
  2. package/components/dropdown/dropdown-content-mixin.js +19 -6
  3. package/components/dropdown/dropdown-content-styles.js +15 -2
  4. package/components/table/demo/table-test.js +14 -2
  5. package/components/table/demo/table.html +2 -2
  6. package/components/table/table-col-sort-button.js +19 -4
  7. package/components/table/table-wrapper.js +102 -12
  8. package/custom-elements.json +11 -0
  9. package/helpers/README.md +14 -0
  10. package/helpers/visualReady.js +3 -0
  11. package/package.json +2 -2
package/components/dropdown/demo/dropdown.html CHANGED
@@ -200,8 +200,20 @@
200
200
  </d2l-dropdown>
201
201
  </template>
202
202
  </d2l-demo-snippet>
203
+
204
+ <h2>Generic Dropdown, wide opener with brief content, end align</h2>
205
+ <d2l-demo-snippet>
206
+ <template>
207
+ <d2l-dropdown>
208
+ <d2l-button class="d2l-dropdown-opener">Lorem ipsum dolor sit amet consectetur adipiscing elit</d2l-button>
209
+ <d2l-dropdown-content align="end">
210
+ <p>Content</p>
211
+ </d2l-dropdown-content>
212
+ </d2l-dropdown>
213
+ </template>
214
+ </d2l-demo-snippet>
203
215
  </d2l-demo-page>
204
216
 
205
217
  </body>
206
218
 
207
- </html>
219
+ </html>
package/components/dropdown/dropdown-content-mixin.js CHANGED
@@ -10,6 +10,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
10
10
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
11
11
  import { styleMap } from 'lit/directives/style-map.js';
12
12
  import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
13
+ import { visualReady } from '../../helpers/visualReady.js';
13
14
 
14
15
  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
15
16
  const minBackdropHeightMobile = 42;
@@ -320,6 +321,11 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
320
321
  this.addEventListener('d2l-dropdown-position', this.__toggleScrollStyles);
321
322
  }
322
323
 
324
+ async getUpdateComplete() {
325
+ await super.getUpdateComplete();
326
+ await visualReady;
327
+ }
328
+
323
329
  updated(changedProperties) {
324
330
  changedProperties.forEach((_, propName) => {
325
331
  if (propName === 'verticalOffset') {
@@ -682,8 +688,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
682
688
  this.openedAbove = this._getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired);
683
689
  }
684
690
 
685
- const centerDelta = contentRect.width - targetRect.width;
686
- const position = this._getPosition(spaceAround, centerDelta);
691
+ const position = this._getPosition(spaceAround, targetRect.width, contentRect.width);
687
692
  if (position !== null) {
688
693
  this._position = position;
689
694
  }
@@ -973,13 +978,13 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
973
978
  return false;
974
979
  }
975
980
 
976
- _getPosition(spaceAround, centerDelta) {
977
-
981
+ _getPosition(spaceAround, targetWidth, contentWidth) {
982
+ const centerDelta = contentWidth - targetWidth;
978
983
  const contentXAdjustment = centerDelta / 2;
979
- if (centerDelta <= 0) {
984
+ if (!this.align && centerDelta <= 0) {
980
985
  return contentXAdjustment * -1;
981
986
  }
982
- if (spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
987
+ if (!this.align && spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
983
988
  // center with target
984
989
  return contentXAdjustment * -1;
985
990
  }
@@ -1001,6 +1006,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
1001
1006
  return spaceAround.right * -1;
1002
1007
  }
1003
1008
  }
1009
+ if (this.align === 'start' || this.align === 'end') {
1010
+ const shift = Math.min((targetWidth / 2) - (20 + 16 / 2), 0); // 20 ~= 1rem, 16 = pointer size
1011
+ if (this.align === 'start') {
1012
+ return shift;
1013
+ } else {
1014
+ return targetWidth - contentWidth - shift;
1015
+ }
1016
+ }
1004
1017
  return null;
1005
1018
  }
1006
1019
 
package/components/dropdown/dropdown-content-styles.js CHANGED
@@ -1,6 +1,9 @@
1
1
  import '../colors/colors.js';
2
2
  import { css } from 'lit';
3
3
 
4
+ const pointerLength = 16;
5
+ const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
6
+
4
7
  export const dropdownContentStyles = css`
5
8
 
6
9
  :host {
@@ -61,16 +64,26 @@ export const dropdownContentStyles = css`
61
64
  top: -7px;
62
65
  z-index: 1;
63
66
  }
67
+ :host([align="start"]) .d2l-dropdown-content-pointer,
68
+ :host([align="end"][dir="rtl"]) .d2l-dropdown-content-pointer {
69
+ left: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
70
+ right: auto;
71
+ }
72
+ :host([align="end"]) .d2l-dropdown-content-pointer,
73
+ :host([align="start"][dir="rtl"]) .d2l-dropdown-content-pointer {
74
+ left: auto;
75
+ right: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
76
+ }
64
77
 
65
78
  .d2l-dropdown-content-pointer > div {
66
79
  background-color: var(--d2l-dropdown-background-color);
67
80
  border: 1px solid var(--d2l-dropdown-border-color);
68
81
  border-radius: 0.1rem;
69
82
  box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
70
- height: 16px;
83
+ height: ${pointerLength}px;
71
84
  -webkit-transform: rotate(45deg);
72
85
  transform: rotate(45deg);
73
- width: 16px;
86
+ width: ${pointerLength}px;
74
87
  }
75
88
 
76
89
  :host([opened-above]) .d2l-dropdown-content-pointer {
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,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
  }
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,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
- margin: 0;
47
- padding: 0;
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
- text-decoration: underline;
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
 
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,53 @@ 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
+ 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: 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;
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
- bodyCell.style.minWidth = getComputedStyle(headCell).width;
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
- headCell.style.minWidth = getComputedStyle(bodyCell).width;
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/helpers/README.md CHANGED
@@ -280,3 +280,17 @@ import '@brightspace-ui/core/helpers/viewport-size.js';
280
280
  min-width: calc(var(--d2l-vw, 1vw) * 100);
281
281
  }
282
282
  ```
283
+
284
+ ## Visual Ready
285
+
286
+ A helper for determining that the page is visually "ready" (i.e., necessary pieces are loaded) and calculations can be done. Currently it handles waiting for fonts to be ready, but going forward it can have other pieces added as needed. This is useful in places like the tooltip, where the fonts being loaded has an impact on the tooltip position calculation.
287
+
288
+ Example usage within a component:
289
+ ```javascript
290
+ import { visualReady } from '../../helpers/visualReady.js';
291
+
292
+ async getUpdateComplete() {
293
+ await super.getUpdateComplete();
294
+ await visualReady;
295
+ }
296
+ ```
package/helpers/visualReady.js ADDED
@@ -0,0 +1,3 @@
1
+ [...document.fonts].forEach(font => font.load());
2
+
3
+ export const visualReady = Promise.all([document.fonts.ready]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.0.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",
@@ -51,7 +51,7 @@
51
51
  "@rollup/plugin-dynamic-import-vars": "^2",
52
52
  "@rollup/plugin-node-resolve": "^15",
53
53
  "@rollup/plugin-replace": "^5",
54
- "@web/dev-server": "^0.2",
54
+ "@web/dev-server": "^0.4",
55
55
  "chalk": "^5",
56
56
  "eslint": "^8",
57
57
  "eslint-config-brightspace": "^1",