@brightspace-ui/core 3.227.5 → 3.227.7

package/components/button/button-icon.js

@@ -49,8 +49,8 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 		return [super.styles, buttonStyles, visibleOnAncestorStyles,
 			css`
 				:host {
-					--d2l-button-icon-background-color-default: transparent;
-					--d2l-button-icon-background-color-hover-default: var(--d2l-color-gypsum);
+					--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-tertiary-default);
+					--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-tertiary-hover);
 					--d2l-button-icon-border-radius-default: 0.3rem;
 					--d2l-button-icon-min-height-default: calc(2rem + 2px);
 					--d2l-button-icon-min-width-default: calc(2rem + 2px);
@@ -62,12 +62,12 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 					display: none;
 				}
 				:host([translucent]) {
-					--d2l-button-icon-background-color-default: rgba(0, 0, 0, 0.5);
-					--d2l-button-icon-background-color-hover-default: var(--d2l-color-celestine);
-					--d2l-focus-ring-color: white;
+					--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-translucent-default);
+					--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-translucent-hover);
+					--d2l-focus-ring-color: var(--d2l-theme-icon-color-inverted);
 					--d2l-focus-ring-offset: -4px;
-					--d2l-button-icon-fill-color: white;
-					--d2l-button-icon-fill-color-hover: white;
+					--d2l-button-icon-fill-color: var(--d2l-theme-icon-color-inverted);
+					--d2l-button-icon-fill-color-hover: var(--d2l-theme-icon-color-inverted);
 				}
 				:host([theme="dark"]) {
 					--d2l-button-icon-background-color-default: transparent;
@@ -103,13 +103,13 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 				button:hover:not([disabled]),
 				button:focus:not([disabled]),
 				:host([active]) button:not([disabled]) {
-					--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
+					--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-theme-icon-color-standard));
 					background-color: var(--d2l-button-icon-background-color-hover, var(--d2l-button-icon-background-color-hover-default));
 				}
 
 				d2l-icon,
 				slot[name="icon"]::slotted(d2l-icon-custom) {
-					color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
+					color: var(--d2l-button-icon-fill-color, var(--d2l-theme-icon-color-standard));
 				}
 
 				:host([translucent]) button {
@@ -122,7 +122,7 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 
 				:host([disabled]) button {
 					cursor: default;
-					opacity: 0.5;
+					opacity: var(--d2l-theme-opacity-disabled-control);
 				}
 
 				@media (prefers-reduced-motion: reduce) {

package/components/calendar/calendar.js

@@ -457,9 +457,8 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 		this._tableInfoId = getUniqueId();
 		getCalendarData();
 	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
+	connectedCallback() {
+		super.connectedCallback();
 
 		if (this.minValue && this.maxValue && (getDateFromISODate(this.minValue).getTime() > getDateFromISODate(this.maxValue).getTime())) {
 			throw new RangeError('d2l-calendar component expects min-value to be before max-value');
@@ -470,18 +469,15 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 			(node) => { return (node.tagName === 'D2L-DROPDOWN-CONTENT'); }
 		);
 		if (dropdownContent) this._dialog = true;
-
-		this.addEventListener('blur', () => this._isInitialFocusDate = true);
-
-		this.addEventListener('d2l-localize-resources-change', () => {
-			getCalendarData();
-			this.requestUpdate();
-		});
-
 		this._today = getDateFromDateObj(getToday());
 		if (this.selectedValue) this._getInitialFocusDate();
 		else this.reset();
+	}
 
+	firstUpdated() {
+		super.firstUpdated();
+		this.addEventListener('blur', this._onBlur.bind(this));
+		this.addEventListener('d2l-localize-resources-change', this._onLocalizeResourcesChange.bind(this));
 	}
 
 	render() {
@@ -686,6 +682,10 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 		this._shownMonth = getNextMonth(this._shownMonth);
 	}
 
+	_onBlur() {
+		this._isInitialFocusDate = true;
+	}
+
 	async _onDateSelected(e) {
 		let selectedDate = e.composedPath()[0];
 		if (selectedDate.tagName === 'BUTTON') selectedDate = selectedDate.parentNode;
@@ -866,6 +866,11 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 		await this._showFocusDateMonth(oldFocusDate, Math.abs(numDaysChange) !== 1);
 	}
 
+	_onLocalizeResourcesChange() {
+		getCalendarData();
+		this.requestUpdate();
+	}
+
 	async _onNextMonthButtonClick() {
 		this._monthIncrease();
 		this._triggerMonthChangeAnimations(true);

package/components/filter/filter-dimension-set-date-time-range-value.js

@@ -70,7 +70,7 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 		this._dispatchFilterChangeEvent = false;
 		this._enforceSingleSelection = true;
 		this._filterSetValue = true;
-		this._minWidth = 390;
+		this._minWidth = 410;
 		this._noSearchSupport = true;
 
 		this._handleDateChange = this._handleDateChange.bind(this);
@@ -122,6 +122,7 @@ class FilterDimensionSetDateTimeRangeValue extends LocalizeCoreElement(LitElemen
 			selected: this.selected,
 			text: this.text,
 			valueText: this.valueText,
+			minWidth: this._minWidth,
 			additionalContent: this._getAdditionalContent.bind(this),
 			getAdditionalEventDetails: this._getAdditionalEventDetails.bind(this),
 			clearProperties: this._clearProperties.bind(this)

package/components/filter/filter-dimension-set.js

@@ -151,7 +151,7 @@ class FilterDimensionSet extends LitElement {
 		const values = valueNodes.map(value => {
 			if (value._noSearchSupport) noSearchSupport = true;
 			if (value._enforceSingleSelection) enforceSingleSelection = true;
-			if (value._minWidth) minWidth = value._minWidth;
+			if (value._minWidth) minWidth = minWidth ? Math.max(value._minWidth, minWidth) : value._minWidth;
 
 			return value.getValueDetails();
 		});

package/components/filter/filter.js

@@ -574,7 +574,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			`;
 		}
 
-		if (dimension.minWidth) this._minWidth = dimension.minWidth;
+		if (dimension.minWidth) this._minWidth = Math.max(dimension.minWidth, this._minWidth);
 		if (this._isDimensionEmpty(dimension)) {
 			const emptyState = dimension.setEmptyState
 				? this._createEmptyState(dimension.setEmptyState, dimension.key)
@@ -842,6 +842,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 				if (dimension.searchValue || dimension.searchType === 'manual') shouldSearch = true;
 				shouldRecount = true;
 				this._activeFiltersSubscribers.updateSubscribers();
+				newValue.forEach((field) => this._minWidth = field.minWidth ? Math.max(field.minWidth, this._minWidth) : this._minWidth);
 			} else if (prop === 'text') {
 				this._activeFiltersSubscribers.updateSubscribers();
 			}

package/package.json

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