Merge branch 'minWidthPopover' of github.com:UI5/webcomponents into minWidthPopover

Author: duygu-rmdn

.github/workflows/deploy-preview.yaml

@@ -37,6 +37,7 @@ jobs:
     # so the deploy step would always fail. A skipped check does not block merge.
     if: github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
+    environment: netlify-preview
 
     steps:
     - name: Checkout

.github/workflows/release.yaml

@@ -312,14 +312,14 @@ jobs:
     if: ${{ github.event.inputs.release_type == 'experimental' }}
     environment: "npmjs:@ui5/webcomponents"
     permissions:
-      contents: write
+      contents: read
       id-token: write
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          token: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
           fetch-depth: 0
 
       - name: Setup Node
@@ -333,7 +333,7 @@ jobs:
 
       - name: Version Bump
         env:
-          GH_TOKEN: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           git config user.name "${{ secrets.UI5_WEBCOMP_BOT_NAME }}"
           git config user.email "${{ secrets.UI5_WEBCOMP_BOT_EMAIL }}"

.github/workflows/reset-preview-deploy.yaml

@@ -30,7 +30,8 @@ permissions:
 jobs:
   cleanup-preview:
     runs-on: ubuntu-latest
-    
+    environment: netlify-preview
+
     steps:
     - name: Create empty content
       run: |

packages/base/package.json

@@ -64,7 +64,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@openui5/sap.ui.core": "1.146.0",
-    "@sap-theming/theming-base-content": "11.35.0",
+    "@sap-theming/theming-base-content": "11.36.3",
     "@ui5/cypress-internal": "0.1.0",
     "@ui5/webcomponents-tools": "2.23.0-rc.1",
     "clean-css": "^5.2.2",

packages/base/src/Render.ts

@@ -33,14 +33,28 @@ const renderDeferred = async (webComponent: UI5Element) => {
 	await scheduleRenderTask();
 };
 
+/**
+ * Register all web components attached to the DOM
+ */
+const registerElement = (webComponent: UI5Element) => {
+	registeredElements.add(webComponent);
+};
+
+/**
+ * Unregister all web components detached from the DOM
+ */
+const unregisterElement = (webComponent: UI5Element) => {
+	registeredElements.delete(webComponent);
+};
+
 /**
  * Renders a component synchronously and adds it to the registry of rendered components
  *
  * @param webComponent
  */
 const renderImmediately = (webComponent: UI5Element) => {
 	eventProvider.fireEvent("beforeComponentRender", webComponent);
-	registeredElements.add(webComponent);
+	registerElement(webComponent);
 	webComponent._render();
 };
 
@@ -51,7 +65,7 @@ const renderImmediately = (webComponent: UI5Element) => {
  */
 const cancelRender = (webComponent: UI5Element) => {
 	invalidatedWebComponents.remove(webComponent);
-	registeredElements.delete(webComponent);
+	unregisterElement(webComponent);
 };
 
 /**
@@ -173,6 +187,8 @@ export {
 	renderDeferred,
 	renderImmediately,
 	cancelRender,
+	registerElement,
+	unregisterElement,
 	renderFinished,
 	reRenderAllUI5Elements,
 	attachBeforeComponentRender,

packages/base/src/UI5Element.ts

@@ -18,6 +18,8 @@ import {
 	renderDeferred,
 	renderImmediately,
 	cancelRender,
+	unregisterElement,
+	registerElement,
 } from "./Render.js";
 import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./CustomElementsRegistry.js";
 import { observeDOMNode, unobserveDOMNode } from "./DOMObserver.js";
@@ -332,6 +334,8 @@ abstract class UI5Element extends HTMLElement {
 
 		const ctor = this.constructor as typeof UI5Element;
 
+		registerElement(this);
+
 		this.setAttribute(ctor.getMetadata().getPureTag(), "");
 		if (ctor.getMetadata().supportsF6FastNavigation() && !this.hasAttribute("data-sap-ui-fastnavgroup")) {
 			this.setAttribute("data-sap-ui-fastnavgroup", "true");
@@ -351,6 +355,12 @@ abstract class UI5Element extends HTMLElement {
 			await ctor._definePromise;
 		}
 
+		// Skip rendering while a language change is in progress to avoid rendering with not fully loaded locale data.
+		// Once the locale data is loaded, the language-aware component will be re-rendered.
+		if (ctor.getMetadata().isLanguageAware() && getLanguageChangePending()) {
+			return;
+		}
+
 		if (!this._inDOM) { // Component removed from DOM while _processChildren was running
 			return;
 		}
@@ -401,6 +411,7 @@ abstract class UI5Element extends HTMLElement {
 		this._domRefReadyPromise._deferredResolve!();
 
 		cancelRender(this);
+		unregisterElement(this);
 	}
 
 	/**

packages/fiori/cypress/specs/SideNavigation.cy.tsx

@@ -939,33 +939,39 @@ describe("Side Navigation interaction", () => {
 			</SideNavigation>
 		);
 
-		cy.get("#parentItem").realClick();
-		[
+		const cases: Array<{ selector: () => Cypress.Chainable, expectedCallCount: number }> = [
 			{
-				element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-item][text='2']").shadow()
-					.find(".ui5-sn-item"),
+				selector: () => cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-item][text='2']").shadow().find(".ui5-sn-item"),
 				expectedCallCount: 1,
 			},
 			{
-				element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.1']"),
+				selector: () => cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.1']"),
 				expectedCallCount: 1,
 			},
 			{
-				element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.2']"),
+				selector: () => cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.2']"),
 				expectedCallCount: 0,
 			},
-		].forEach(({ element, expectedCallCount }) => {
+		];
+
+		cases.forEach(({ selector, expectedCallCount }) => {
 			cy.get("#sideNav")
 				.then(sideNav => {
 					sideNav.get(0).addEventListener("ui5-selection-change", cy.stub().as("selectionChangeHandler"));
 				});
 
-			// act
+			// open the popover fresh each iteration
 			cy.get("#parentItem").realClick();
-			element.realClick();
+			cy.get("#sideNav").shadow().find("[ui5-responsive-popover]").should("be.visible");
+
+			// act
+			selector().realClick();
 
 			// assert
-			cy.get("@selectionChangeHandler", { timeout: 1000 }).should("have.callCount", expectedCallCount);
+			cy.get("@selectionChangeHandler").should("have.callCount", expectedCallCount);
+
+			// close popover before next iteration (click outside)
+			cy.get("body").click(0, 0);
 		});
 	});
 
@@ -978,6 +984,8 @@ describe("Side Navigation interaction", () => {
 		);
 
 		cy.get("#item").realClick();
+		// wait for first selection to settle before clicking again
+		cy.get("@selectionChangeHandler").should("have.been.calledOnce");
 		cy.get("#item").realClick();
 
 		cy.get("@selectionChangeHandler").should("have.been.calledOnce");
@@ -1021,14 +1029,17 @@ describe("Side Navigation interaction", () => {
 			.realClick();
 
 		cy.get("@overflowMenu")
-			.should("be.not.visible");
+			.should("not.be.visible");
 
 		cy.get("[ui5-side-navigation-item][text='Home 6']")
 			.should("be.focused");
 
 		cy.get("@itemOverflow")
 			.realClick();
 
+		cy.get("@overflowMenu")
+			.should("be.visible");
+
 		cy.get("@overflowMenu")
 			.find("[ui5-navigation-menu-item][text='Home 7']")
 			.realClick();

packages/fiori/src/i18n/messagebundle_mk.properties

@@ -12,7 +12,7 @@ DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER=Прошири го заглавието
 
 DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER=Скриј го заглавието
 
-DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER=Фиксирај го заглавието
+DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER=Закачи го заглавието
 
 DYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER=Поништи го фиксирањето на заглавието
 

packages/main/cypress/specs/ColorPicker.cy.tsx

@@ -306,6 +306,62 @@ describe("Color Picker general interaction tests", () => {
 	});
 });
 
+describe("Color Picker font-size scaling", () => {
+	afterEach(() => {
+		cy.document().then(doc => {
+			doc.documentElement.style.fontSize = "";
+		});
+	});
+
+	it("should select white at bottom-right corner with 14px root font-size", () => {
+		cy.document().then(doc => {
+			doc.documentElement.style.fontSize = "14px";
+		});
+
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]").as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-main-color")
+			.realClick({ position: "bottomRight" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "0");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "100");
+	});
+
+	it("should select black at top-left corner with 20px root font-size", () => {
+		cy.document().then(doc => {
+			doc.documentElement.style.fontSize = "20px";
+		});
+
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]").as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-main-color")
+			.realClick({ position: "topLeft" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "100");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "0");
+	});
+});
+
 describe("Color Picker accessibility tests", () => {
 	it("should show correct accessibility info for RGB inputs", () => {
 		cy.mount(<ColorPicker></ColorPicker>);

packages/main/cypress/specs/DatePicker_cldr_race.cy.tsx

@@ -0,0 +1,39 @@
+import "../../src/Assets.js";
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import DatePicker from "../../src/DatePicker.js";
+
+// Timestamps for Feb 2019 calendar checks
+const timestamp_3_Feb_2019 = 1549152000;
+const timestamp_28_Jan_2019 = 1548633600;
+
+describe("DatePicker CLDR race condition", () => {
+	it("mounts correctly when setLanguage is called without await before mount", () => {
+		// Capture the promise but do NOT await it — this is the race condition.
+		// Before the fix, the component rendered before CLDR data loaded → crash.
+		// After the fix, connectedCallback bails early and reRenderAllUI5Elements
+		// picks up the registered element once CLDR resolves.
+		let languageReady: Promise<void>;
+		cy.then(() => {
+			languageReady = setLanguage("bg");
+		});
+
+		cy.mount(<DatePicker value="фев 6, 2019" formatPattern="MMM d, y"></DatePicker>);
+
+		// Now wait for the language change to settle so locale data is applied
+		cy.then(() => languageReady);
+
+		cy.get("[ui5-date-picker]")
+			.as("datePicker")
+			.ui5DatePickerValueHelpIconPress();
+
+		// Monday (bg locale) should be the first displayed date — week starts Jan 28
+		cy.get<DatePicker>("@datePicker")
+			.ui5DatePickerGetFirstDisplayedDate()
+			.should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString());
+
+		// Feb 3 should fall on Sunday (last day in Mon-first week = wday6)
+		cy.get<DatePicker>("@datePicker")
+			.ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019)
+			.should("have.class", "ui5-dp-wday6");
+	});
+});