refactor(ui5-button): remove activeIcon property (#513)

BREAKING CHANGE: activeIcon property is removed
SAP · Jun 4, 2019 · 8d8c343 · 8d8c343
1 parent abfb221
commit 8d8c343
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 46 deletions.
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -6,10 +6,10 @@
 		data-sap-focus-ref
 		{{> ariaPressed}}
 	>
-		{{#if _iconSettings}}
+		{{#if icon}}
 			<ui5-icon
 				class="{{classes.icon}}"
-				src="{{_iconSettings.src}}"
+				src="{{icon}}"
 			></ui5-icon>
 		{{/if}}
 

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -68,19 +68,6 @@ const metadata = {
 		 */
 		iconEnd: { type: Boolean },
 
-		/**
-		 * Defines an alternative icon for the active (depressed) state of the <code>ui5-button</code>.
-		 * <br><br>
-		 * <b>Note:</b> Both <code>icon</code> and <code>activeIcon</code>
-		 * properties should be defined and have the type
-		 * icon font.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		activeIcon: { type: URI, defaultValue: null },
-
 		/**
 		 * When set to <code>true</code>, the <code>ui5-button</code> will
 		 * automatically submit the nearest form element upon <code>press</code>.
@@ -192,14 +179,6 @@ class Button extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (this.icon) {
-			this._iconSettings = {
-				src: this._active && this.activeIcon ? this.activeIcon : this.icon,
-			};
-		} else {
-			this._iconSettings = null;
-		}
-
 		if (this.submits && !Button.FormSupport) {
 			console.warn(`In order for the "submits" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
 		}
@@ -271,10 +250,6 @@ class Button extends UI5Element {
 		};
 	}
 
-	get iconSrc() {
-		return this._active ? this.activeIcon : this.icon;
-	}
-
 	get ariaDisabled() {
 		return this.disabled ? "true" : undefined;
 	}

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Button.html b/packages/main/test/sap/ui/webcomponents/main/pages/Button.html
@@ -48,14 +48,14 @@
 
 	<ui5-button icon="sap-icon://employee">Action Bar Button</ui5-button>
 	<ui5-button icon="sap-icon://download"></ui5-button>
-	<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu"></ui5-button>
+	<ui5-button icon="sap-icon://download"></ui5-button>
 
 	<br />
 	<br />
 
 	<ui5-button icon="sap-icon://employee">Action Bar Button</ui5-button>
 	<ui5-button icon="sap-icon://download"></ui5-button>
-	<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu"></ui5-button>
+	<ui5-button icon="sap-icon://download"></ui5-button>
 
 
 	<br/>
@@ -119,7 +119,7 @@
 
 	<ui5-togglebutton icon="sap-icon://employee">Action Bar Button</ui5-togglebutton>
 	<ui5-togglebutton icon="sap-icon://download"></ui5-togglebutton>
-	<ui5-togglebutton icon="sap-icon://download" active-icon="sap-icon://menu"></ui5-togglebutton>
+	<ui5-togglebutton icon="sap-icon://download"></ui5-togglebutton>
 
 	<br/>
 	<br/>

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html b/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html
@@ -151,7 +151,7 @@
 			<ui5-button type="Positive">Approve</ui5-button>
 			<ui5-button type="Negative">Decline</ui5-button>
 			<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
-			<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu">Activate</ui5-button>
+			<ui5-button icon="sap-icon://download">Activate</ui5-button>
 		</section>
 
 		<section class="row row-centered">

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.openui5.html b/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.openui5.html
@@ -146,7 +146,7 @@
 			<ui5-button type="Positive">Approve</ui5-button>
 			<ui5-button type="Negative">Decline</ui5-button>
 			<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
-			<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu">Activate</ui5-button>
+			<ui5-button icon="sap-icon://download">Activate</ui5-button>
 		</section>
 
 		<section class="row row-centered">

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Panel.html b/packages/main/test/sap/ui/webcomponents/main/pages/Panel.html
@@ -73,8 +73,8 @@
 			<ui5-title>Expandable but not expanded</ui5-title>
 			<ui5-button id="b1">Add child </ui5-button>
 			<ui5-label id="l1">No new children added yet.</ui5-label>
-			<ui5-button type="Reject" icon="sap-icon://cancel" active-icon="sap-icon://warning">Cancel</ui5-button>
-			<ui5-button type="Accept" icon="sap-icon://accept" active-icon="sap-icon://loan">Done</ui5-button>
+			<ui5-button type="Reject" icon="sap-icon://cancel">Cancel</ui5-button>
+			<ui5-button type="Accept" icon="sap-icon://accept">Done</ui5-button>
 		</div>
 
 		<!-- Content -->

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Button.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Button.sample.html
@@ -64,15 +64,15 @@ <h3>Button with Icon</h3>
 		<div class="snippet">
 			<ui5-button class="samples-margin" icon="sap-icon://employee">Add</ui5-button>
 			<ui5-button class="samples-margin" icon="sap-icon://download" icon-end>Download</ui5-button>
-			<ui5-button class="samples-margin" icon="sap-icon://download" active-icon="sap-icon://menu">Active Icon</ui5-button>
+			<ui5-button class="samples-margin" icon="sap-icon://download">Active Icon</ui5-button>
 			<ui5-button class="samples-margin" type="Positive" icon="sap-icon://add">Add</ui5-button>
 			<ui5-button class="samples-margin" type="Negative" icon="sap-icon://delete">Remove</ui5-button>
 			<ui5-button class="samples-margin" type="Transparent" icon="sap-icon://accept">Accept</ui5-button>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-button icon="sap-icon://employee">Add</ui5-button>
 <ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
-<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu">Active Icon</ui5-button>
+<ui5-button icon="sap-icon://download">Active Icon</ui5-button>
 <ui5-button type="Positive" icon="sap-icon://add">Add</ui5-button>
 <ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
 <ui5-button type="Transparent" icon="sap-icon://accept">Transparent</ui5-button>

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/ToggleButton.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/ToggleButton.sample.html
@@ -86,18 +86,18 @@ <h3>ToggleButton with Icon</h3>
 	<section>
 		<h3>ToggleButton with Active Icon (press and hold to try)</h3>
 		<div class="snippet">
-			<ui5-togglebutton class="samples-margin" icon="sap-icon://menu" active-icon="sap-icon://action-settings">Menu</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Emphasized" icon="sap-icon://accept" active-icon="sap-icon://message-success">Add</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Default" icon="sap-icon://nav-back" active-icon="sap-icon://accept">Back</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Positive" icon="sap-icon://accept" active-icon="sap-icon://activate">Accept</ui5-togglebutton>
-			<ui5-togglebutton class="samples-margin" type="Negative" icon="sap-icon://sys-cancel" active-icon="sap-icon://incident">Deny</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" icon="sap-icon://menu">Menu</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" type="Emphasized" icon="sap-icon://accept">Add</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
+			<ui5-togglebutton class="samples-margin" type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
-<ui5-togglebutton icon="sap-icon://menu" active-icon="sap-icon://action-settings">Menu</ui5-togglebutton>
-<ui5-togglebutton type="Emphasized" icon="sap-icon://accept" active-icon="sap-icon://message-success">Add</ui5-togglebutton>
-<ui5-togglebutton type="Default" icon="sap-icon://nav-back" active-icon="sap-icon://accept">Back</ui5-togglebutton>
-<ui5-togglebutton type="Positive" icon="sap-icon://accept" active-icon="sap-icon://activate">Accept</ui5-togglebutton>
-<ui5-togglebutton type="Negative" icon="sap-icon://sys-cancel" active-icon="sap-icon://incident">Deny</ui5-togglebutton>
+<ui5-togglebutton icon="sap-icon://menu">Menu</ui5-togglebutton>
+<ui5-togglebutton type="Emphasized" icon="sap-icon://accept">Add</ui5-togglebutton>
+<ui5-togglebutton type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
+<ui5-togglebutton type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
+<ui5-togglebutton type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
 		</xmp></pre>
 	</section>