@brightspace-ui/core 3.159.1 → 3.159.3

package/components/button/button-add.js

@@ -4,7 +4,6 @@ import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor/visible-on-ancestor-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -15,7 +14,6 @@ const MODE = {
 	icon_and_text: 'icon-and-text',
 	icon_when_interacted: 'icon-when-interacted'
 };
-const whiteAddButtonBackgroundFlag = getFlag('GAUD-7495-add-button-white-background', true);
 
 /**
  * A component for quickly adding items to a specific locaiton.
@@ -32,8 +30,7 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
 			 * ACCESSIBILITY: The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.
 			 * @type {string}
 			 */
-			text: { type: String, required: true },
-			_whiteBackgroundAddButton: { type: Boolean, attribute: '_white-background-add-button', reflect: true }
+			text: { type: String, required: true }
 		};
 	}
 
@@ -105,10 +102,6 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
 				100% { position: static; }
 			}
 			${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
-			/* remove when GAUD-7495-add-button-white-background is cleaned up */
-			:host(:not([_white-background-add-button])) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
-				background-color: transparent;
-			}
 			:host([mode="icon-when-interacted"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text,
 			:host([mode="icon"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
 				border-radius: 0.2rem;
@@ -165,7 +158,6 @@ class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(Lit
 		this.mode = MODE.icon;
 
 		this._buttonId = getUniqueId();
-		this._whiteBackgroundAddButton = whiteAddButtonBackgroundFlag;
 	}
 
 	static get focusElementSelector() {
@@ -246,7 +238,7 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
 	}
 
 	render() {
-		const whiteBackgroundAddButton = html`
+		return html`
 			<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
 				<g>
 					<circle cx="9" cy="9" r="9" fill="#fff"/>
@@ -254,17 +246,6 @@ class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5a1 1 0 0 0-2 0v3H5a1 1 0 0 0 0 2h3v3a1 1 0 1 0 2 0v-3h3a1 1 0 1 0 0-2h-3V5Z"/>
 				</g>
 			</svg>
-		`;
-		const translucentBackgroundAddButton = html`
-			<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-				<g>
-					<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C10.3845 2 11.7378 2.41054 12.889 3.17971C14.0401 3.94888 14.9373 5.04213 15.4672 6.32122C15.997 7.6003 16.1356 9.00777 15.8655 10.3656C15.5954 11.7235 14.9287 12.9708 13.9497 13.9497C12.9708 14.9287 11.7235 15.5954 10.3656 15.8655C9.00777 16.1356 7.6003 15.997 6.32122 15.4672C5.04213 14.9373 3.94888 14.0401 3.17971 12.889C2.41054 11.7378 2 10.3845 2 9C2.00212 7.14413 2.7403 5.36489 4.05259 4.05259C5.36489 2.7403 7.14413 2.00212 9 2V2ZM9 0C6.61305 0 4.32387 0.948212 2.63604 2.63604C0.948212 4.32387 0 6.61305 0 9C0 11.3869 0.948212 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948212 11.3869 0 9 0V0Z" />
-					<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 4.44772 9.55228 4 9 4C8.44772 4 8 4.44772 8 5V8H5C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10H8V13C8 13.5523 8.44772 14 9 14C9.55228 14 10 13.5523 10 13V10H13C13.5523 10 14 9.55228 14 9C14 8.44772 13.5523 8 13 8H10V5Z" />
-				</g>
-			</svg>
-		`;
-		return html`
-			${whiteAddButtonBackgroundFlag ? whiteBackgroundAddButton : translucentBackgroundAddButton}
 			${this.text ? html`<span class="d2l-label-text">${this.text}</span>` : nothing}
 		`;
 	}

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

@@ -121,7 +121,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_listItemNewStyles: { type: Boolean, reflect: true, attribute: '_list-item-new-styles' },
 			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
 			_siblingHasColor: { state: true },
-			_whiteBackgroundAddButton: { type: Boolean, attribute: '_white-background-add-button', reflect: true },
 		};
 	}
 
@@ -163,13 +162,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				inset-inline-start: 1.5rem; /* left and right margins of 0.3rem + drag handle width of 0.9rem */
 				width: calc(100% - 1.5rem);
 			}
-			:host(:not([_white-background-add-button])[_has-nested-list-add-button]) [slot="before-content"] {
-				border-bottom: 1px solid var(--d2l-color-mica);
-				margin-bottom: -1px;
-			}
-			:host(:not([_white-background-add-button])[_has-nested-list-add-button]:not([selection-disabled]):not([skeleton])[selected]) [slot="before-content"] {
-				border-bottom-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
-			}
 			:host(:first-of-type) [slot="control-container"]::before {
 				top: 0;
 			}
@@ -191,9 +183,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host([_focusing-primary-action]) [slot="control-container"]::after,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::before,
 			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::after,
-			:host(:not([_white-background-add-button])[_show-add-button]) [slot="control-container"]::before,
-			.hide-bottom-border[slot="control-container"]::after,
-			:host(:not([_white-background-add-button])[_has-nested-list-add-button]) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -212,6 +201,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
 				padding-inline: 0.9rem;
 			}
+			:host([selectable]:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"],
 			:host([selectable]) .d2l-list-item-content-extend-separators > [slot="content"] {
 				padding-inline-start: 0;
 			}
@@ -357,29 +347,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-color: var(--d2l-color-mica);
 				margin-bottom: -1px;
 			}
-			/* below hides the border under the d2l-button-add; clean up with GAUD-7495-add-button-white-background */
-			:host([_hovering-control]) [slot="outside-control-container"].hide-bottom-border,
-			:host([_hovering-primary-action]) [slot="outside-control-container"].hide-bottom-border,
-			:host([_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
-			:host([_focusing-primary-action]) [slot="outside-control-container"].hide-bottom-border,
-			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border,
-			:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
-			:host(:not([_list-item-new-styles]):not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border,
-			:host([_list-item-new-styles]:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"].hide-bottom-border {
-				background-clip: content-box, border-box;
-				background-image: linear-gradient(white, white), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
-				background-origin: border-box;
-				border: double 1px transparent;
-				border-radius: 6px;
-			}
 			/* clean up with GAUD-7495-list-item-new-styles flag */
-			:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]) [slot="outside-control-container"].hide-bottom-border {
-				background-clip: content-box, border-box;
-				background-image: linear-gradient(white, white), linear-gradient(to right, var(--d2l-color-mica) 20%, transparent 20%, transparent 80%, var(--d2l-color-mica) 80%);
-				background-origin: border-box;
-				border: double 1px transparent;
-				border-radius: 6px;
-			}
 			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border {
 				background-image: linear-gradient(#f3fbff, #f3fbff), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
 			}
@@ -491,7 +459,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._listItemInteractiveEnabled = listItemInteractiveFlag;
 		this._listItemNewStyles = useNewStylesFlag;
 		this._siblingHasColor = false;
-		this._whiteBackgroundAddButton = getFlag('GAUD-7495-add-button-white-background', true);
 	}
 
 	get color() {
@@ -731,9 +698,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'd2l-list-item-color-inner': true,
 			'd2l-skeletize': this.color
 		};
-		const bottomBorderClasses = {
-			'hide-bottom-border': !this._whiteBackgroundAddButton && (this._showAddButton && (!this._hasNestedList || this._hasNestedListAddButton))
-		};
 
 		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this._listItemInteractiveEnabled && this.expandable && !this.selectable)) ? 'control' : undefined;
 		const contentAreaContent = html`
@@ -781,12 +745,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					</d2l-button-add>
 				</div>
 				` : nothing}
-				<div slot="outside-control-container" class="${classMap(bottomBorderClasses)}"></div>
+				<div slot="outside-control-container"></div>
 				<div slot="before-content"></div>
 				${this._renderDropTarget()}
 				${this._renderDragHandle(this._renderOutsideControl)}
 				${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
-				<div slot="control-container" class="${classMap(bottomBorderClasses)}"></div>
+				<div slot="control-container"></div>
 				${this._hasColorSlot ? html`
 				<div slot="color-indicator" class="d2l-list-item-color-outer">
 					<div class="${classMap(colorClasses)}" style="${styleMap(colorStyles)}"></div>

package/package.json

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