@brightspace-ui/core 1.222.0 → 1.223.0

package/components/card/card-footer-link.js

@@ -76,19 +76,11 @@ class CardFooterLink extends RtlMixin(LitElement) {
 		return [offscreenStyles, css`
 			:host {
 				display: inline-block;
-				left: 0.15rem;
-				margin-right: 0.3rem;
 				position: relative;
 			}
 			:host[hidden] {
 				display: none;
 			}
-			:host([dir="rtl"]) {
-				left: auto;
-				margin-left: 0.3rem;
-				margin-right: 0;
-				right: 0.15rem;
-			}
 			a {
 				box-sizing: border-box;
 				display: inline-block;
@@ -99,13 +91,6 @@ class CardFooterLink extends RtlMixin(LitElement) {
 			d2l-count-badge-icon {
 				text-align: initial;
 			}
-			::slotted(d2l-tooltip) {
-				left: calc(-50% + 11px) !important;
-			}
-			:host([dir="rtl"]) ::slotted(d2l-tooltip) {
-				left: 0;
-				right: calc(-50% + 11px) !important;
-			}
 		`];
 	}
 

package/components/count-badge/count-badge-icon.js

@@ -29,27 +29,24 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 			outline: none;
 		}
 
-		.d2l-count-badge-wrapper {
-			display: inline-block;
-		}
-
 		:host {
-			padding-right: var(--d2l-count-badge-icon-padding);
-		}
-
-		:host([dir="rtl"]) {
-			padding-left: var(--d2l-count-badge-icon-padding);
-			padding-right: 0;
+			/* for long numbers, center the number on the icon */
+			--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
+			display: inline-block;
+			/* symmetrical padding to prevent overflows for most numbers */
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+			position: relative;
 		}
 
 		:host([size="large"]) {
-			--d2l-count-badge-icon-padding: calc(var(--d2l-count-badge-icon-height) - 0.7rem);
-			margin-top: -0.7rem;
+			--d2l-count-badge-icon-padding-top: 0.7rem;
+			padding-top: var(--d2l-count-badge-icon-padding-top);
 		}
 
 		:host([size="small"]) {
-			--d2l-count-badge-icon-padding: calc(var(--d2l-count-badge-icon-height) - 0.55rem);
-			margin-top: -0.55rem;
+			--d2l-count-badge-icon-padding-top: 0.55rem;
+			padding-top: var(--d2l-count-badge-icon-padding-top);
 		}
 
 		:host([icon*="tier1:"]) {
@@ -63,7 +60,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 		}
 
 		d2l-tooltip[_open-dir="top"] {
-			margin-top: -0.6rem;
+			margin-top: calc(0px - var(--d2l-count-badge-icon-padding-top));
 		}
 
 		d2l-icon {
@@ -79,15 +76,30 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 	}
 
 	render() {
-		const numberPadding = this.size === 'small' ? '0.55rem' : '0.7rem';
-		const numberStyles = {
+		let numberStyles = {
 			border: '2px solid white',
-			position: 'relative',
-			left: this.dir === 'rtl' ? 0 : 'var(--d2l-count-badge-icon-padding)',
-			right: this.dir === 'rtl' ? 'var(--d2l-count-badge-icon-padding)' : 0,
-			top: numberPadding,
-			visibility: this.skeleton ? 'hidden' : undefined
+			position: 'absolute',
+			visibility: this.skeleton ? 'hidden' : undefined,
 		};
+
+		// center long number strings to prevent overflow
+		const centerNumber = this.getNumberString().length >= 4;
+
+		if (centerNumber) {
+			const xPadding = 'var(--d2l-count-badge-icon-padding)';
+			numberStyles = {
+				... numberStyles,
+				transform: this.dir === 'rtl'
+					? `translateY(-50%) translateX(calc(0px - ${xPadding}))`
+					: `translateY(-50%) translateX(${xPadding})`
+			};
+		} else {
+			numberStyles = {
+				... numberStyles,
+				[this.dir === 'rtl' ? 'left' : 'right'] : '-0.1rem',
+				transform: 'translateY(-50%)'
+			};
+		}
 		const tabbable = (this.tabStop || this.hasTooltip) && !this.skeleton;
 		const innerHtml = html`
 			${this.renderCount(numberStyles)}

package/components/list/demo/list-drag-and-drop.js

@@ -90,7 +90,7 @@ class ListDemoDragAndDrop extends LitElement {
 	render() {
 		const renderList = (items, nested) => {
 			return html`
-				<d2l-list grid slot="${ifDefined(nested ? 'nested' : undefined)}">
+				<d2l-list grid drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}">
 					${repeat(items, item => item.key, item => html`
 						<d2l-list-item
 							action-href="http://www.d2l.com"

package/components/list/list-item-drag-drop-mixin.js

@@ -1,3 +1,4 @@
+import './list-item-drag-image.js';
 import { css, html } from 'lit-element/lit-element.js';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
@@ -332,7 +333,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 					opacity: 1;
 				}
 			}
-		` ];
+		`];
 
 		super.styles && styles.unshift(super.styles);
 		return styles;
@@ -550,15 +551,26 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.dataTransfer.setData('text/plain', `${this.dropText}`);
 		}
 
-		if (this.shadowRoot) {
-			const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
-			e.dataTransfer.setDragImage(nodeImage, 50, 50);
-		}
-
 		const rootList = this._getRootList(this);
+		const selectionInfo = rootList.getSelectionInfo(rootList.dragMultiple);
+
+		if (rootList.dragMultiple && selectionInfo.keys.length > 1) {
+			let dragImage = this.shadowRoot.querySelector('d2l-list-item-drag-image');
+			if (!dragImage) {
+				dragImage = document.createElement('d2l-list-item-drag-image');
+				this.shadowRoot.appendChild(dragImage);
+			}
+			dragImage.count = selectionInfo.keys.length;
+			e.dataTransfer.setDragImage(dragImage, 24, 26);
+		} else {
+			if (this.shadowRoot) {
+				const nodeImage = this.shadowRoot.querySelector('.d2l-list-item-drag-image') || this;
+				e.dataTransfer.setDragImage(nodeImage, 50, 50);
+			}
+		}
 
 		// getSelectionInfo(false) is fast so we can quickly check the state
-		if (!rootList.dragMultiple || rootList.getSelectionInfo(false).state === SelectionInfo.states.none) {
+		if (!rootList.dragMultiple || selectionInfo.state === SelectionInfo.states.none) {
 			createDragState([this]);
 		} else {
 

package/components/list/list-item-drag-image.js

@@ -0,0 +1,123 @@
+import '../colors/colors.js';
+import '../inputs/input-checkbox.js';
+import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { bodySmallStyles } from '../typography/styles.js';
+import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+
+class ListItemDragImage extends SkeletonMixin(RtlMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			count: { type: Number }
+		};
+	}
+
+	static get styles() {
+		return [ super.styles, bodySmallStyles, css`
+			:host {
+				display: block;
+				height: 70px;
+				left: -10000px;
+				position: absolute;
+				width: 340px;
+				z-index: 0;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host([dir="rtl"]) {
+				left: 0;
+				right: -10000px;
+			}
+			.first, .second, .third {
+				background-color: white;
+				border: 1px solid var(--d2l-color-mica);
+				border-radius: 4px;
+				box-sizing: border-box;
+				height: 100%;
+				position: absolute;
+				width: 100%;
+			}
+			.first {
+				align-items: start;
+				display: flex;
+				padding: 16px 8px;
+			}
+			.second {
+				margin-inline-start: 6px;
+				margin-top: 6px;
+				z-index: -1;
+			}
+			.third {
+				margin-inline-start: 12px;
+				margin-top: 12px;
+				z-index: -2;
+			}
+			.text {
+				width: 100%;
+			}
+			.line-1 {
+				height: 24px;
+				margin-bottom: 4px;
+				width: 100%;
+			}
+			.line-2 {
+				height: 16px;
+				width: 25%;
+			}
+			d2l-input-checkbox {
+				line-height: 0;
+				margin: 0;
+				margin-inline-start: 16px;
+			}
+			.count {
+				background-color: var(--d2l-color-celestine);
+				border-radius: 0.7rem;
+				box-sizing: border-box;
+				color: white;
+				left: 26px;
+				min-width: 1.4rem;
+				padding: 0.2rem 0.4rem;
+				position: absolute;
+				text-align: center;
+				top: 30px;
+				z-index: 1000; /* must be higher than the skeleton z-index (999) */
+			}
+			:host([dir="rtl"]) .count {
+				left: 14px;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.count = 0;
+		this.skeleton = true;
+	}
+
+	render() {
+		return html`
+			<div class="first">
+				<div class="count d2l-body-small">${formatNumber(this.count)}</div>
+				<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+					<path fill="#494c4e" d="M8 16v1c0 .5-.4 1-1 1H6c-.6 0-1-.5-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M13 16v1c0 .5-.4 1-1 1h-1c-.6 0-1-.5-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M8 11v1c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M13 11v1c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1v-1c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M8 6v1c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M13 6v1c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h1c.6 0 1 .4 1 1M8 1v1c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1V1c0-.5.4-1 1-1h1c.6 0 1 .5 1 1M13 1v1c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1V1c0-.5.4-1 1-1h1c.6 0 1 .5 1 1"/>
+				</svg>
+				<d2l-input-checkbox disabled skeleton></d2l-input-checkbox>
+				<div class="text">
+					<div class="line-1 d2l-skeletize"></div>
+					<div class="line-2 d2l-skeletize"></div>
+				</div>
+			</div>
+			<div class="second"></div>
+			<div class="third"></div>
+		`;
+	}
+
+}
+
+customElements.define('d2l-list-item-drag-image', ListItemDragImage);

package/components/list/list.js

@@ -19,9 +19,8 @@ class List extends SelectionMixin(LitElement) {
 	static get properties() {
 		return {
 			/**
-			 * Not publicly available yet. Whether the user can drag multiple items
+			 * Whether the user can drag multiple items
 			 * @type {boolean}
- 			 * @ignore
  			 */
 			dragMultiple: { type: Boolean, reflect: true, attribute: 'drag-multiple' },
 			/**

package/components/meter/README.md

@@ -56,12 +56,11 @@ Linear meters show a horizontal progress bar.
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` Boolean: Shows a percentage instead of `value/max`.
-* `text-inline` Boolean: Keeps the meter to a single line.
-* `text` String: Context information about what the meter is about.
-	* `\{\%\}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
-	* **DEPRECATED** `{x}` in the string will be replaced with `value`
-	* **DEPRECATED** `{y}` in the string will be replaced with `max`
+* `text-inline` Boolean: Keeps the meter to a single line. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
+	* **DEPRECATED** `x` in the string will be replaced with `value`
+	* **DEPRECATED** `y` in the string will be replaced with `max`
 <!-- docs: end hidden content -->
 
 ## Radial meter [d2l-meter-radial]
@@ -89,9 +88,9 @@ Radial meters appear as a half circle. They have more visual weight than a line
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` (Boolean): Shows a percentage instead of `value/max`.
-* `text` (String): Context information about what the meter is about.
-	* `{%}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
+* `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
 <!-- docs: end hidden content -->
 
 
@@ -134,7 +133,7 @@ All `meter` components have a `foreground-light` style that ensures accessibl
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` (Boolean): Shows a percentage instead of `value/max`.
-* `text` (String): Context information about what the meter is about.
-	* `\{\%\}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
+* `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
 <!-- docs: end hidden content -->

package/custom-elements.json

@@ -6943,6 +6943,32 @@
         }
       ]
     },
+    {
+      "name": "d2l-list-item-drag-image",
+      "path": "./components/list/list-item-drag-image.js",
+      "attributes": [
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "true"
+        }
+      ],
+      "properties": [
+        {
+          "name": "count",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "true"
+        }
+      ]
+    },
     {
       "name": "d2l-list-item-generic-layout",
       "path": "./components/list/list-item-generic-layout.js",
@@ -7242,6 +7268,12 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "drag-multiple",
+          "description": "Whether the user can drag multiple items",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "extend-separators",
           "description": "Whether to extend the separators beyond the content's edge",
@@ -7271,6 +7303,8 @@
         },
         {
           "name": "dragMultiple",
+          "attribute": "drag-multiple",
+          "description": "Whether the user can drag multiple items",
           "type": "boolean",
           "default": "false"
         },

package/package.json

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