@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

package/cypress/specs/{MultiInput.cy.ts → MultiInput.cy.tsx}

@@ -1,21 +1,21 @@
-import { html } from "lit";
-import "../../src/MultiInput.js";
-import "../../src/Tokenizer.js";
-import "../../src/features/InputSuggestions.js";
-import "../../src/SuggestionItem.js";
+import SuggestionItem from "../../src/SuggestionItem.js";
+import MultiInput from "../../src/MultiInput.js";
 
 describe("MultiInput Web Component", () => {
 	it("creates only one token when typing 'ad' and pressing Enter", () => {
-		cy.mount(html`<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token">
-            <ui5-suggestion-item text="Aute"></ui5-suggestion-item>
-            <ui5-suggestion-item text="ad"></ui5-suggestion-item>
-            <ui5-suggestion-item text="exercitation"></ui5-suggestion-item>
-            <ui5-suggestion-item text="esse"></ui5-suggestion-item>
-            <ui5-suggestion-item text="labore"></ui5-suggestion-item>
-            <ui5-suggestion-item text="amet"></ui5-suggestion-item>
-            <ui5-suggestion-item text="aute"></ui5-suggestion-item>
-            <ui5-suggestion-item text="excepteur"></ui5-suggestion-item>
-        </ui5-multi-input>`);
+		cy.mount(
+			<MultiInput showSuggestions={true} showValueHelpIcon={true} id="suggestion-token">
+				<SuggestionItem text="Aute"></SuggestionItem>
+				<SuggestionItem text="ad"></SuggestionItem>
+				<SuggestionItem text="exercitation"></SuggestionItem>
+				<SuggestionItem text="esse"></SuggestionItem>
+				<SuggestionItem text="labore"></SuggestionItem>
+				<SuggestionItem text="amet"></SuggestionItem>
+				<SuggestionItem text="aute"></SuggestionItem>
+				<SuggestionItem text="excepteur"></SuggestionItem>
+			</MultiInput>
+		);
+
 		cy.get("#suggestion-token").then(multiInput => {
 			const createTokenFromText = (text: string): HTMLElement => {
 				const token = document.createElement("ui5-token");

package/cypress/specs/{Popover.cy.ts → Popover.cy.tsx}

@@ -1,21 +1,22 @@
-import { html } from "lit";
-import "../../src/Button.js";
-import "../../src/Toolbar.js";
-import "../../src/ToolbarButton.js";
-import "../../src/Popover.js";
+import ToolbarButton from "../../src/ToolbarButton.js";
+import Toolbar from "../../src/Toolbar.js";
+import Popover from "../../src/Popover.js";
+import Button from "../../src/Button.js";
 
 describe("Popover opener", () => {
 	it("tests 'opener' set as string of abstract element's ID ", () => {
-		cy.mount(html`
-			<ui5-toolbar id="tb">
-				<ui5-toolbar-button text="Add"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Delete" id="clearCounter"></ui5-toolbar-button>
-				<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
-			</ui5-toolbar>
-			<ui5-popover id="popup" opener="btnOpenMenu">
-				<ui5-button id="btnClosePopover">Close</ui5-button>
-			</ui5-popover>
-		`);
+		cy.mount(
+			<>
+				<Toolbar id="tb">
+					<ToolbarButton text="Add"></ToolbarButton>
+					<ToolbarButton text="Delete" id="clearCounter"></ToolbarButton>
+					<ToolbarButton id="btnOpenMenu" text="Open Menu" preventOverflowClosing={true}></ToolbarButton>
+				</Toolbar>
+				<Popover id="popup" opener="btnOpenMenu">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
 
 		// act
 		cy.get("#popup").invoke("prop", "open", "true");
@@ -30,16 +31,18 @@ describe("Popover opener", () => {
 	});
 
 	it("tests 'opener' set as DOM ref of abstract element's DOM reference", () => {
-		cy.mount(html`
-			<ui5-toolbar id="tb">
-				<ui5-toolbar-button text="Add"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Delete"></ui5-toolbar-button>
-				<ui5-toolbar-button id="btnOpenPopover" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
-			</ui5-toolbar>
-			<ui5-popover id="popup">
-				<ui5-button id="btnClosePopover">Close</ui5-button>
-			</ui5-popover>
-		`);
+		cy.mount(
+			<>
+				<Toolbar id="tb">
+					<ToolbarButton text="Add"></ToolbarButton>
+					<ToolbarButton text="Delete"></ToolbarButton>
+					<ToolbarButton id="btnOpenPopover" text="Open Menu" preventOverflowClosing={true}></ToolbarButton>
+				</Toolbar>
+				<Popover id="popup">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
 
 		cy.get("#btnOpenPopover").then($toolbarBtn => {
 			cy.wrap($toolbarBtn.get(0)).as("toolbarBtn");

package/cypress/specs/RTL.cy.tsx

@@ -0,0 +1,18 @@
+import CheckBox from "../../src/CheckBox.js";
+
+describe("RTL", () => {
+	it("tests effectiveDir", () => {
+		cy.mount(
+			<section dir="rtl">
+				<CheckBox id="cbRTL" text="Click me"></CheckBox>
+				<CheckBox id="cbLTR" text="This checkbox however defines dir=ltr" dir="ltr"></CheckBox>
+			</section>
+		);
+
+		cy.get("#cbRTL")
+			.should("have.prop", "effectiveDir", "rtl");
+
+		cy.get("#cbLTR")
+			.should("have.prop", "effectiveDir", "ltr");
+	});
+});

package/cypress/specs/{RatingIndicator.cy.ts → RatingIndicator.cy.tsx}

@@ -1,12 +1,11 @@
-import { html } from "lit";
-import "../../src/RatingIndicator.js";
+import RatingIndicator from "../../src/RatingIndicator.js";
 
 describe("RatingIndicator", () => {
 	describe("Half Icon appearance", () => {
 		it("Half icon should be filled when rating indicator is disabled", () => {
 			const attributeValue = "favorite";
 
-			cy.mount(html`<ui5-rating-indicator value="2.5" disabled></ui5-rating-indicator>`);
+			cy.mount(<RatingIndicator value={2.5} disabled={true}></RatingIndicator>);
 
 			cy.get("[ui5-rating-indicator]")
 				.shadow()
@@ -17,7 +16,7 @@ describe("RatingIndicator", () => {
 		it("Half icon should be filled when rating indicator is readonly", () => {
 			const attributeValue = "favorite";
 
-			cy.mount(html`<ui5-rating-indicator value="2.5" readonly></ui5-rating-indicator>`);
+			cy.mount(<RatingIndicator value={2.5} readonly={true}></RatingIndicator>);
 
 			cy.get("[ui5-rating-indicator]")
 				.shadow()
@@ -28,7 +27,7 @@ describe("RatingIndicator", () => {
 		it("Half icon should be border only when rating indicator is regular", () => {
 			const attributeValue = "unfavorite";
 
-			cy.mount(html`<ui5-rating-indicator value="2.5"></ui5-rating-indicator>`);
+			cy.mount(<RatingIndicator value={2.5}></RatingIndicator>);
 
 			cy.get("[ui5-rating-indicator]")
 				.shadow()
@@ -39,28 +38,66 @@ describe("RatingIndicator", () => {
 
 	describe("RatingIndicator Sizes", () => {
 		it("should apply correct size and spacing for size 'S'", () => {
-			cy.mount(html`<ui5-rating-indicator size="S" value="3"></ui5-rating-indicator>`);
+			cy.mount(<RatingIndicator size="S" value={3}></RatingIndicator>);
 
 			cy.get("ui5-rating-indicator")
 				.shadow()
 				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
-				.should("have.css", "height", "22px")
-				.should("have.css", "margin-right", "3px");
+				.should($el => {
+					const height = parseFloat($el.css("height"));
+					expect(height).to.be.greaterThan(21.9);
+					expect(height).to.be.lessThan(22.1);
+				  });
 		});
 		it("should apply correct size and spacing for size 'L' readonly", () => {
-			cy.mount(html`<ui5-rating-indicator size="L" value="3.5" readonly></ui5-rating-indicator>`);
+			cy.mount(<RatingIndicator size="L" value={3.5} readonly={true}></RatingIndicator>);
 
 			cy.get("ui5-rating-indicator")
 				.shadow()
 				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
-				.should("have.css", "height", "32px")
+				.should($el => {
+					const height = parseFloat($el.css("height"));
+					expect(height).to.be.greaterThan(31.9);
+					expect(height).to.be.lessThan(32.1);
+				  })
 				.should("have.css", "margin-right", "4px");
 
 			cy.get("ui5-rating-indicator")
 				.shadow()
 				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-unsel")
 				.find("ui5-icon")
-				.should("have.css", "height", "24px");
+				.should($el => {
+					const height = parseFloat($el.css("height"));
+					expect(height).to.be.greaterThan(23.9);
+					expect(height).to.be.lessThan(24.1);
+				  });
+		});
+	});
+
+	describe("RatingIndicator Accessibility", () => {
+		it("should be able to tab after and before readonly element", () => {
+			cy.mount(
+				<>
+					<button>Before</button>
+					<RatingIndicator value={3} readonly={true}></RatingIndicator>
+					<button>after</button>
+				</>
+			);
+
+			cy.get("button:first").realClick();
+			cy.focused().should("contain", "Before");
+
+			// press tab
+			cy.realPress("Tab");
+			cy.realPress("Tab");
+
+			cy.focused().should("contain", "after");
+
+			// press shift + tab
+			cy.realPress(["Shift", "Tab"]);
+			cy.realPress(["Shift", "Tab"]);
+
+			cy.focused().should("contain", "Before");
 		});
 	});
 });

package/cypress/specs/{ResponsivePopover.mobile.cy.ts → ResponsivePopover.mobile.cy.tsx}

@@ -1,7 +1,6 @@
-import { html } from "lit";
-import "../../src/ResponsivePopover.js";
-import "../../src/Button.js";
-import "../../src/Input.js";
+import ResponsivePopover from "../../src/ResponsivePopover.js";
+import Button from "../../src/Button.js";
+import Input from "../../src/Input.js";
 
 describe("ResponsivePopover mobile general interaction", () => {
 	before(() => {
@@ -9,8 +8,12 @@ describe("ResponsivePopover mobile general interaction", () => {
 	});
 
 	it("tests opening a popover from a responsive popover", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -25,8 +28,12 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - Default", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -44,8 +51,12 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - AlertDialog", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen" accessible-role="AlertDialog"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen" accessibleRole="AlertDialog"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -63,8 +74,12 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - None", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen" accessible-role="None"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen" accessibleRole="None"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -82,10 +97,14 @@ describe("Accessibility", () => {
 	});
 
 	it("tests initial focus", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen" initial-focus="emailInput">
-			<ui5-input id="emailInput"></ui5-input>
-		</ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen" initialFocus="emailInput">
+					<Input id="emailInput"></Input>
+				</ResponsivePopover>
+			</>
+		);
 
 		cy.get("#emailInput")
 			.should("be.focused");

package/cypress/specs/Select.cy.tsx

@@ -0,0 +1,56 @@
+import Option from "../../src/Option.js";
+import OptionCustom from "../../src/OptionCustom.js";
+import Select from "../../src/Select.js";
+
+describe("Select - Accessibility", () => {
+	it("tests options tooltip is set displayed", () => {
+		const EXPECTED_TOOLTIP = "Tooltip";
+		const EXPECTED_ROLE = "option";
+		cy.mount(
+			<Select>
+				<Option value="1" tooltip={EXPECTED_TOOLTIP}>Option 1</Option>
+				<OptionCustom value="2" tooltip={EXPECTED_TOOLTIP}>Option 2</OptionCustom>
+			</Select>
+		);
+
+		// Check if the role is set to option
+		cy
+			.get("[ui5-option]")
+			.shadow()
+			.find("li.ui5-li-root")
+			.should("have.attr", "role", EXPECTED_ROLE)
+			.get("[ui5-option-custom]")
+			.shadow()
+			.find("li.ui5-li-root")
+			.should("have.attr", "role", EXPECTED_ROLE);
+
+		// Check if the tooltip is set
+		cy
+			.get("[ui5-option][tooltip]")
+			.shadow()
+			.find("li.ui5-li-root")
+			.should("have.attr", "title", EXPECTED_TOOLTIP)
+			.get("[ui5-option-custom][tooltip]")
+			.shadow()
+			.find("li.ui5-li-root")
+			.should("have.attr", "title", EXPECTED_TOOLTIP);
+	});
+});
+
+describe("Select - Popover", () => {
+	it("Popover should render custom value state", () => {
+		cy.mount(
+			<Select id="warningSelect" value-state="Critical">
+				<Option>This option has text bigger than ui5-select's width</Option>
+				<div slot="valueStateMessage">Custom message</div>
+			</Select>
+		);
+
+		cy.get("#warningSelect").realClick().realPress("Escape");
+
+		cy.get("#warningSelect")
+			.find("[slot=\"valueStateMessage\"]")
+			.should("be.visible")
+			.should("have.text", "Custom message");
+	});
+});

package/cypress/specs/{StepInput.cy.ts → StepInput.cy.tsx}

@@ -1,12 +1,10 @@
-import { html } from "lit";
-import "../../src/StepInput.js";
-import type StepInput from "../../src/StepInput.js";
+import StepInput from "../../src/StepInput.js";
 
 describe("StepInput Tests", () => {
 	it("tets input event prevention", () => {
-		cy.mount(html`
-			<ui5-step-input></ui5-step-input>
-		`);
+		cy.mount(
+			<StepInput></StepInput>
+		);
 
 		cy.get("[ui5-step-input]")
 			.as("stepInput");