@brightspace-ui/core 2.131.4 → 2.131.6

package/components/list/list-item-generic-layout.js

@@ -69,7 +69,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 					[end actions-end];
 				grid-template-rows: [main-start] [main-end nested-start] [nested-end];
 				position: relative;
-				z-index: 0;
 			}
 
 			::slotted([slot="nested"]) {
@@ -80,15 +79,15 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: control-start / end;
 			}
 			:host(.d2l-dragging-over) ::slotted([slot="nested"]) {
-				z-index: 7; /* must be greater than item's drop-target to allow dropping onto items within nested list  */
+				order: 7; /* must be greater than item's drop-target to allow dropping onto items within nested list  */
 			}
 
 			::slotted([slot="drop-target"]) {
 				height: 100%;
+				order: 6;
 				position: absolute;
 				top: 0;
 				width: 100%;
-				z-index: 6;
 			}
 
 			::slotted([slot="outside-control"]),
@@ -105,7 +104,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			::slotted([slot="expand-collapse"]) {
 				cursor: pointer;
 				grid-column: expand-collapse-start / expand-collapse-end;
-				z-index: 2;
+				order: 2;
 			}
 
 			::slotted([slot="control"]) {
@@ -124,7 +123,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			::slotted([slot="actions"]) {
 				grid-column: actions-start / actions-end;
 				justify-self: end;
-				z-index: 5;
+				order: 5;
 			}
 
 			::slotted([slot="outside-control-action"]),
@@ -134,7 +133,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			}
 			::slotted([slot="outside-control-action"]) {
 				grid-column: start / end;
-				z-index: 1;
+				order: 1;
 			}
 			:host([no-primary-action]) ::slotted([slot="outside-control-action"]) {
 				grid-column: start / outside-control-end;
@@ -142,15 +141,15 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			::slotted([slot="control-action"]) {
 				grid-column: control-start / end;
 				height: 100%;
+				order: 3;
 				width: 100%;
-				z-index: 3;
 			}
 			:host([no-primary-action]) ::slotted([slot="control-action"]) {
 				grid-column: control-start / control-end;
 			}
 			::slotted([slot="content-action"]) {
 				grid-column: content-start / end;
-				z-index: 4;
+				order: 4;
 			}
 			:host([no-primary-action]) ::slotted([slot="content-action"]) {
 				display: none;

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

@@ -84,15 +84,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			paddingType: { type: String, attribute: 'padding-type' },
 			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
-			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
-			_fullscreenWithin: { type: Boolean, attribute: '_fullscreen-within', reflect: true },
 			_hovering: { type: Boolean, reflect: true },
 			_hoveringPrimaryAction: { type: Boolean, attribute: '_hovering-primary-action', reflect: true },
 			_focusing: { type: Boolean, reflect: true },
 			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
-			_tooltipShowing: { type: Boolean, attribute: '_tooltip-showing', reflect: true },
 			_hasNestedList: { state: true }
 		};
 	}
@@ -108,15 +105,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				display: none;
 			}
 
-			:host([_tooltip-showing]),
-			:host([_dropdown-open]) {
-				z-index: 10; /* must be greater than adjacent selected items (if this is increased, d2l-collapsible-panel must be updated too) */
-			}
-			:host([_fullscreen-within]) {
-				position: fixed; /* required for Safari */
-				z-index: 998; /* must be greater than floating workflow buttons */
-			}
-
 			:host([dragging]) d2l-list-item-generic-layout {
 				filter: grayscale(75%);
 				opacity: 0.4;
@@ -126,9 +114,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			}
 
 			[slot="control-container"] {
+				pointer-events: none;
 				position: relative;
-				z-index: -1; /* must allow for interactive content to be accessible with mouse */
 			}
+
 			:host(:first-of-type) [slot="control-container"]::before,
 			[slot="control-container"]::after {
 				border-top: 1px solid var(--d2l-color-mica);
@@ -140,7 +129,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				top: 0;
 			}
 			[slot="control-container"]::after {
-				bottom: -2px;
+				bottom: -1px;
 			}
 
 			:host(:first-of-type[_separators="between"]) [slot="control-container"]::before,
@@ -329,6 +318,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
 				background-color: white;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
+				margin-bottom: -1px;
 			}
 			:host([_hovering-primary-action]) [slot="outside-control-container"],
 			:host([_hovering-selection]) [slot="outside-control-container"] {
@@ -337,6 +327,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
 				background-color: #f3fbff;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
+				margin-bottom: -1px;
 			}
 
 			:host(:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {
@@ -389,8 +380,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
-		this._fullscreenWithin = false;
-		this._fullscreenWithinCount = 0;
 		this._hasNestedList = false;
 	}
 
@@ -421,14 +410,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		ro.unobserve(this);
 	}
 
-	firstUpdated(changedProperties) {
-		this.addEventListener('d2l-dropdown-open', () => this._dropdownOpen = true);
-		this.addEventListener('d2l-dropdown-close', () => this._dropdownOpen = false);
-		this.addEventListener('d2l-tooltip-show', () => this._tooltipShowing = true);
-		this.addEventListener('d2l-tooltip-hide', () => this._tooltipShowing = false);
-		super.firstUpdated(changedProperties);
-	}
-
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (changedProperties.has('breakpoints')) {
@@ -579,12 +560,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._focusingPrimaryAction = false;
 	}
 
-	_onFullscreenWithin(e) {
-		if (e.detail.state) this._fullscreenWithinCount += 1;
-		else this._fullscreenWithinCount -= 1;
-		this._fullscreenWithin = (this._fullscreenWithinCount > 0);
-	}
-
 	_onMouseEnter() {
 		this._hovering = true;
 	}
@@ -629,7 +604,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				align-nested="${ifDefined(this.draggable && this.selectable ? 'control' : undefined)}"
 				@focusin="${this._onFocusIn}"
 				@focusout="${this._onFocusOut}"
-				@d2l-fullscreen-within="${this._onFullscreenWithin}"
 				class="${classMap(classes)}"
 				data-breakpoint="${this._breakpoint}"
 				data-separators="${ifDefined(this._separators)}"

package/components/list/list.js

@@ -57,7 +57,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 				display: block;
 			}
 			:host(:not([slot="nested"])) > .d2l-list-content {
-				padding-bottom: 2px;
+				padding-bottom: 1px;
 			}
 			:host([hidden]) {
 				display: none;

package/package.json

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