@brightspace-ui/core 2.147.0 → 2.148.0

package/components/filter/filter.js

@@ -236,6 +236,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		const dropdownContent = singleDimension ? html`
 				<d2l-dropdown-content
+					class="vdiff-target"
 					min-width="285"
 					max-width="420"
 					mobile-tray="right"
@@ -249,6 +250,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				</d2l-dropdown-content>`
 			: html`
 				<d2l-dropdown-menu
+					class="vdiff-target"
 					min-width="285"
 					max-width="420"
 					mobile-tray="right"
@@ -265,6 +267,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		return html`
 			<d2l-dropdown-button-subtle
+				class="vdiff-target"
 				@d2l-dropdown-close="${this._handleDropdownClose}"
 				@d2l-dropdown-open="${this._handleDropdownOpen}"
 				@d2l-dropdown-position="${this._stopPropagation}"

package/components/list/list-controls.js

@@ -31,7 +31,7 @@ export class ListControls extends SelectionControls {
 				padding: 0 0.9rem;
 			}
 			.d2l-list-controls-color.d2l-list-controls-extend-separator {
-				padding: 0 calc(0.9rem + 9px);
+				padding: 0 calc(0.6rem + 9px);
 			}
 		`];
 	}

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

@@ -48,6 +48,7 @@ const ro = new ResizeObserver(entries => {
 });
 
 const defaultBreakpoints = [842, 636, 580, 0];
+const SLIM_COLOR_BREAKPOINT = 400;
 
 /**
  * @property label - The hidden label for the checkbox and expand collapse control
@@ -99,7 +100,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
 			_hasNestedList: { state: true },
-			_siblingHasColor: { state: true }
+			_siblingHasColor: { state: true },
+			_slimColor: { state: true }
 		};
 	}
 
@@ -293,6 +295,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-inline-start: 0.9rem;
 			}
+			:host(:not([_render-expand-collapse-slot])[_has-color-slot]) .d2l-list-item-content-extend-separators d2l-selection-input {
+				margin-inline-start: 0.6rem;
+			}
 
 			d2l-list-item-drag-handle {
 				margin: 0.25rem 0.3rem;
@@ -391,6 +396,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				height: 100%;
 				width: 6px;
 			}
+			.d2l-list-item-color-inner.d2l-list-item-color-slim {
+				border-radius: 3px;
+				width: 3px;
+			}
 			.d2l-list-item-color-outer {
 				padding: 2px 12px 1px 0;
 			}
@@ -435,6 +444,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._hasColorSlot = false;
 		this._hasNestedList = false;
 		this._siblingHasColor = false;
+		this._slimColor = false;
 	}
 
 	get breakpoints() {
@@ -456,6 +466,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		const oldValue = this._color;
 		this._color = getValidHexColor(value, true);
 		this.requestUpdate('value', oldValue);
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-property-change', { bubbles: true, composed: true, detail: { name: 'color', value: this._color } }));
 	}
 
@@ -512,6 +523,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 	}
 
 	resizedCallback(width) {
+		this._slimColor = (width < SLIM_COLOR_BREAKPOINT);
+
 		const lastBreakpointIndexToCheck = 3;
 		this.breakpoints.some((breakpoint, index) => {
 			if (width >= breakpoint || index > lastBreakpointIndexToCheck) {
@@ -674,6 +687,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		const colorStyles = {
 			backgroundColor: this._hasColorSlot ? this.color : undefined
 		};
+		const colorClasses = {
+			'd2l-list-item-color-inner': true,
+			'd2l-list-item-color-slim': this._slimColor
+		};
 
 		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color)) ? 'control' : undefined;
 		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId) : null);
@@ -695,7 +712,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				<div slot="control-container"></div>
 				${this._hasColorSlot ? html`
 				<div slot="color-indicator" class="d2l-list-item-color-outer">
-					<div class="d2l-list-item-color-inner" style="${styleMap(colorStyles)}"></div>
+					<div class="${classMap(colorClasses)}" style="${styleMap(colorStyles)}"></div>
 				</div>` : nothing}
 				<div slot="expand-collapse" class="d2l-list-expand-collapse" @click="${this._toggleExpandCollapse}">
 					${this._renderExpandCollapse()}

package/custom-elements.json

@@ -8124,9 +8124,6 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-list-item-property-change"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -8492,9 +8489,6 @@
           "name": "d2l-list-item-button-click",
           "description": "Dispatched when the item's primary button action is clicked"
         },
-        {
-          "name": "d2l-list-item-property-change"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -8983,9 +8977,6 @@
           "name": "d2l-list-item-link-click",
           "description": "Dispatched when the item's primary link action is clicked"
         },
-        {
-          "name": "d2l-list-item-property-change"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.147.0",
+  "version": "2.148.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.34",
+    "@brightspace-ui/testing": "^0.35",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",