diff --git a/docs/1-getting-started/03-understanding-components-APIs.md b/docs/1-getting-started/03-understanding-components-APIs.md index aa75ff0791b7..55c043ebf389 100644 --- a/docs/1-getting-started/03-understanding-components-APIs.md +++ b/docs/1-getting-started/03-understanding-components-APIs.md @@ -202,7 +202,7 @@ Here's a summary of `slot` types: For this task, you can again use standard DOM methods: ```js -const myMessage = document.getElementsByTagName("ui5-messagestrip")[0]; +const myMessage = document.getElementsByTagName("ui5-message-strip")[0]; myMessage.addEventListener("close", () => { console.log("The user dismissed the message"); }); diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html index f4e97ff81a37..d5157594db6f 100644 --- a/packages/fiori/test/pages/FCL.html +++ b/packages/fiori/test/pages/FCL.html @@ -52,9 +52,9 @@
1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -108,9 +108,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -148,9 +148,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
diff --git a/packages/fiori/test/pages/Wizard.html b/packages/fiori/test/pages/Wizard.html index f07c0ba1f79b..2c5959f328c7 100644 --- a/packages/fiori/test/pages/Wizard.html +++ b/packages/fiori/test/pages/Wizard.html @@ -30,9 +30,9 @@

Wizard

1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -86,9 +86,9 @@

Wizard

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -126,9 +126,9 @@

Wizard

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -158,9 +158,9 @@

Wizard non-standard

1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -211,9 +211,9 @@

Wizard non-standard

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -251,9 +251,9 @@

Wizard non-standard

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -281,9 +281,9 @@

Wizard non-standard

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -312,9 +312,9 @@

Wizard non-standard 2

1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -403,9 +403,9 @@

Wizard non-standard 2

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -434,9 +434,9 @@

Wizard non-standard 3

1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -552,9 +552,9 @@

Wizard non-standard 3

1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -607,9 +607,9 @@

Wizard non-standard 3

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -647,9 +647,9 @@

Wizard non-standard 3

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
diff --git a/packages/fiori/test/pages/Wizard_test.html b/packages/fiori/test/pages/Wizard_test.html index 3d4ef5778295..c664e92867e3 100644 --- a/packages/fiori/test/pages/Wizard_test.html +++ b/packages/fiori/test/pages/Wizard_test.html @@ -22,9 +22,9 @@
1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -96,9 +96,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -139,9 +139,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -171,9 +171,9 @@
1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -232,9 +232,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -272,9 +272,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
diff --git a/packages/fiori/test/pages/Wizard_test_mobile.html b/packages/fiori/test/pages/Wizard_test_mobile.html index e90154eadb10..fbee798e8df3 100644 --- a/packages/fiori/test/pages/Wizard_test_mobile.html +++ b/packages/fiori/test/pages/Wizard_test_mobile.html @@ -21,9 +21,9 @@
1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -41,9 +41,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -51,9 +51,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -61,9 +61,9 @@
1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -81,9 +81,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -91,9 +91,9 @@ Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
diff --git a/packages/fiori/test/samples/Wizard.sample.html b/packages/fiori/test/samples/Wizard.sample.html index 6642419eddaa..e6965027c985 100644 --- a/packages/fiori/test/samples/Wizard.sample.html +++ b/packages/fiori/test/samples/Wizard.sample.html @@ -31,9 +31,9 @@

Wizard

1. Product Type
- + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat. @@ -86,9 +86,9 @@

Wizard

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
@@ -126,9 +126,9 @@

Wizard

Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien - + The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with. -
+
diff --git a/packages/fiori/test/specs/Wizard.spec.js b/packages/fiori/test/specs/Wizard.spec.js index 9ba13df0b34d..94ad0f4639b3 100644 --- a/packages/fiori/test/specs/Wizard.spec.js +++ b/packages/fiori/test/specs/Wizard.spec.js @@ -99,7 +99,7 @@ describe("Wizard general interaction", () => { const inpStepChangeCause = await browser.$("#inpStepChangeCause"); const wizardStep = await browser.$("ui5-wizard-step"); - const messageStrip = await wizardStep.shadow$("ui5-messagestrip") + const messageStrip = await wizardStep.shadow$("ui5-message-strip") const firstFocusableElement = await messageStrip.shadow$(`ui5-button`); // act - click on the first step in the header diff --git a/packages/main/README.md b/packages/main/README.md index 0f8ec9ba0e0c..5e6911965303 100644 --- a/packages/main/README.md +++ b/packages/main/README.md @@ -45,7 +45,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and | List - Standard Item | `ui5-li` | `import "@ui5/webcomponents/dist/StandardListItem.js";` | | List - Custom Item | `ui5-li-custom` | `import "@ui5/webcomponents/dist/CustomListItem.js";` | | List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` | -| Message Strip | `ui5-messagestrip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` | +| Message Strip | `ui5-message-strip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` | | Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` | | Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` | | Multi Input | `ui5-multi-input` | `import "@ui5/webcomponents/dist/MultiInput.js";` | diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs index ea867da235f8..dfb6f7556048 100644 --- a/packages/main/src/MessageStrip.hbs +++ b/packages/main/src/MessageStrip.hbs @@ -8,25 +8,25 @@ {{#unless hideIcon}} {{/unless}} {{hiddenText}} - + {{#unless hideCloseButton}} diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js index b2154719ca47..d3e6f8fb5924 100644 --- a/packages/main/src/MessageStrip.js +++ b/packages/main/src/MessageStrip.js @@ -19,7 +19,8 @@ import messageStripCss from "./generated/themes/MessageStrip.css.js"; * @public */ const metadata = { - tag: "ui5-messagestrip", + tag: "ui5-message-strip", + altTag: "ui5-messagestrip", languageAware: true, properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ { @@ -113,13 +114,13 @@ const metadata = { * *

Overview

* - * The ui5-messagestrip component enables the embedding of app-related messages. + * The ui5-message-strip component enables the embedding of app-related messages. * It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. * Each message can have a Close button, so that it can be removed from the UI, if needed. * *

Usage

* - * For the ui5-messagestrip component, you can define whether it displays + * For the ui5-message-strip component, you can define whether it displays * an icon in the beginning and a close button. Moreover, its size and background * can be controlled with CSS. * @@ -131,7 +132,7 @@ const metadata = { * @author SAP SE * @alias sap.ui.webcomponents.main.MessageStrip * @extends UI5Element - * @tagname ui5-messagestrip + * @tagname ui5-message-strip * @public * @since 0.9.0 */ @@ -173,10 +174,10 @@ class MessageStrip extends UI5Element { static designClassesMappings() { return { - "Information": "ui5-messagestrip-root--info", - "Positive": "ui5-messagestrip-root--positive", - "Negative": "ui5-messagestrip-root--negative", - "Warning": "ui5-messagestrip-root--warning", + "Information": "ui5-message-strip-root--info", + "Positive": "ui5-message-strip-root--positive", + "Negative": "ui5-message-strip-root--negative", + "Warning": "ui5-message-strip-root--warning", }; } @@ -200,9 +201,9 @@ class MessageStrip extends UI5Element { get classes() { return { root: { - "ui5-messagestrip-root": true, - "ui5-messagestrip-root-hide-icon": this.hideIcon, - "ui5-messagestrip-root-hide-close-button": this.hideCloseButton, + "ui5-message-strip-root": true, + "ui5-message-strip-root-hide-icon": this.hideIcon, + "ui5-message-strip-root-hide-close-button": this.hideCloseButton, [this.designClasses]: true, }, }; diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css index 2f708a38a181..26b1a4973341 100644 --- a/packages/main/src/themes/MessageStrip.css +++ b/packages/main/src/themes/MessageStrip.css @@ -6,73 +6,73 @@ } /** Root classes **/ -.ui5-messagestrip-root { +.ui5-message-strip-root { width: 100%; height: 100%; display: flex; - border-radius: var(--_ui5_messagestrip_border_radius); - padding: var(--_ui5_messagestrip_padding); - border-width: var(--_ui5_messagestrip_border_width); + border-radius: var(--_ui5_message_strip_border_radius); + padding: var(--_ui5_message_strip_padding); + border-width: var(--_ui5_message_strip_border_width); border-style: solid; box-sizing: border-box; position: relative; } -.ui5-messagestrip-root-hide-icon { - padding: var(--_ui5_messagestrip_padding_no_icon); +.ui5-message-strip-root-hide-icon { + padding: var(--_ui5_message_strip_padding_no_icon); } -.ui5-messagestrip-root-hide-close-button { +.ui5-message-strip-root-hide-close-button { padding-right: 1rem; } -.ui5-messagestrip-root--info { +.ui5-message-strip-root--info { background-color: var(--sapInformationBackground); - border-color: var(--_ui5_messagestrip_information_border_color); + border-color: var(--_ui5_message_strip_information_border_color); color: var(--sapTextColor); } -.ui5-messagestrip-root--info .ui5-messagestrip-icon { +.ui5-message-strip-root--info .ui5-message-strip-icon { color: var(--sapInformativeElementColor); } -.ui5-messagestrip-root--positive { +.ui5-message-strip-root--positive { background-color: var(--sapSuccessBackground); - border-color: var(--_ui5_messagestrip_success_border_color); + border-color: var(--_ui5_message_strip_success_border_color); } -.ui5-messagestrip-root--positive .ui5-messagestrip-icon { +.ui5-message-strip-root--positive .ui5-message-strip-icon { color: var(--sapPositiveElementColor); } -.ui5-messagestrip-root--negative { +.ui5-message-strip-root--negative { background-color: var(--sapErrorBackground); - border-color: var(--_ui5_messagestrip_error_border_color); + border-color: var(--_ui5_message_strip_error_border_color); } -.ui5-messagestrip-root--negative .ui5-messagestrip-icon { +.ui5-message-strip-root--negative .ui5-message-strip-icon { color: var(--sapNegativeElementColor); } -.ui5-messagestrip-root--warning { +.ui5-message-strip-root--warning { background-color: var(--sapWarningBackground); - border-color: var(--_ui5_messagestrip_warning_border_color); + border-color: var(--_ui5_message_strip_warning_border_color); } -.ui5-messagestrip-root--warning .ui5-messagestrip-icon { +.ui5-message-strip-root--warning .ui5-message-strip-icon { color: var(--sapCriticalElementColor); } /** Icon wrapper **/ -.ui5-messagestrip-icon-wrapper { +.ui5-message-strip-icon-wrapper { position: absolute; - top: var(--_ui5_messagestrip_icon_top); + top: var(--_ui5_message_strip_icon_top); left: 0.75rem; box-sizing: border-box; } /** Text **/ -.ui5-messagestrip-text { +.ui5-message-strip-text { width: 100%; color: var(--sapTextColor); line-height: 1.2; @@ -81,43 +81,43 @@ } /** Close button **/ -.ui5-messagestrip-close-button { - width: var(--_ui5_messagestrip_close_button_size); - min-width: var(--_ui5_messagestrip_close_button_size); - height: var(--_ui5_messagestrip_close_button_size); - min-height: var(--_ui5_messagestrip_close_button_size); +.ui5-message-strip-close-button { + width: var(--_ui5_message_strip_close_button_size); + min-width: var(--_ui5_message_strip_close_button_size); + height: var(--_ui5_message_strip_close_button_size); + min-height: var(--_ui5_message_strip_close_button_size); position: absolute; right: 0.125rem; top: 0.125rem; } -.ui5-messagestrip-close-button::part(icon) { +.ui5-message-strip-close-button::part(icon) { width: .75rem; height: .75rem; } /* RTL */ -.ui5-messagestrip-root[dir="rtl"] { +.ui5-message-strip-root[dir="rtl"] { padding-right: 2.5rem; padding-left: 2rem; } -[dir="rtl"] .ui5-messagestrip-root-hide-icon { +[dir="rtl"] .ui5-message-strip-root-hide-icon { padding-right: 1rem; padding-left: 2rem; } -[dir="rtl"] .ui5-messagestrip-root-hide-close-button { +[dir="rtl"] .ui5-message-strip-root-hide-close-button { padding-left: 1rem; padding-right: 0; } -[dir="rtl"] .ui5-messagestrip-icon-wrapper { +[dir="rtl"] .ui5-message-strip-icon-wrapper { right: 0.75rem; left: 0; } -[dir="rtl"] .ui5-messagestrip-close-button { +[dir="rtl"] .ui5-message-strip-close-button { left: 0.125rem; right: auto; } diff --git a/packages/main/src/themes/base/MessageStrip-parameters.css b/packages/main/src/themes/base/MessageStrip-parameters.css index 43a95dcff4d4..e073d0e993ff 100644 --- a/packages/main/src/themes/base/MessageStrip-parameters.css +++ b/packages/main/src/themes/base/MessageStrip-parameters.css @@ -1,21 +1,21 @@ :root{ - --_ui5_messagestrip_icon_width: 2.5rem; - --_ui5_messagestrip_border_radius: 0.1875rem; - --_ui5_messagestrip_success_border_color: var(--sapSuccessBorderColor); - --_ui5_messagestrip_error_border_color: var(--sapErrorBorderColor); - --_ui5_messagestrip_warning_border_color: var(--sapWarningBorderColor); - --_ui5_messagestrip_information_border_color: var(--sapInformationBorderColor); - --_ui5_messagestrip_button_border_width: 0; - --_ui5_messagestrip_button_border_style: none; - --_ui5_messagestrip_button_border_color: transparent; - --_ui5_messagestrip_button_border_radius: 0; - --_ui5_messagestrip_padding: 0.4375rem 2.5rem 0.4375rem 2.5rem; - --_ui5_messagestrip_padding_no_icon: 0.4375rem 2.5rem 0.4375rem 1rem; - --_ui5_messagestrip_button_height: 1.625rem; - --_ui5_messagestrip_border_width: 1px; - --_ui5_messagestrip_close_button_border: none; - --_ui5_messagestrip_close_button_size: 1.625rem; - --_ui5_messagestrip_icon_top: 0.4375rem; - --_ui5_messagestrip_focus_width: 1px; - --_ui5_messagestrip_focus_offset: -2px; + --_ui5_message_strip_icon_width: 2.5rem; + --_ui5_message_strip_border_radius: 0.1875rem; + --_ui5_message_strip_success_border_color: var(--sapSuccessBorderColor); + --_ui5_message_strip_error_border_color: var(--sapErrorBorderColor); + --_ui5_message_strip_warning_border_color: var(--sapWarningBorderColor); + --_ui5_message_strip_information_border_color: var(--sapInformationBorderColor); + --_ui5_message_strip_button_border_width: 0; + --_ui5_message_strip_button_border_style: none; + --_ui5_message_strip_button_border_color: transparent; + --_ui5_message_strip_button_border_radius: 0; + --_ui5_message_strip_padding: 0.4375rem 2.5rem 0.4375rem 2.5rem; + --_ui5_message_strip_padding_no_icon: 0.4375rem 2.5rem 0.4375rem 1rem; + --_ui5_message_strip_button_height: 1.625rem; + --_ui5_message_strip_border_width: 1px; + --_ui5_message_strip_close_button_border: none; + --_ui5_message_strip_close_button_size: 1.625rem; + --_ui5_message_strip_icon_top: 0.4375rem; + --_ui5_message_strip_focus_width: 1px; + --_ui5_message_strip_focus_offset: -2px; } diff --git a/packages/main/src/themes/sap_belize_hcb/MessageStrip-parameters.css b/packages/main/src/themes/sap_belize_hcb/MessageStrip-parameters.css index 4e9b8447489d..a742e9564a62 100644 --- a/packages/main/src/themes/sap_belize_hcb/MessageStrip-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/MessageStrip-parameters.css @@ -1,10 +1,10 @@ @import "../base/MessageStrip-parameters.css"; :root{ - --_ui5_messagestrip_close_button_size: 1.5rem; - --_ui5_messagestrip_close_button_border: 1px solid var(--sapButton_BorderColor); - --_ui5_messagestrip_border_width: 0.125rem; - --_ui5_messagestrip_icon_top: 0.375rem; - --_ui5_messagestrip_focus_width: 0.125rem; - --_ui5_messagestrip_focus_offset: -2px; + --_ui5_message_strip_close_button_size: 1.5rem; + --_ui5_message_strip_close_button_border: 1px solid var(--sapButton_BorderColor); + --_ui5_message_strip_border_width: 0.125rem; + --_ui5_message_strip_icon_top: 0.375rem; + --_ui5_message_strip_focus_width: 0.125rem; + --_ui5_message_strip_focus_offset: -2px; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/MessageStrip-parameters.css b/packages/main/src/themes/sap_belize_hcw/MessageStrip-parameters.css index 4e9b8447489d..a742e9564a62 100644 --- a/packages/main/src/themes/sap_belize_hcw/MessageStrip-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/MessageStrip-parameters.css @@ -1,10 +1,10 @@ @import "../base/MessageStrip-parameters.css"; :root{ - --_ui5_messagestrip_close_button_size: 1.5rem; - --_ui5_messagestrip_close_button_border: 1px solid var(--sapButton_BorderColor); - --_ui5_messagestrip_border_width: 0.125rem; - --_ui5_messagestrip_icon_top: 0.375rem; - --_ui5_messagestrip_focus_width: 0.125rem; - --_ui5_messagestrip_focus_offset: -2px; + --_ui5_message_strip_close_button_size: 1.5rem; + --_ui5_message_strip_close_button_border: 1px solid var(--sapButton_BorderColor); + --_ui5_message_strip_border_width: 0.125rem; + --_ui5_message_strip_icon_top: 0.375rem; + --_ui5_message_strip_focus_width: 0.125rem; + --_ui5_message_strip_focus_offset: -2px; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css index cc69f4b9a9a9..80ccb1b6c653 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css @@ -1,10 +1,10 @@ @import "../base/MessageStrip-parameters.css"; :root{ - --_ui5_messagestrip_close_button_size: 1.5rem; - --_ui5_messagestrip_close_button_border: 1px solid var(--sapButton_BorderColor); - --_ui5_messagestrip_border_width: 0.125rem; - --_ui5_messagestrip_icon_top: 0.375rem; - --_ui5_messagestrip_focus_width: 0.125rem; - --_ui5_messagestrip_focus_offset: -4px; + --_ui5_message_strip_close_button_size: 1.5rem; + --_ui5_message_strip_close_button_border: 1px solid var(--sapButton_BorderColor); + --_ui5_message_strip_border_width: 0.125rem; + --_ui5_message_strip_icon_top: 0.375rem; + --_ui5_message_strip_focus_width: 0.125rem; + --_ui5_message_strip_focus_offset: -4px; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css index cc69f4b9a9a9..80ccb1b6c653 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css @@ -1,10 +1,10 @@ @import "../base/MessageStrip-parameters.css"; :root{ - --_ui5_messagestrip_close_button_size: 1.5rem; - --_ui5_messagestrip_close_button_border: 1px solid var(--sapButton_BorderColor); - --_ui5_messagestrip_border_width: 0.125rem; - --_ui5_messagestrip_icon_top: 0.375rem; - --_ui5_messagestrip_focus_width: 0.125rem; - --_ui5_messagestrip_focus_offset: -4px; + --_ui5_message_strip_close_button_size: 1.5rem; + --_ui5_message_strip_close_button_border: 1px solid var(--sapButton_BorderColor); + --_ui5_message_strip_border_width: 0.125rem; + --_ui5_message_strip_icon_top: 0.375rem; + --_ui5_message_strip_focus_width: 0.125rem; + --_ui5_message_strip_focus_offset: -4px; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/MessageStrip-parameters.css b/packages/main/src/themes/sap_horizon/MessageStrip-parameters.css index b4273c1c75d0..5d46a56b8d34 100644 --- a/packages/main/src/themes/sap_horizon/MessageStrip-parameters.css +++ b/packages/main/src/themes/sap_horizon/MessageStrip-parameters.css @@ -1,9 +1,9 @@ @import "../base/MessageStrip-parameters.css"; :root{ - --_ui5_messagestrip_border_radius: var(--sapElement_BorderCornerRadius); - --_ui5_messagestrip_success_border_color: #DBF782; - --_ui5_messagestrip_error_border_color: #FF8EC4; - --_ui5_messagestrip_warning_border_color: #FFE770; - --_ui5_messagestrip_information_border_color: #7BCFFF; + --_ui5_message_strip_border_radius: var(--sapElement_BorderCornerRadius); + --_ui5_message_strip_success_border_color: #DBF782; + --_ui5_message_strip_error_border_color: #FF8EC4; + --_ui5_message_strip_warning_border_color: #FFE770; + --_ui5_message_strip_information_border_color: #7BCFFF; } \ No newline at end of file diff --git a/packages/main/test/pages/Components.html b/packages/main/test/pages/Components.html index 0fecc89090e1..9ed3a5db0895 100644 --- a/packages/main/test/pages/Components.html +++ b/packages/main/test/pages/Components.html @@ -57,7 +57,7 @@ Discounted Items - +