@brightspace-ui/core 2.183.0 → 2.184.0

package/components/table/demo/table-test.js

@@ -99,7 +99,8 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 					<tbody>
 						<tr class="d2l-table-header">
 							<th scope="col" sticky></th>
-							${thText.map(text => html`<th scope="col">${text}</th>`)}
+							${this._renderSortButton('Avocado')}
+							${fruits.map(fruit => this._renderSortButton(fruit))}
 						</tr>
 						<tr header>
 							<th scope="col" sticky></th>

package/components/table/table-col-sort-button.js

@@ -37,15 +37,19 @@ export class TableColSortButton extends FocusMixin(LitElement) {
 				align-items: center;
 				background-color: transparent;
 				border: none;
+				box-sizing: border-box;
 				color: inherit;
 				cursor: pointer;
 				display: inline-flex;
 				font-family: inherit;
 				font-size: inherit;
+				height: var(--d2l-sortable-button-height);
 				letter-spacing: inherit;
+				line-height: 0.9rem;
 				margin: 0;
-				padding: 0;
+				padding: var(--d2l-table-cell-padding);
 				text-decoration: none;
+				width: var(--d2l-sortable-button-width);
 			}
 			button::-moz-focus-inner {
 				border: 0;
@@ -53,14 +57,27 @@ export class TableColSortButton extends FocusMixin(LitElement) {
 			button:disabled {
 				opacity: 0.5;
 			}
-			button:hover {
-				text-decoration: underline;
-			}
 			button:focus-visible,
 			button:${unsafeCSS(getFocusPseudoClass())} {
-				border-radius: 0.2rem;
+				border-radius: var(--d2l-sortable-button-border-focus-radius);
 				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
+				height: calc(100% - 8px);
+				margin-inline-start: 4px; /* Used to offset the outer box shadow */
 				outline-style: none;
+				padding-inline-start: calc(var(--d2l-table-cell-padding) - 4px);
+				width: calc(100% - 8px);
+			}
+			button:focus-visible:hover,
+			button:${unsafeCSS(getFocusPseudoClass())}:hover {
+				border-radius: var(--d2l-sortable-button-border-focus-radius);
+			}
+			button:hover {
+				background-color: var(--d2l-color-gypsum);
+				border-radius: var(--d2l-sortable-button-border-radius);
+			}
+			d2l-icon {
+				margin-inline-end: -12px;
+				margin-inline-start: 12px;
 			}
 		`;
 	}
@@ -79,6 +96,7 @@ export class TableColSortButton extends FocusMixin(LitElement) {
 		const iconView = !this.nosort ?
 			html`<d2l-icon icon="${this.desc ? 'tier1:arrow-toggle-down' : 'tier1:arrow-toggle-up'}"></d2l-icon>` :
 			null;
+
 		return html`<button type="button"><slot></slot>${iconView}</button>`;
 	}
 

package/components/table/table-wrapper.js

@@ -32,6 +32,9 @@ export const tableStyles = css`
 	d2l-table-wrapper[dir="rtl"] .d2l-table > * > tr > * {
 		text-align: right;
 	}
+	th.d2l-table-header-col-sortable {
+		padding: 0;
+	}
 
 	/* default cells */
 	d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > * > tr > *,
@@ -57,9 +60,8 @@ export const tableStyles = css`
 	d2l-table-wrapper[type="default"] .d2l-table > thead > tr > th,
 	d2l-table-wrapper[type="default"] .d2l-table > * > tr.d2l-table-header > th,
 	d2l-table-wrapper[type="default"] .d2l-table > * > tr[header] > th {
-		height: 27px; /* min-height to be 48px including border */
+		height: 17px; /* min-height to be 48px including border */
 	}
-
 	/* border radiuses */
 	d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-first > .d2l-table-cell-first,
 	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
 				--d2l-table-border-color: var(--d2l-color-mica);
 				--d2l-table-border-radius: 0.3rem;
 				--d2l-table-border-radius-sticky-offset: calc(1px - var(--d2l-table-border-radius));
-				--d2l-table-cell-height: 41px; /* min-height to be 62px including border */
-				--d2l-table-cell-padding: 0.5rem 1rem;
-				--d2l-table-cell-padding-alt: calc(0.5rem - 1px) 1rem 0.5rem 1rem;
+				--d2l-table-cell-height: 31px; /* min-height to be 62px including border */
+				--d2l-table-cell-padding: 0.75rem;
+				--d2l-table-cell-padding-alt: calc(0.75rem - 1px) 0.75rem 0.75rem 0.75rem;
 				--d2l-table-header-background-color: var(--d2l-color-regolith);
 				--d2l-table-row-border-color-selected: var(--d2l-color-celestine);
 				--d2l-table-row-background-color-selected: var(--d2l-color-celestine-plus-2);
+				--d2l-sortable-button-border-radius: 0;
+				--d2l-sortable-button-border-focus-radius: 0;
+				--d2l-sortable-button-height: 100%;
+				--d2l-sortable-button-width: 100%;
 				display: block;
 				width: 100%;
 			}
@@ -257,11 +263,13 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 			:host([type="light"]) {
 				--d2l-table-border-radius: 0rem; /* stylelint-disable-line length-zero-no-unit */
 				--d2l-table-border-radius-sticky-offset: 0rem; /* stylelint-disable-line length-zero-no-unit */
-				--d2l-table-cell-height: 1.15rem; /* min-height to be 48px including border */
-				--d2l-table-cell-padding: 0.6rem;
-				--d2l-table-cell-padding-alt: calc(0.6rem - 1px) 0.6rem 0.6rem 0.6rem;
+				--d2l-table-cell-height: 17px; /* min-height to be 48px including border */
 				--d2l-table-border-color: var(--d2l-color-gypsum);
 				--d2l-table-header-background-color: #ffffff;
+				--d2l-sortable-button-border-radius: 0.2rem;
+				--d2l-sortable-button-border-focus-radius: 0.3rem;
+				--d2l-sortable-button-height: calc(100% - 8px);
+				--d2l-sortable-button-width: calc(100% - 8px);
 			}
 			:host([sticky-headers]) {
 				--d2l-table-controls-shadow-display: none;
@@ -368,6 +376,10 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 			r.classList.toggle('d2l-table-selected-first', firstNonHeaderRow && isSelected);
 
 			Array.from(r.cells).forEach((c, index) => {
+				if (isHeader) {
+					const isSortableCell = Array.from(c.childNodes).some((element) => element.localName === 'd2l-table-col-sort-button');
+					c.classList.toggle('d2l-table-header-col-sortable', isSortableCell);
+				}
 				c.classList.toggle('d2l-table-cell-first', index === 0 && skipFirst === 0);
 				if (index === 0 && skipFirst === 0 && c.hasAttribute('rowspan')) {
 					skipFirst = parseInt(c.getAttribute('rowspan'));

package/components/tooltip/tooltip.js

@@ -998,7 +998,7 @@ class Tooltip extends RtlMixin(LitElement) {
 			await clone.updateComplete;
 		}
 
-		this._truncating = clone.scrollWidth > target.offsetWidth;
+		this._truncating = (clone.scrollWidth - target.offsetWidth) > 2; // Safari adds 1px to scrollWidth necessitating a subtraction comparison.
 		this._resizeRunSinceTruncationCheck = false;
 		target.removeChild(cloneContainer);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.183.0",
+  "version": "2.184.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",