@brightspace-ui/core 2.135.0 → 2.137.0

package/components/collapsible-panel/collapsible-panel-summary-item.js

@@ -49,6 +49,7 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 	constructor() {
 		super();
 		this.text = '';
+		this.lines = 0;
 	}
 
 	render() {

package/components/inputs/input-text.js

@@ -329,17 +329,21 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		if (this.hasAttribute('aria-label')) {
 			this.labelRequired = false;
 		}
+		this.addEventListener('mouseover', this._handleMouseEnter);
+		this.addEventListener('mouseout', this._handleMouseLeave);
+		this.addEventListener('click', this._handleClick);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
 		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
+		this.removeEventListener('mouseover', this._handleMouseEnter);
+		this.removeEventListener('mouseout', this._handleMouseLeave);
+		this.removeEventListener('click', this._handleClick);
 		if (!container) return;
 		container.removeEventListener('blur', this._handleBlur, true);
 		container.removeEventListener('focus', this._handleFocus, true);
-		container.removeEventListener('mouseover', this._handleMouseEnter);
-		container.removeEventListener('mouseout', this._handleMouseLeave);
 	}
 
 	firstUpdated(changedProperties) {
@@ -352,8 +356,6 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		if (!container) return;
 		container.addEventListener('blur', this._handleBlur, true);
 		container.addEventListener('focus', this._handleFocus, true);
-		container.addEventListener('mouseover', this._handleMouseEnter);
-		container.addEventListener('mouseout', this._handleMouseLeave);
 
 		// if initially hidden then update layout when it becomes visible
 		if (typeof(IntersectionObserver) === 'function') {
@@ -542,6 +544,12 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		));
 	}
 
+	_handleClick(e) {
+		const input = this.shadowRoot?.querySelector('.d2l-input');
+		if (!input || e.composedPath()[0] !== this) return;
+		input.focus();
+	}
+
 	_handleFocus() {
 		this._focused = true;
 	}

package/components/inputs/input-textarea.js

@@ -1,5 +1,6 @@
 import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
@@ -86,7 +87,8 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 			 * Value of the input
 			 * @type {string}
 			 */
-			value: { type: String }
+			value: { type: String },
+			_hovered: { state: true }
 		};
 	}
 
@@ -157,6 +159,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		this.value = '';
 
 		this._descriptionId = getUniqueId();
+		this._hovered = false;
 		this._textareaId = getUniqueId();
 	}
 
@@ -192,6 +195,16 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		if (this.hasAttribute('aria-label')) {
 			this.labelRequired = false;
 		}
+		this.addEventListener('mouseover', this._handleMouseEnter);
+		this.addEventListener('mouseout', this._handleMouseLeave);
+		this.addEventListener('click', this._handleClick);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('mouseover', this._handleMouseEnter);
+		this.removeEventListener('mouseout', this._handleMouseLeave);
+		this.removeEventListener('click', this._handleClick);
 	}
 
 	render() {
@@ -211,6 +224,11 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		if (this.rows > 0) mirrorStyles.minHeight = `calc(${this.rows + 1}rem + 2px)`;
 		if (this.maxRows > 0) mirrorStyles.maxHeight = `calc(${this.maxRows + 1}rem + 2px)`;
 
+		const inputClasses = {
+			'd2l-input': true,
+			'd2l-input-focus': !this.disabled && this._hovered
+		};
+
 		const textarea = html`
 			<div class="d2l-input-textarea-container d2l-skeletize">
 				<div class="d2l-input d2l-input-textarea-mirror" style="${styleMap(mirrorStyles)}" aria-invalid="${ifDefined(ariaInvalid)}">
@@ -222,7 +240,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 					aria-required="${ifDefined(ariaRequired)}"
 					@blur="${this._handleBlur}"
 					@change="${this._handleChange}"
-					class="d2l-input"
+					class=${classMap(inputClasses)}
 					?disabled="${disabled}"
 					id="${this._textareaId}"
 					@input="${this._handleInput}"
@@ -307,6 +325,12 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		));
 	}
 
+	_handleClick(e) {
+		const input = this.shadowRoot && this.shadowRoot.querySelector('textarea');
+		if (!input || e.composedPath()[0] !== this) return;
+		input.focus();
+	}
+
 	_handleInput(e) {
 		this.value = e.target.value;
 		return true;
@@ -316,6 +340,14 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		e.preventDefault();
 	}
 
+	_handleMouseEnter() {
+		this._hovered = true;
+	}
+
+	_handleMouseLeave() {
+		this._hovered = false;
+	}
+
 }
 
 customElements.define('d2l-input-textarea', InputTextArea);

package/components/link/README.md

@@ -51,6 +51,7 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
 | `aria-label` | String | Sets an accessible label |
 | `download` | Boolean | Download a URL instead of navigating to it |
 | `main` | Boolean | Whether to apply the "main" link style |
+| `lines` | Number | The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified. |
 | `small` | Boolean | Whether to apply the "small" link style |
 | `target` | String | Where to display the linked URL |
 <!-- docs: end hidden content -->

package/components/link/demo/link.html

@@ -15,6 +15,9 @@
 				max-width: 400px;
 				padding: 0.6rem;
 			}
+			.block {
+				display: block;
+			}
 		</style>
 	</head>
 	<body unresolved>
@@ -48,11 +51,29 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Overflow-Ellipsis</h2>
+			<h2>Block Wrap</h2>
+			<d2l-demo-snippet>
+				<template>
+					<div class="truncate-container">
+						<d2l-link class="block" href="https://www.d2l.com">A really long link that will wrap in its container to the next line.</d2l-link>
+					</div>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Clamp - One Line</h2>
+			<d2l-demo-snippet>
+				<template>
+					<div class="truncate-container">
+						<d2l-link href="https://www.d2l.com" lines="1">A really long link that will overflow its container and display an ellipsis.</d2l-link>
+					</div>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Clamp - Two Lines</h2>
 			<d2l-demo-snippet>
 				<template>
 					<div class="truncate-container">
-						<d2l-link href="https://www.d2l.com" overflow-ellipsis>A really long link that will overflow its container.</d2l-link>
+						<d2l-link href="https://www.d2l.com" lines="2">A really really long link that wraps in its container and then truncates after two lines of text like this.</d2l-link>
 					</div>
 				</template>
 			</d2l-demo-snippet>

package/components/link/link.js

@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 export const linkStyles = css`
 	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
@@ -74,10 +75,10 @@ class Link extends FocusMixin(LitElement) {
 			 */
 			main: { type: Boolean, reflect: true },
 			/**
-			 * Whether to truncate the link with ellipsis
-			 * @type {boolean}
+			 * The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.
+			 * @type {number}
 			 */
-			overflowEllipsis: { type: Boolean, attribute: 'overflow-ellipsis', reflect: true },
+			lines: { type: Number },
 			/**
 			 * Whether to apply the "small" link style
 			 * @type {boolean}
@@ -105,16 +106,14 @@ class Link extends FocusMixin(LitElement) {
 					font-size: 0.7rem;
 					line-height: 1.05rem;
 				}
-				:host([overflow-ellipsis]) {
-					display: inline-block;
-					max-width: 100%;
+				a {
+					display: inherit;
 				}
-				:host([overflow-ellipsis]) .d2l-link {
-					display: inline-block;
-					max-width: 100%;
+				a.truncate {
+					-webkit-box-orient: vertical;
+					display: -webkit-box;
 					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
+					overflow-wrap: anywhere;
 				}
 			`
 		];
@@ -125,6 +124,7 @@ class Link extends FocusMixin(LitElement) {
 		this.download = false;
 		this.main = false;
 		this.small = false;
+		this.lines = 0;
 	}
 
 	static get focusElementSelector() {
@@ -135,11 +135,14 @@ class Link extends FocusMixin(LitElement) {
 		const linkClasses = {
 			'd2l-link': true,
 			'd2l-link-main': this.main,
-			'd2l-link-small': this.small
+			'd2l-link-small': this.small,
+			'truncate': this.lines > 0
 		};
+		const styles = (this.lines > 0) ? { '-webkit-line-clamp': this.lines } : {};
 		return html`<a
 				aria-label="${ifDefined(this.ariaLabel)}"
 				class="${classMap(linkClasses)}"
+				style="${styleMap(styles)}"
 				?download="${this.download}"
 				href="${ifDefined(this.href)}"
 				target="${ifDefined(this.target)}"><slot></slot></a>`;

package/components/tooltip/demo/tooltip.html

@@ -56,6 +56,10 @@
 			white-space: nowrap;
 		}
 
+		.truncated d2l-link {
+			display: flex;
+		}
+
 		.dark-background {
 			background-color: black;
 			padding: 20px;
@@ -159,11 +163,11 @@
 					<d2l-tooltip for="tooltip-long" show-truncated-only>
 						Very Very Very Very Long Tooltip - this tooltip will show because the text is truncating.
 					</d2l-tooltip>
-					<d2l-link id="link-short" href="https://www.d2l.com" overflow-ellipsis>Short Text</d2l-link>
+					<d2l-link id="link-short" href="https://www.d2l.com" lines="1">Short Text</d2l-link>
 					<d2l-tooltip for="link-short" show-truncated-only>
 						This tooltip will not show.
 					</d2l-tooltip>
-					<d2l-link id="link-long" href="https://www.d2l.com" overflow-ellipsis>Very Very Very Very Long Text</d2l-link>
+					<d2l-link id="link-long" href="https://www.d2l.com" lines="1">Very Very Very Very Long Text</d2l-link>
 					<d2l-tooltip for="link-long" show-truncated-only>
 						Very Very Very Very Long Text - this tooltip will show because the text is truncating.
 					</d2l-tooltip>

package/components/tooltip/tooltip.js

@@ -976,6 +976,7 @@ class Tooltip extends RtlMixin(LitElement) {
 		const clone = target.cloneNode(true);
 		clone.removeAttribute('id');
 		clone.style.maxWidth = 'none';
+		clone.style.display = 'inline-block';
 
 		cloneContainer.appendChild(clone);
 		target.appendChild(cloneContainer);

package/custom-elements.json

@@ -1162,17 +1162,18 @@
       "path": "./components/collapsible-panel/collapsible-panel-summary-item.js",
       "description": "A component for a \"summary item\" child component that describes the content in a collapsible panel.",
       "attributes": [
-        {
-          "name": "lines",
-          "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.",
-          "type": "number"
-        },
         {
           "name": "text",
           "description": "REQUIRED: Text that is displayed",
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -1181,12 +1182,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "lines",
-          "attribute": "lines",
-          "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.",
-          "type": "number"
-        },
         {
           "name": "text",
           "attribute": "text",
@@ -1194,6 +1189,13 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "lines",
+          "attribute": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.",
+          "type": "number",
+          "default": "0"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -7591,11 +7593,6 @@
           "description": "REQUIRED: URL or URL fragment of the link",
           "type": "string"
         },
-        {
-          "name": "overflow-ellipsis",
-          "description": "Whether to truncate the link with ellipsis",
-          "type": "boolean"
-        },
         {
           "name": "target",
           "description": "Where to display the linked URL",
@@ -7618,6 +7615,12 @@
           "description": "Whether to apply the \"small\" link style",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.",
+          "type": "number",
+          "default": "0"
         }
       ],
       "properties": [
@@ -7633,12 +7636,6 @@
           "description": "REQUIRED: URL or URL fragment of the link",
           "type": "string"
         },
-        {
-          "name": "overflowEllipsis",
-          "attribute": "overflow-ellipsis",
-          "description": "Whether to truncate the link with ellipsis",
-          "type": "boolean"
-        },
         {
           "name": "target",
           "attribute": "target",
@@ -7665,6 +7662,13 @@
           "description": "Whether to apply the \"small\" link style",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "lines",
+          "attribute": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.",
+          "type": "number",
+          "default": "0"
         }
       ],
       "slots": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.135.0",
+  "version": "2.137.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -19,9 +19,9 @@
     "lint:style": "stylelint \"**/*.{js,html}\" --ignore-path .gitignore",
     "start": "web-dev-server --node-resolve --watch --open",
     "test": "npm run lint && npm run test:translations && npm run test:headless && npm run test:axe",
-    "test:axe": "web-test-runner --group aXe",
-    "test:headless": "web-test-runner --group unit",
-    "test:headless:watch": "web-test-runner --group unit --watch",
+    "test:axe": "d2l-test-runner aXe",
+    "test:headless": "d2l-test-runner",
+    "test:headless:watch": "d2l-test-runner --watch",
     "test:translations": "mfv -e -s en -p ./lang/ -i untranslated"
   },
   "files": [
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.15",
+    "@brightspace-ui/testing": "^0.18",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",