feat(ui5-toolbar-button): add second (end) icon (#9048)

ToolbarButton now can have second icon at the end

BREAKING CHANGE:  iconEnd property is changed from boolean to string type and now can accept name for second/end icon.

Before:

`<ui5-toolbar-button icon="home" icon-end>Button</ui5-toolbar-button>`

Now:

`<ui5-toolbar-button end-icon="home">Button</ui5-toolbar-button>`

or 

`<ui5-toolbar-button icon="employee" end-icon="home">Button</ui5-toolbar-button>`

packages/main/src/ToolbarButton.hbs

@@ -3,7 +3,7 @@
 	id="{{this.id}}"
 	style="{{this.styles}}"
 	icon="{{this.icon}}"
-	?icon-end="{{this.iconEnd}}"
+	end-icon="{{this.endIcon}}"
 	tooltip="{{this.tooltip}}"
 	accessible-name="{{this.accessibleName}}"
 	accessible-name-ref="{{this.accessibleNameRef}}"

packages/main/src/ToolbarButton.ts

@@ -76,12 +76,20 @@ class ToolbarButton extends ToolbarItem {
 	icon!: string;
 
 	/**
-	 * Defines whether the icon should be displayed after the component text.
-	 * @default false
+	 * Defines the icon, displayed as graphical element within the component after the button text.
+	 *
+	 * **Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.
+	 * Usage of `endIcon` only should be avoided.
+	 *
+	 * The SAP-icons font provides numerous options.
+	 *
+	 * Example:
+	 * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+	 * @default ""
 	 * @public
 	 */
-	@property({ type: Boolean })
-	iconEnd!: boolean;
+	@property()
+	endIcon!: string;
 
 	/**
 	 * Defines the tooltip of the component.

packages/main/src/ToolbarPopoverButton.hbs

@@ -1,6 +1,6 @@
 <ui5-button
 	icon="{{this.icon}}"
-	?icon-end="{{this.iconEnd}}"
+	end-icon="{{this.endIcon}}"
 	accessible-name="{{this.accessibleName}}"
 	accessible-name-ref="{{this.accessibleNameRef}}"
 	.accessibilityAttributes="{{this.accessibilityAttributes}}"

packages/main/test/pages/ToolbarButton.html

@@ -21,7 +21,7 @@
                 design="Emphasized"
                 disabled
                 icon="sap-icon://add"
-                icon-end
+                end-icon="sap-icon://employee"
                 tooltip="Add"
             ></ui5-toolbar-button>
 

packages/main/test/specs/ToolbarButton.spec.js

@@ -12,14 +12,14 @@ describe("Toolbar general interaction", () => {
 		const buttonDesign = await button.getAttribute("design");
 		const buttonDisabled = await button.getAttribute("disabled");
 		const buttonIcon = await button.getAttribute("icon");
-		const buttonIconEnd = await button.getAttribute("icon-end");
+		const buttonEndIcon = await button.getAttribute("end-icon");
 		const buttonTooltip = await button.getAttribute("tooltip");
 
 		assert.strictEqual(buttonText, "Back", "Button text is correct");
 		assert.strictEqual(buttonDesign, "Emphasized", "Button design is correct");
 		assert.strictEqual(buttonDisabled, "true", "Button is disabled");
 		assert.strictEqual(buttonIcon, "sap-icon://add", "Button icon is correct");
-		assert.strictEqual(buttonIconEnd, "", "Button icon-end is correct");
+		assert.strictEqual(buttonEndIcon, "sap-icon://employee", "Button end-icon is correct");
 		assert.strictEqual(buttonTooltip, "Add", "Button tooltip is correct");
 	});
 
@@ -52,14 +52,14 @@ describe("Toolbar general interaction", () => {
 		const buttonDesign = await popover.$("ui5-button").getAttribute("design");
 		const buttonDisabled = await popover.$("ui5-button").getAttribute("disabled");
 		const buttonIcon = await popover.$("ui5-button").getAttribute("icon");
-		const buttonIconEnd = await popover.$("ui5-button").getAttribute("icon-end");
+		const buttonEndIcon = await popover.$("ui5-button").getAttribute("end-icon");
 		const buttonTooltip = await popover.$("ui5-button").getAttribute("tooltip");
 
 		assert.strictEqual(buttonText, "Back", "Button's text is correct inside popover");
 		assert.strictEqual(buttonDesign, "Emphasized", "Button's design is correct inside popover");
 		assert.strictEqual(buttonDisabled, "true", "Button is disabled inside popover");
 		assert.strictEqual(buttonIcon, "sap-icon://add", "Button's icon is correct inside popover");
-		assert.strictEqual(buttonIconEnd, "", "Button's icon-end is correct inside popover");
+		assert.strictEqual(buttonEndIcon, "sap-icon://employee", "Button's end-icon is correct inside popover");
 		assert.strictEqual(buttonTooltip, "Add", "Button's tooltip is correct inside popover");
 	});