@ui5/webcomponents 2.7.0-rc.2 → 2.8.0-rc.0

package/cypress/specs/base/{Events.cy.ts → Events.cy.tsx}

@@ -1,41 +1,41 @@
-import { html } from "lit";
-import "../../../src/Dialog.js";
-import "../../../src/Select.js";
-import "../../../src/Option.js";
-import "../../../src/Input.js";
-import "../../../src/SuggestionItem.js";
-import "../../../src/MessageStrip.js";
-import "../../../src/MultiComboBox.js";
-import "../../../src/MultiComboBoxItem.js";
-import "../../../src/Panel.js";
-import "../../../src/Button.js";
-import "../../../src/CheckBox.js";
-import "../../../src/Label.js";
-import "../../../src/MenuItem.js";
-import "../../../src/Menu.js";
+import "../../../src/features/InputSuggestions.js";
+import Dialog from "../../../src/Dialog.js";
+import Input from "../../../src/Input.js";
+import SuggestionItem from "../../../src/SuggestionItem.js";
+import MessageStrip from "../../../src/MessageStrip.js";
+import Panel from "../../../src/Panel.js";
+import Label from "../../../src/Label.js";
+import Select from "../../../src/Select.js";
+import Option from "../../../src/Option.js";
+import Button from "../../../src/Button.js";
+import MenuItem from "../../../src/MenuItem.js";
+import Menu from "../../../src/Menu.js";
+import MultiComboBox from "../../../src/MultiComboBox.js";
+import MultiComboBoxItem from "../../../src/MultiComboBoxItem.js";
+import CheckBox from "../../../src/CheckBox.js";
 
 describe("Event bubbling", () => {
 	it("test bubbling events", () => {
-		cy.mount(html`
+		cy.mount(
 			<div id="app">
-				<ui5-dialog id="myDialog" header-text="Dialog">
-					<ui5-input id="myInput" show-suggestions>
-						<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
-						<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
-						<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
-					</ui5-input>
+				<Dialog id="myDialog" headerText="Dialog">
+					<Input id="myInput" showSuggestions={true}>
+						<SuggestionItem text="Cozy"></SuggestionItem>
+						<SuggestionItem text="Compact"></SuggestionItem>
+						<SuggestionItem text="Condensed"></SuggestionItem>
+					</Input>
 
-					<ui5-message-strip id="myMsgStrip">(Information) with default icon and close button:</ui5-message-strip>
+					<MessageStrip id="myMsgStrip">(Information) with default icon and close button:</MessageStrip>
 
-					<ui5-panel id="panel" header-text="Panel">
-						<ui5-label>
+					<Panel id="panel" headerText="Panel">
+						<Label>
 							Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
 							nostrum, vel ea sint dicant postea.
-						</ui5-label>
-					</ui5-panel>
-				</ui5-dialog>
+						</Label>
+					</Panel>
+				</Dialog>
 			</div>
-		`);
+		);
 
 		cy.get("#app")
 			.as("app");
@@ -78,7 +78,9 @@ describe("Event bubbling", () => {
 
 		// act - toggle Input suggestions
 		cy.get("@input")
-			.realClick()
+			.realClick();
+
+		cy.get("@input")
 			.realType("a");
 
 		cy.get("@input")
@@ -96,16 +98,16 @@ describe("Event bubbling", () => {
 			.realClick();
 
 		// assert
-		// - the close event of the MessageStrip bubbles:  MessageStrip -> Dialog -> App
+		// - the close event of the MessageStrip doesn't bubble
 		// - the close event of the Input bubbles: Input -> Dialog -> App
 		cy.get("@inpClosed")
 			.should("have.been.calledOnce");
 		cy.get("@msgClosed")
 			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
-			.should("have.been.calledTwice");
+			.should("have.been.calledOnce");
 		cy.get("@appClosed")
-			.should("have.been.calledTwice");
+			.should("have.been.calledOnce");
 
 		// act - toggle Panel
 		cy.get("@panel")
@@ -121,28 +123,28 @@ describe("Event bubbling", () => {
 	});
 
 	it("test non-bubbling events", () => {
-		cy.mount(html`
+		cy.mount(
 			<div id="app">
-				<ui5-dialog id="myDialog" header-text="Dialog">
-					<ui5-select id="mySelect">
-						<ui5-option>Hello</ui5-option>
-						<ui5-option>World</ui5-option>
-						<ui5-option>Hello</ui5-option>
-					</ui5-select>
-
-					<ui5-button id="btnOpen">Open Menu</ui5-button>
-					<ui5-menu id="myMenu" header-text="Menu" opener="btnOpen">
-						<ui5-menu-item text="New File"></ui5-menu-item>
-						<ui5-menu-item text="New Folder"></ui5-menu-item>
-					</ui5-menu>
-
-					<ui5-multi-combobox id="myMCB">
-						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
-						<ui5-mcb-item selected text="Compact"></ui5-mcb-item>
-					</ui5-multi-combobox>
-				</ui5-dialog>
+				<Dialog id="myDialog" headerText="Dialog">
+					<Select id="mySelect">
+						<Option>Hello</Option>
+						<Option>World</Option>
+						<Option>Hello</Option>
+					</Select>
+
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu id="myMenu" header-text="Menu" opener="btnOpen">
+						<MenuItem text="New File"></MenuItem>
+						<MenuItem text="New Folder"></MenuItem>
+					</Menu>
+
+					<MultiComboBox id="myMCB">
+						<MultiComboBoxItem text="Cosy"></MultiComboBoxItem>
+						<MultiComboBoxItem selected text="Compact"></MultiComboBoxItem>
+					</MultiComboBox>
+				</Dialog>
 			</div>
-		`);
+		);
 
 		cy.get("#app")
 			.as("app");
@@ -247,12 +249,12 @@ describe("Event bubbling", () => {
 	});
 
 	it("test cancelable events", () => {
-		cy.mount(html`
+		cy.mount(
 			<div id="app">
-				<ui5-checkbox id="cb"></ui5-checkbox>
-				<ui5-checkbox id="cb2"></ui5-checkbox>
+				<CheckBox id="cb"></CheckBox>
+				<CheckBox id="cb2"></CheckBox>
 			</div>
-		`);
+		);
 
 		cy.get("#cb")
 			.as("checkbox");

package/cypress/specs/base/{IconCollection.cy.ts → IconCollection.cy.tsx}

@@ -1,9 +1,9 @@
 import "./css/redfish.custom.theme.css";
 import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
 import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import { html } from "lit";
 import "../../../src/Assets.js";
-import "../../../src/Icon.js";
+import Icon from "../../../src/Icon.js";
+import home from "@ui5/webcomponents-icons/dist/home.js";
 
 describe("Icon collection", () => {
 	before(() => {
@@ -12,7 +12,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(<Icon name={home}></Icon>);
 
 		cy.wrap({ getEffectiveIconCollection })
 			.invoke("getEffectiveIconCollection")
@@ -37,7 +37,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(<Icon name={home}></Icon>);
 
 		// act
 		cy.wrap({ setTheme })

package/cypress/specs/base/{IgnoreCustomElements.cy.ts → IgnoreCustomElements.cy.tsx}

@@ -1,6 +1,5 @@
-import { html } from "lit";
-import "../../../src/Card.js";
-import "../../../src/CardHeader.js";
+import Card from "../../../src/Card.js";
+import CardHeader from "../../../src/CardHeader.js";
 
 import { ignoreCustomElements, shouldIgnoreCustomElement } from "@ui5/webcomponents-base/dist/IgnoreCustomElements.js";
 
@@ -9,16 +8,20 @@ ignoreCustomElements("my-");
 
 describe("Ignore Custom Elements", () => {
 	it("tests shouldIgnoreCustomElement method", () => {
-		cy.mount(html`<ui5-card>
-		<ui5-card-header
-			slot="header"
-			status="4 of 10"
-			title-text="Product">
-		</ui5-card-header>
+		cy.mount(
+			<Card>
+				<CardHeader
+					slot="header"
+					subtitleText="4 of 10"
+					titleText="Product">
+				</CardHeader>
 
-		<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
-		<my-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
-	</ui5-card>`);
+				{/* @ts-expect-error */}
+				<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
+				{/* @ts-expect-error */}
+				<my-trip-calendar class="myCard-trip-calendar"></my-trip-calendar>
+			</Card>
+		);
 
 		cy.wrap({ shouldIgnoreCustomElement })
 			.invoke("shouldIgnoreCustomElement", "app-trip-calendar")

package/cypress/specs/base/Tooltips.cy.tsx

@@ -0,0 +1,62 @@
+import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
+
+import Button from "../../../src/Button.js";
+import RatingIndicator from "../../../src/RatingIndicator.js";
+import ToggleButton from "../../../src/ToggleButton.js";
+import SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
+import SegmentedButton from "../../../src/SegmentedButton.js";
+import Icon from "../../../src/Icon.js";
+
+import settings from "@ui5/webcomponents-icons/dist/settings.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import activate from "@ui5/webcomponents-icons/dist/activate.js";
+
+setEnableDefaultTooltips(false);
+
+describe("Default Tooltips", () => {
+	it("tests navigation", () => {
+		cy.mount(
+			<>
+				<Icon id="ic" name={settings}></Icon>
+				<Button id="btn" icon={settings}></Button>
+				<RatingIndicator id="rt"></RatingIndicator>
+				<ToggleButton id="togglebtn" icon={settings}></ToggleButton>
+				<SegmentedButton id="segBtn">
+					<SegmentedButtonItem id="segBtnItem" icon={add}></SegmentedButtonItem>
+					<SegmentedButtonItem id="segBtnItem2" icon={settings}></SegmentedButtonItem>
+					<SegmentedButtonItem id="segBtnItem3" icon={activate}></SegmentedButtonItem>
+				</SegmentedButton>
+			</>
+		);
+
+		cy.get("#ic")
+			.shadow()
+			.find("title")
+			.should("not.exist");
+
+		cy.get("#btn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#togglebtn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#rt")
+			.shadow()
+			.find(".ui5-rating-indicator-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-icon")
+			.should("not.have.attr", "title");
+	});
+});

package/cypress/support/commands/ColorPalette.commands.ts

@@ -16,7 +16,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 
 	cy.get("@colorPalette")
 		.shadow()
-		.find("ui5-color-picker")
+		.find("[ui5-color-picker]")
 		.as("colorPicker");
 
 	cy.get("@colorPicker")
@@ -41,7 +41,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 
 	cy.get("@colorPalette")
 		.shadow()
-		.find("ui5-dialog")
+		.find("[ui5-dialog]")
 		.find("ui5-button[design=Emphasized]") // The OK button is Emphasized (the Cancel button is Transparent)
 		.as("okButton");
 
@@ -63,6 +63,24 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 
 	cy.get("@colorPalette")
 		.shadow()
-		.find("ui5-dialog")
+		.find("[ui5-dialog]")
 		.should("not.be.visible"); // Make sure the dialog is closed at the end of the command (otherwise the next command will sometimes assert against the old dialog values)
 });
+
+Cypress.Commands.add("ui5ColorPaletteNavigateAndCheckSelectedColor", (subject: string, startIndex: number, key: string, expectedValue: string) => {
+	cy.get(subject)
+		.as("colorPalette");
+
+	cy.get("@colorPalette")
+		.find("[ui5-color-palette-item]")
+		.eq(startIndex)
+		.realClick();
+
+	// @ts-ignore
+	cy.realPress(key)
+		.realPress("Space");
+
+	cy.get("@colorPalette")
+		.find("ui5-color-palette-item[selected]")
+		.should("have.value", expectedValue);
+});

package/cypress/support/commands/Menu.commands.ts

@@ -25,16 +25,16 @@ Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
 	cy.get("@menu")
 		.shadow()
 		.find("[ui5-responsive-popover]")
-		.should("have.attr", "open");
-
-	cy.get("@menu")
-		.find(" > [ui5-menu-item]")
-		.first()
-		.should("be.visible");
+		.should($rp => {
+			expect($rp.is(":popover-open")).to.be.true;
+			expect($rp.width()).to.not.equal(0);
+			expect($rp.height()).to.not.equal(0);
+		})
+		.and("have.attr", "open");
 });
 
 Cypress.Commands.add("ui5MenuItemClick", { prevSubject: true }, subject => {
-	cy.wrap(subject)
+	cy.get(subject)
 		.as("item")
 		.should("be.visible");
 

package/cypress/support/commands.ts

@@ -55,6 +55,7 @@ declare global {
 			ui5ColorPickerToggleColorMode(): Chainable<void>
 			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
+			ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
 		}
 	}
 }

package/cypress/tsconfig.json

@@ -7,6 +7,8 @@
 		"types": ["@ui5/webcomponents-tools"],
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
+		"module": "NodeNext",
+		"moduleResolution": "nodenext",
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../../base/src/*"