@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

package/cypress/specs/Tokenizer.cy.tsx

@@ -0,0 +1,173 @@
+import Tokenizer from "../../src/Tokenizer.js";
+import Token from "../../src/Token.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base/dist/index.js";
+
+const onTokenDelete = (event: UI5CustomEvent<Tokenizer, "token-delete">) => {
+	event.detail.tokens.forEach(token => {
+		(event.target as Tokenizer).removeChild(token);
+	});
+};
+
+describe("Tokenizer - multi-line and Clear All", () => {
+	it("'Clear All' link is rendered for multi-line tokenizer and show-clear-all set to true", () => {
+		cy.mount(
+			<Tokenizer showClearAll={true} multiLine={true}>
+				<Token text="Andora"></Token>
+				<Token text="Bulgaria"></Token>
+				<Token text="Canada"></Token>
+				<Token text="Denmark"></Token>
+				<Token text="Estonia"></Token>
+				<Token text="Finland"></Token>
+				<Token text="Germany"></Token>
+			</Tokenizer>
+		);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is rendered even for 1 token when in multi-line mode", () => {
+		cy.mount(
+			<Tokenizer showClearAll={true} multiLine={true}>
+				<Token text="Andora"></Token>
+			</Tokenizer>
+		);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is not rendered for single-line tokenizer even when show-clear-all is set to true", () => {
+		cy.mount(
+			<Tokenizer showClearAll={true}>
+				<Token text="Andora"></Token>
+			</Tokenizer>
+		);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line tokenizer when show-clear-all is set to false", () => {
+		cy.mount(
+			<Tokenizer multiLine={true}>
+				<Token text="Andora"></Token>
+				<Token text="Bulgaria"></Token>
+				<Token text="Canada"></Token>
+				<Token text="Denmark"></Token>
+				<Token text="Estonia"></Token>
+				<Token text="Finland"></Token>
+				<Token text="Germany"></Token>
+			</Tokenizer>
+		);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line readonly tokenizer when show-clear-all 'true'", () => {
+		cy.mount(
+			<Tokenizer showClearAll={true} multiLine={true} readonly={true}>
+				<Token text="Andora"></Token>
+				<Token text="Bulgaria"></Token>
+				<Token text="Canada"></Token>
+				<Token text="Denmark"></Token>
+				<Token text="Estonia"></Token>
+				<Token text="Finland"></Token>
+				<Token text="Germany"></Token>
+			</Tokenizer>
+		);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'n-more' link is not rendered for multi-line tokenizer", () => {
+		cy.mount(
+			<Tokenizer multiLine={true} style={{ width: "100px" }}>
+				<Token text="Andora"></Token>
+				<Token text="Bulgaria"></Token>
+				<Token text="Canada"></Token>
+				<Token text="Denmark"></Token>
+				<Token text="Estonia"></Token>
+				<Token text="Finland"></Token>
+				<Token text="Germany"></Token>
+			</Tokenizer>
+		);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--more-text")
+			.should("not.exist");
+	});
+
+	it("Pressing 'Clear All' link fires token-delete event", () => {
+		cy.mount(
+			<Tokenizer multiLine={true} showClearAll={true}>
+				<Token text="Andora"></Token>
+				<Token text="Bulgaria"></Token>
+				<Token text="Canada"></Token>
+			</Tokenizer>
+		);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]").then($tokenizer => $tokenizer.get(0).addEventListener("token-delete", cy.stub().as("delete")));
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.eq(0)
+			.click();
+
+		cy.get("@delete")
+			.should("have.been.calledOnce");
+	});
+
+	it("tests token removal", () => {
+		cy.mount(
+			<Tokenizer id="test-token-delete" style={{ width: "100px" }} onTokenDelete={onTokenDelete}>
+				<Token text="aute"></Token>
+				<Token text="ad"></Token>
+				<Token text="exercitation"></Token>
+				<Token text="esse"></Token>
+				<Token text="labore"></Token>
+				<Token text="amet"></Token>
+				<Token text="excepteur"></Token>
+			</Tokenizer>
+		);
+
+		cy.get("#test-token-delete")
+			.find("[ui5-token]")
+			.should("have.length", 7);
+
+		cy.get("#test-token-delete")
+			.shadow()
+			.find(".ui5-tokenizer-more-text")
+			.realClick();
+
+		cy.get("#test-token-delete")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("be.visible");
+
+		cy.get("#test-token-delete")
+			.shadow()
+			.find("[ui5-responsive-popover] [ui5-list] [ui5-li]").eq(0)
+			.shadow()
+			.find(".ui5-li-deletebtn [ui5-button]")
+			.realClick();
+
+		cy.get("#test-token-delete")
+			.find("[ui5-token]")
+			.should("have.length", 6);
+	});
+});

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

@@ -1,34 +1,32 @@
-import { html } from "lit";
-import "../../src/Toolbar.js";
-import "../../src/ToolbarButton.js";
-import "../../src/ToolbarSelect.js";
-import "../../src/ToolbarSelectOption.js";
-import "../../src/ToolbarSeparator.js";
-import "../../src/ToolbarSpacer.js";
-import "../../src/Popover.js";
+import Toolbar from "../../src/Toolbar.js";
+import ToolbarButton from "../../src/ToolbarButton.js";
+import ToolbarSelect from "../../src/ToolbarSelect.js";
+import ToolbarSelectOption from "../../src/ToolbarSelectOption.js";
+import ToolbarSeparator from "../../src/ToolbarSeparator.js";
+import ToolbarSpacer from "../../src/ToolbarSpacer.js";
 import type ToolbarItem from "../../src/ToolbarItem.js";
-import "@ui5/webcomponents-icons/dist/add.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/employee.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import employee from "@ui5/webcomponents-icons/dist/employee.js";
 
 describe("Toolbar general interaction", () => {
 	it.skip("Should not return null upon calling getDomRef for all direct child items", () => {
-		cy.mount(html`
-			<ui5-toolbar id="otb_standard">
-				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 2"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 3"></ui5-toolbar-button>
-				<ui5-toolbar-select>
-					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
-					<ui5-toolbar-select-option>2</ui5-toolbar-select-option>
-					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
-				</ui5-toolbar-select>
-				<ui5-toolbar-separator></ui5-toolbar-separator>
-				<ui5-toolbar-button text="Button 4"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 5"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 6"></ui5-toolbar-button>
-			</ui5-toolbar>
-		`);
+		cy.mount(
+			<Toolbar id="otb_standard">
+				<ToolbarButton text="Button 1"></ToolbarButton>
+				<ToolbarButton text="Button 2"></ToolbarButton>
+				<ToolbarButton text="Button 3"></ToolbarButton>
+				<ToolbarSelect>
+					<ToolbarSelectOption>1</ToolbarSelectOption>
+					<ToolbarSelectOption>2</ToolbarSelectOption>
+					<ToolbarSelectOption>3</ToolbarSelectOption>
+				</ToolbarSelect>
+				<ToolbarSeparator></ToolbarSeparator>
+				<ToolbarButton text="Button 4"></ToolbarButton>
+				<ToolbarButton text="Button 5"></ToolbarButton>
+				<ToolbarButton text="Button 6"></ToolbarButton>
+			</Toolbar>
+		);
 
 		cy.get("#otb_standard")
 			.as("toolbar");
@@ -47,17 +45,17 @@ describe("Toolbar general interaction", () => {
 	});
 
 	it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => {
-		cy.mount(html`
-			<ui5-toolbar id="otb_spacer">
-				<ui5-toolbar-button icon="add" text="Plus" design="Default"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="employee" text="Hire"></ui5-toolbar-button>
-				<ui5-toolbar-separator></ui5-toolbar-separator>
-				<ui5-toolbar-button icon="add" text="Add"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="decline" text="Decline"></ui5-toolbar-button>
-				<ui5-toolbar-spacer></ui5-toolbar-spacer>
-				<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
-			</ui5-toolbar>
-		`);
+		cy.mount(
+			<Toolbar id="otb_spacer">
+				<ToolbarButton icon={add} text="Plus" design="Default"></ToolbarButton>
+				<ToolbarButton icon={employee} text="Hire"></ToolbarButton>
+				<ToolbarSeparator></ToolbarSeparator>
+				<ToolbarButton icon={add} text="Add"></ToolbarButton>
+				<ToolbarButton icon={decline} text="Decline"></ToolbarButton>
+				<ToolbarSpacer></ToolbarSpacer>
+				<ToolbarButton icon={add} text="Append"></ToolbarButton>
+			</Toolbar>
+		);
 
 		cy.get("#otb_spacer")
 			.as("toolbar");
@@ -72,18 +70,18 @@ describe("Toolbar general interaction", () => {
 	});
 
 	it("shouldn't show overflow button if there is enough space", () => {
-		cy.mount(html`
-			<ui5-toolbar style="width:fit-content;max-width:100%;">
-				<ui5-toolbar-button icon="decline">
-				</ui5-toolbar-button>
+		cy.mount(
+			<Toolbar style={{ width: "fit-content", " max-width": "100%;" }}>
+				<ToolbarButton icon={decline}>
+				</ToolbarButton>
 
-				<ui5-toolbar-button icon="add">
-				</ui5-toolbar-button>
+				<ToolbarButton icon={add}>
+				</ToolbarButton>
 
-				<ui5-toolbar-button icon="employee">
-				</ui5-toolbar-button>
-			</ui5-toolbar>
-		`);
+				<ToolbarButton icon={employee}>
+				</ToolbarButton>
+			</Toolbar>
+		);
 
 		cy.get("[ui5-toolbar]")
 			.as("toolbar");
@@ -98,13 +96,13 @@ describe("Toolbar general interaction", () => {
 	});
 
 	it("shouldn't display the overflow button when initially rendered in a hidden container and later made visible", () => {
-		cy.mount(html`
+		cy.mount(
 			<div id="otb_hidden_container" style="display:none;">
-				<ui5-toolbar id="otb_hidden">
-					<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
-				</ui5-toolbar>
+				<Toolbar id="otb_hidden">
+					<ToolbarButton icon={add} text="Append"></ToolbarButton>
+				</Toolbar>
 			</div>
-		`);
+		);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(500);
@@ -124,16 +122,16 @@ describe("Toolbar general interaction", () => {
 	});
 
 	it("Should call event handlers on abstract item", () => {
-		cy.mount(html`
-			<ui5-toolbar>
-				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>
-				<ui5-toolbar-select>
-					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
-					<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
-					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
-				</ui5-toolbar-select>
-			</ui5-toolbar>
-		`);
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Button 1"></ToolbarButton>
+				<ToolbarSelect>
+					<ToolbarSelectOption>1</ToolbarSelectOption>
+					<ToolbarSelectOption selected={true}>2</ToolbarSelectOption>
+					<ToolbarSelectOption>3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
 
 		cy.get("ui5-toolbar-button[text='Button 1']")
 			.then(button => {

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

@@ -1,19 +1,20 @@
-import { html } from "lit";
-import "../../src/Tree.js";
+import Tree from "../../src/Tree.js";
 import "../../src/TreeItem.js";
 
 describe("Tree Tests", () => {
 	it("tests accessibility properties forwarded to the list", () => {
-		cy.mount(html`
-		<ui5-tree
-			accessible-name="Tree"
-			accessible-name-ref="lblDesc1"
-			accessible-description="Description"
-			accessible-description-ref="lblDesc2"
-		></ui5-tree>
-		<div id="lblDesc1">Tree</div>
-		<div id="lblDesc2">Description</div>
-		`);
+		cy.mount(
+			<>
+				<Tree
+					accessibleName="Tree"
+					accessibleNameRef="lblDesc1"
+					accessibleDescription="Description"
+					accessibleDescriptionRef="lblDesc2"
+				></Tree>
+				<div id="lblDesc1">Tree</div>
+				<div id="lblDesc2">Description</div>
+			</>
+		);
 
 		cy.get("[ui5-tree]")
 			.as("tree");

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

@@ -1,17 +1,18 @@
-import { html } from "lit";
-import "../../../src/Label.js";
-import "../../../src/Input.js";
-import "../../../src/List.js";
+import Label from "../../../src/Label.js";
+import Input from "../../../src/Input.js";
+import List from "../../../src/List.js";
 
 describe("AccessibilityTextsHelper", () => {
 	it("Label-for tests", () => {
-		cy.mount(html`
-			<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
-			<ui5-label id="lblDesc1" for="myInput">Desc1</ui5-label>
-			<ui5-label id="lblDesc2" for="myInput">Desc2</ui5-label>
-			<ui5-label id="lblDesc3" for="myInput">Desc3</ui5-label>
-			<label id="lblDesc4" for="myInput">Desc4</label>
-		`);
+		cy.mount(
+			<>
+				<Input id="myInput" placeholder="input placeholder" class="field"></Input>
+				<Label id="lblDesc1" for="myInput">Desc1</Label>
+				<Label id="lblDesc2" for="myInput">Desc2</Label>
+				<Label id="lblDesc3" for="myInput">Desc3</Label>
+				<label id="lblDesc4" for="myInput">Desc4</label>
+			</>
+		);
 
 		// assert
 		cy.get("#myInput")
@@ -34,12 +35,14 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Input accessibleNameRef Tests", () => {
-		cy.mount(html`
-            <ui5-label id="lblEnterName1">FirstDesc</ui5-label>
-            <ui5-label id="lblEnterName2">SecondDesc</ui5-label>
-            <ui5-label id="lblEnterName3">ThirdDesc</ui5-label>
-            <ui5-input id="inputEnterName" accessible-name-ref="lblEnterName1 lblEnterName3" placeholder="Enter your name"></ui5-input>
-        `);
+		cy.mount(
+			<>
+				<Label id="lblEnterName1">FirstDesc</Label>
+				<Label id="lblEnterName2">SecondDesc</Label>
+				<Label id="lblEnterName3">ThirdDesc</Label>
+				<Input id="inputEnterName" accessibleNameRef="lblEnterName1 lblEnterName3" placeholder="Enter your name"></Input>
+			</>
+		);
 
 		// assert
 		cy.get("#inputEnterName")
@@ -81,11 +84,13 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Input accessibleName and accessibleNameRef Tests", () => {
-		cy.mount(html`
-			<ui5-label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</ui5-label>
-			<ui5-label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</ui5-label>
-			<ui5-input id="inputEnterDesc" accessible-name="Some description added by accessibleName" placeholder="Enter description"></ui5-input>
-		`);
+		cy.mount(
+			<>
+				<Label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</Label>
+				<Label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</Label>
+				<Input id="inputEnterDesc" accessibleName="Some description added by accessibleName" placeholder="Enter description"></Input>
+			</>
+		);
 
 		const INITIAL_ACCESSIBLE_NAME = "Some description added by accessibleName";
 		const UPDATED_ACCESSIBLE_NAME = "Another description added by accessibleName";
@@ -158,12 +163,14 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Three inputs with same label accessibleNameRef Tests", () => {
-		cy.mount(html`
-			<ui5-label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</ui5-label>
-			<ui5-input id="testInput1" placeholder="Enter description1"></ui5-input>
-			<ui5-input id="testInput2" accessible-name-ref="lblTestDesc" accessible-name="Hello" placeholder="Enter description2"></ui5-input>
-			<ui5-input id="testInput3" accessible-name-ref="lblTestDesc" placeholder="Enter description3"></ui5-input>
-		`);
+		cy.mount(
+			<>
+				<Label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</Label>
+				<Input id="testInput1" placeholder="Enter description1"></Input>
+				<Input id="testInput2" accessibleNameRef="lblTestDesc" accessibleName="Hello" placeholder="Enter description2"></Input>
+				<Input id="testInput3" accessibleNameRef="lblTestDesc" placeholder="Enter description3"></Input>
+			</>
+		);
 
 		const LBL_TEXT_CONTENT = "Label for testInput1 Desc";
 		const LBL_TEXT_CONTENT_UPDATED = "Another description for testing";
@@ -236,14 +243,16 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Tests generic html elements with for attribute", () => {
-		cy.mount(html`
-			<label id="elId1" for="myInput2">Desc1</label>
-			<label id="elId2" for="myInput2">Desc2</label>
-			<ui5-input id="myInput2" placeholder="input placeholder"></ui5-input>
-			<div id="elId3" for="myInput2">Desc3</div>
-			<span id="elId4" for="myInput2">Desc4</span>
-			<span id="elId5" for="myInput2">Desc5</span>
-		`);
+		cy.mount(
+			<>
+				<label id="elId1" for="myInput2">Desc1</label>
+				<label id="elId2" for="myInput2">Desc2</label>
+				<Input id="myInput2" placeholder="input placeholder"></Input>
+				<label id="elId3" for="myInput2">Desc3</label>
+				<label id="elId4" for="myInput2">Desc4</label>
+				<label id="elId5" for="myInput2">Desc5</label>
+			</>
+		);
 
 		cy.get("#myInput2")
 			.shadow()
@@ -280,11 +289,13 @@ describe("AccessibilityTextsHelper", () => {
 	});
 
 	it("Tests accessibleDescription and accessibleDescriptionRef with ui5-list", () => {
-		cy.mount(html`
-			<ui5-label id="lblDesc1">Desc1</ui5-label>
-			<ui5-label id="lblDesc2">Desc2</ui5-label>
-			<ui5-list id="list" accessible-description-ref="lblDesc1 lblDesc2" accessible-description="Desc3"></ui5-list>
-		`);
+		cy.mount(
+			<>
+				<Label id="lblDesc1">Desc1</Label>
+				<Label id="lblDesc2">Desc2</Label>
+				<List id="list" accessibleDescriptionRef="lblDesc1 lblDesc2" accessibleDescription="Desc3"></List>
+			</>
+		);
 
 		cy.get("#list")
 			.shadow()