Merge remote-tracking branch 'origin' into new-cem

SAP · Oct 23, 2023 · 4483b88 · 4483b88
2 parents c60651c + d0a624b
commit 4483b88
Show file tree

Hide file tree

Showing 23 changed files with 220 additions and 159 deletions.
diff --git a/packages/base/src/util/ColorConversion.ts b/packages/base/src/util/ColorConversion.ts
@@ -241,70 +241,78 @@ const RGBStringToRGBObject = (color: string): ColorRGB => {
 
 const HSLToRGB = (color: ColorHSL): ColorRGB => {
 	// Formula taken from https://www.rapidtables.com/convert/color/hsl-to-rgb.html
-	const C = (1 - Math.abs((2 * color.l) - 1)) * color.s,
-		X = C * (1 - Math.abs(((color.h / 60) % 2) - 1)),
-		m = color.l - C / 2;
+	let saturation = color.s * 100,
+		lightness = color.l * 100,
+		red,
+		green,
+		blue;
+
+	if (saturation > 100) {
+		saturation = 1;
+	} else if (saturation < 0) {
+		saturation = 0;
+	} else {
+		saturation /= 100;
+	}
 
-	let tempColor: ColorRGB;
-	switch (Math.round(color.h / 60)) {
-	// 0 ≤ H < 60
+	if (lightness > 100) {
+		lightness = 1;
+	} else if (lightness < 0) {
+		lightness = 0;
+	} else {
+		lightness /= 100;
+	}
+
+	const hue = color.h,
+		d = saturation * (1 - Math.abs(2 * lightness - 1)),
+		m = 255 * (lightness - 0.5 * d),
+		x = d * (1 - Math.abs(((hue / 60) % 2) - 1)),
+		i = Math.floor(hue / 60),
+		m255x = m + 255 * x,
+		m255d = m + 255 * d;
+
+	switch (i) {
 	case 0:
-		tempColor = {
-			r: C,
-			g: X,
-			b: 0,
-		};
+		red = m255d;
+		green = m255x;
+		blue = m;
 		break;
-
-	// 60 ≤ H < 120
 	case 1:
-		tempColor = {
-			r: X,
-			g: C,
-			b: 0,
-		};
+		red = m255x;
+		green = m255d;
+		blue = m;
 		break;
-
-	// 120 ≤ H < 180
 	case 2:
-		tempColor = {
-			r: 0,
-			g: C,
-			b: X,
-		};
+		red = m;
+		green = m255d;
+		blue = m255x;
 		break;
-
-	// 180 ≤ H < 240
 	case 3:
-		tempColor = {
-			r: 0,
-			g: X,
-			b: C,
-		};
+		red = m;
+		green = m255x;
+		blue = m255d;
 		break;
-
-	// 240 ≤ H < 300
 	case 4:
-		tempColor = {
-			r: X,
-			g: 0,
-			b: C,
-		};
+		red = m255x;
+		green = m;
+		blue = m255d;
+		break;
+	case 5:
+		red = m255d;
+		green = m;
+		blue = m255x;
 		break;
-
-	// 300 ≤ H < 360
 	default:
-		tempColor = {
-			r: C,
-			g: 0,
-			b: X,
-		};
+		red = 0;
+		green = 0;
+		blue = 0;
+		break;
 	}
 
 	return {
-		r: Math.floor((tempColor.r + m) * 255),
-		g: Math.floor((tempColor.g + m) * 255),
-		b: Math.floor((tempColor.b + m) * 255),
+		r: Math.round(red),
+		g: Math.round(green),
+		b: Math.round(blue),
 	};
 };
 

diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
@@ -412,9 +412,9 @@ class ColorPicker extends UI5Element {
 	_calculateColorFromCoordinates(x: number, y: number) {
 		// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
 		// and HSL format, the color will be parsed to RGB
-
 		// 0 ≤ H < 360
-		const h = this._hue / 4.25;
+		// 4.251 because with 4.25 we get out of the colors range.
+		const h = this._hue / 4.251;
 
 		// 0 ≤ S ≤ 1
 		const s = 1 - +(Math.round(parseFloat((y / 256) + "e+2")) + "e-2"); // eslint-disable-line

diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
@@ -405,6 +405,8 @@ class Dialog extends Popup {
 	}
 
 	onAfterRendering() {
+		super.onAfterRendering();
+
 		if (!this.isOpen() && this.open) {
 			this.show();
 		} else if (this.isOpen() && !this.open) {

diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -281,6 +281,8 @@ class Popover extends Popup {
 	}
 
 	onAfterRendering() {
+		super.onAfterRendering();
+
 		if (!this.isOpen() && this.open) {
 			let opener;
 
@@ -406,8 +408,12 @@ class Popover extends Popup {
 	}
 
 	_show() {
-		let placement;
+		if (!this.opened) {
+			this._showOutsideViewport();
+		}
+
 		const popoverSize = this.getPopoverSize();
+		let placement;
 
 		if (popoverSize.width === 0 || popoverSize.height === 0) {
 			// size can not be determined properly at this point, popover will be shown with the next reposition
@@ -463,7 +469,6 @@ class Popover extends Popup {
 			top: `${top}px`,
 			left: `${left}px`,
 		});
-		super._show();
 
 		if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && this._width) {
 			this.style.width = this._width;
@@ -488,21 +493,21 @@ class Popover extends Popup {
 	}
 
 	getPopoverSize(): PopoverSize {
-		if (!this.opened) {
-			Object.assign(this.style, {
-				display: "block",
-				top: "-10000px",
-				left: "-10000px",
-			});
-		}
-
 		const rect = this.getBoundingClientRect(),
 			width = rect.width,
 			height = rect.height;
 
 		return { width, height };
 	}
 
+	_showOutsideViewport() {
+		Object.assign(this.style, {
+			display: this._displayProp,
+			top: "-10000px",
+			left: "-10000px",
+		});
+	}
+
 	get arrowDOM() {
 		return this.shadowRoot!.querySelector(".ui5-popover-arrow")!;
 	}

diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
@@ -264,6 +264,10 @@ abstract class Popup extends UI5Element {
 		this._blockLayerHidden = !this.isOpen() || !this.isTopModalPopup;
 	}
 
+	onAfterRendering() {
+		this._updateMediaRange();
+	}
+
 	onEnterDOM() {
 		ResizeHandler.register(this, this._resizeHandler);
 	}
@@ -282,7 +286,7 @@ abstract class Popup extends UI5Element {
 	}
 
 	_resize() {
-		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
+		this._updateMediaRange();
 	}
 
 	/**
@@ -474,6 +478,10 @@ abstract class Popup extends UI5Element {
 
 		this._show();
 
+		if (this.getDomRef()) {
+			this._updateMediaRange();
+		}
+
 		this._addOpenedPopup();
 
 		this.opened = true;
@@ -488,6 +496,10 @@ abstract class Popup extends UI5Element {
 		this.fireEvent("after-open", {}, false, false);
 	}
 
+	_updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
+	}
+
 	/**
 	 * Adds the popup to the "opened popups registry"
 	 * @protected

diff --git a/packages/main/src/i18n/messagebundle_th.properties b/packages/main/src/i18n/messagebundle_th.properties
@@ -9,7 +9,7 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=ส่วนหัวของบ
 
 AVATAR_TOOLTIP=ภาพสัญลักษณ์
 
-AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL=แสดง {0}, ซ่อน {1} 
+AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL=แสดง {0}, ซ่อน {1}
 
 AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=เปิดใช้งานสำหรับรายการทั้งหมด
 

diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css
@@ -6,6 +6,7 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
+	container-type: inline-size;
 }
 
 .ui5-tc-root {
@@ -19,7 +20,6 @@
 
 .ui5-tc__header {
 	position: relative;
-	padding: 0 1rem;
 	display: flex;
 	align-items: center;
 	background-color: var(--_ui5_tc_header_background);
@@ -100,7 +100,6 @@
 	position: relative;
 	display: flex;
 	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
-	padding: 1rem 2rem;
 	background-color: var(--_ui5_tc_content_background);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
 	box-sizing: border-box;
@@ -138,19 +137,30 @@
 }
 
 /*** Responsive paddings ***/
-
-:host([media-range="S"]) .ui5-tc__header {
+.ui5-tc__header {
 	padding: 0;
 }
 
-:host([media-range="S"]) .ui5-tc__content {
+.ui5-tc__content {
 	padding: 1rem;
 }
 
-:host([media-range="XL"]) .ui5-tc__header {
-	padding: 0 2rem;
+@container (min-width: 600px) {
+	.ui5-tc__header {
+		padding: 0 1rem;
+	}
+
+	.ui5-tc__content {
+		padding: 1rem 2rem;
+	}
 }
 
-:host([media-range="XL"]) .ui5-tc__content {
-	padding: 1rem 3rem;
+@container (min-width: 1440px) {
+	.ui5-tc__header {
+		padding: 0 2rem;
+	}
+
+	.ui5-tc__content {
+		padding: 1rem 3rem;
+	}
 }
diff --git a/packages/main/src/themes/TreeItem.css b/packages/main/src/themes/TreeItem.css
@@ -33,6 +33,10 @@
 	bottom: 0.125rem;
 }
 
+.ui5-li-tree-text-wrapper {
+	flex: auto;
+}
+
 :host([_minimal]) .ui5-li-text-wrapper {
 	display: none;
 }

diff --git a/packages/main/src/themes/sap_horizon/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon/DayPicker-parameters.css
@@ -3,7 +3,7 @@
 :root {
 	--_ui5_daypicker_item_border_radius: 0.5rem;
 	--_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapContent_FocusColor);
+	--_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.125rem;

diff --git a/packages/main/src/themes/sap_horizon_exp/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_exp/DayPicker-parameters.css
@@ -3,7 +3,7 @@
 :root {
 	--_ui5_daypicker_item_border_radius: 0.5rem;
 	--_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapContent_FocusColor);
+	--_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.125rem;

diff --git a/packages/main/src/themes/sap_horizon_hcb/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcb/DayPicker-parameters.css
@@ -3,7 +3,7 @@
 :root {
 	--_ui5_daypicker_item_border_radius: 0.5rem;
 	--_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.1875rem;

diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/DayPicker-parameters.css
@@ -3,7 +3,7 @@
 :root {
 	--_ui5_daypicker_item_border_radius: 0.5rem;
 	--_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.1875rem;

diff --git a/packages/main/src/themes/sap_horizon_hcw/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcw/DayPicker-parameters.css
@@ -5,7 +5,7 @@
 	--_ui5_daypicker_item_border_radius_item: 0.5rem;
 	--_ui5_daypicker_item_border_radius: 0.5rem;
 	--_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.1875rem;

diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/DayPicker-parameters.css
@@ -5,7 +5,7 @@
 	--_ui5_daypicker_item_border_radius_item: 0.5rem;
 	--_ui5_daypicker_item_border_radius: 0.5rem;
 	--_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor);
 	--_ui5_daypicker_item_selected_focus_width: 0.1875rem;

diff --git a/packages/main/test/specs/ColorPicker.spec.js b/packages/main/test/specs/ColorPicker.spec.js
@@ -77,7 +77,7 @@ describe("Color Picker general interaction", () => {
 
 		await hueSliderHandle.dragAndDrop({ x: 200, y: 0 });
 
-		assert.strictEqual(await colorPicker.getAttribute("color"), "rgba(183, 61, 182, 0.83)", "Color properly changed");
+		assert.strictEqual(await colorPicker.getAttribute("color"), "rgba(182, 61, 184, 0.83)", "Color properly changed");
 		assert.strictEqual(await stepInput.getAttribute("value"), "2", "Change event gets fired on hue slider change");
 	});