Skip to content

Commit 8d8c343

Browse files
MapTo0MapTo0
authored
refactor(ui5-button): remove activeIcon property (#513)
BREAKING CHANGE: activeIcon property is removed
1 parent abfb221 commit 8d8c343

File tree

8 files changed

+21
-46
lines changed

8 files changed

+21
-46
lines changed

‎packages/main/src/Button.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
data-sap-focus-ref
77
{{> ariaPressed}}
88
>
9-
{{#if _iconSettings}}
9+
{{#if icon}}
1010
<ui5-icon
1111
class="{{classes.icon}}"
12-
src="{{_iconSettings.src}}"
12+
src="{{icon}}"
1313
></ui5-icon>
1414
{{/if}}
1515

‎packages/main/src/Button.js

-25
Original file line numberDiff line numberDiff line change
@@ -68,19 +68,6 @@ const metadata = {
6868
*/
6969
iconEnd: { type: Boolean },
7070

71-
/**
72-
* Defines an alternative icon for the active (depressed) state of the <code>ui5-button</code>.
73-
* <br><br>
74-
* <b>Note:</b> Both <code>icon</code> and <code>activeIcon</code>
75-
* properties should be defined and have the type
76-
* icon font.
77-
*
78-
* @type {boolean}
79-
* @defaultvalue false
80-
* @public
81-
*/
82-
activeIcon: { type: URI, defaultValue: null },
83-
8471
/**
8572
* When set to <code>true</code>, the <code>ui5-button</code> will
8673
* automatically submit the nearest form element upon <code>press</code>.
@@ -192,14 +179,6 @@ class Button extends UI5Element {
192179
}
193180

194181
onBeforeRendering() {
195-
if (this.icon) {
196-
this._iconSettings = {
197-
src: this._active && this.activeIcon ? this.activeIcon : this.icon,
198-
};
199-
} else {
200-
this._iconSettings = null;
201-
}
202-
203182
if (this.submits && !Button.FormSupport) {
204183
console.warn(`In order for the "submits" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
205184
}
@@ -271,10 +250,6 @@ class Button extends UI5Element {
271250
};
272251
}
273252

274-
get iconSrc() {
275-
return this._active ? this.activeIcon : this.icon;
276-
}
277-
278253
get ariaDisabled() {
279254
return this.disabled ? "true" : undefined;
280255
}

‎packages/main/test/sap/ui/webcomponents/main/pages/Button.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@
4848

4949
<ui5-button icon="sap-icon://employee">Action Bar Button</ui5-button>
5050
<ui5-button icon="sap-icon://download"></ui5-button>
51-
<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu"></ui5-button>
51+
<ui5-button icon="sap-icon://download"></ui5-button>
5252

5353
<br />
5454
<br />
5555

5656
<ui5-button icon="sap-icon://employee">Action Bar Button</ui5-button>
5757
<ui5-button icon="sap-icon://download"></ui5-button>
58-
<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu"></ui5-button>
58+
<ui5-button icon="sap-icon://download"></ui5-button>
5959

6060

6161
<br/>
@@ -119,7 +119,7 @@
119119

120120
<ui5-togglebutton icon="sap-icon://employee">Action Bar Button</ui5-togglebutton>
121121
<ui5-togglebutton icon="sap-icon://download"></ui5-togglebutton>
122-
<ui5-togglebutton icon="sap-icon://download" active-icon="sap-icon://menu"></ui5-togglebutton>
122+
<ui5-togglebutton icon="sap-icon://download"></ui5-togglebutton>
123123

124124
<br/>
125125
<br/>

‎packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@
151151
<ui5-button type="Positive">Approve</ui5-button>
152152
<ui5-button type="Negative">Decline</ui5-button>
153153
<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
154-
<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu">Activate</ui5-button>
154+
<ui5-button icon="sap-icon://download">Activate</ui5-button>
155155
</section>
156156

157157
<section class="row row-centered">

‎packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.openui5.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@
146146
<ui5-button type="Positive">Approve</ui5-button>
147147
<ui5-button type="Negative">Decline</ui5-button>
148148
<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
149-
<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu">Activate</ui5-button>
149+
<ui5-button icon="sap-icon://download">Activate</ui5-button>
150150
</section>
151151

152152
<section class="row row-centered">

‎packages/main/test/sap/ui/webcomponents/main/pages/Panel.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@
7373
<ui5-title>Expandable but not expanded</ui5-title>
7474
<ui5-button id="b1">Add child </ui5-button>
7575
<ui5-label id="l1">No new children added yet.</ui5-label>
76-
<ui5-button type="Reject" icon="sap-icon://cancel" active-icon="sap-icon://warning">Cancel</ui5-button>
77-
<ui5-button type="Accept" icon="sap-icon://accept" active-icon="sap-icon://loan">Done</ui5-button>
76+
<ui5-button type="Reject" icon="sap-icon://cancel">Cancel</ui5-button>
77+
<ui5-button type="Accept" icon="sap-icon://accept">Done</ui5-button>
7878
</div>
7979

8080
<!-- Content -->

‎packages/main/test/sap/ui/webcomponents/main/samples/Button.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,15 @@ <h3>Button with Icon</h3>
6464
<div class="snippet">
6565
<ui5-button class="samples-margin" icon="sap-icon://employee">Add</ui5-button>
6666
<ui5-button class="samples-margin" icon="sap-icon://download" icon-end>Download</ui5-button>
67-
<ui5-button class="samples-margin" icon="sap-icon://download" active-icon="sap-icon://menu">Active Icon</ui5-button>
67+
<ui5-button class="samples-margin" icon="sap-icon://download">Active Icon</ui5-button>
6868
<ui5-button class="samples-margin" type="Positive" icon="sap-icon://add">Add</ui5-button>
6969
<ui5-button class="samples-margin" type="Negative" icon="sap-icon://delete">Remove</ui5-button>
7070
<ui5-button class="samples-margin" type="Transparent" icon="sap-icon://accept">Accept</ui5-button>
7171
</div>
7272
<pre class="prettyprint lang-html"><xmp>
7373
<ui5-button icon="sap-icon://employee">Add</ui5-button>
7474
<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
75-
<ui5-button icon="sap-icon://download" active-icon="sap-icon://menu">Active Icon</ui5-button>
75+
<ui5-button icon="sap-icon://download">Active Icon</ui5-button>
7676
<ui5-button type="Positive" icon="sap-icon://add">Add</ui5-button>
7777
<ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
7878
<ui5-button type="Transparent" icon="sap-icon://accept">Transparent</ui5-button>

‎packages/main/test/sap/ui/webcomponents/main/samples/ToggleButton.sample.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -86,18 +86,18 @@ <h3>ToggleButton with Icon</h3>
8686
<section>
8787
<h3>ToggleButton with Active Icon (press and hold to try)</h3>
8888
<div class="snippet">
89-
<ui5-togglebutton class="samples-margin" icon="sap-icon://menu" active-icon="sap-icon://action-settings">Menu</ui5-togglebutton>
90-
<ui5-togglebutton class="samples-margin" type="Emphasized" icon="sap-icon://accept" active-icon="sap-icon://message-success">Add</ui5-togglebutton>
91-
<ui5-togglebutton class="samples-margin" type="Default" icon="sap-icon://nav-back" active-icon="sap-icon://accept">Back</ui5-togglebutton>
92-
<ui5-togglebutton class="samples-margin" type="Positive" icon="sap-icon://accept" active-icon="sap-icon://activate">Accept</ui5-togglebutton>
93-
<ui5-togglebutton class="samples-margin" type="Negative" icon="sap-icon://sys-cancel" active-icon="sap-icon://incident">Deny</ui5-togglebutton>
89+
<ui5-togglebutton class="samples-margin" icon="sap-icon://menu">Menu</ui5-togglebutton>
90+
<ui5-togglebutton class="samples-margin" type="Emphasized" icon="sap-icon://accept">Add</ui5-togglebutton>
91+
<ui5-togglebutton class="samples-margin" type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
92+
<ui5-togglebutton class="samples-margin" type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
93+
<ui5-togglebutton class="samples-margin" type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
9494
</div>
9595
<pre class="prettyprint lang-html"><xmp>
96-
<ui5-togglebutton icon="sap-icon://menu" active-icon="sap-icon://action-settings">Menu</ui5-togglebutton>
97-
<ui5-togglebutton type="Emphasized" icon="sap-icon://accept" active-icon="sap-icon://message-success">Add</ui5-togglebutton>
98-
<ui5-togglebutton type="Default" icon="sap-icon://nav-back" active-icon="sap-icon://accept">Back</ui5-togglebutton>
99-
<ui5-togglebutton type="Positive" icon="sap-icon://accept" active-icon="sap-icon://activate">Accept</ui5-togglebutton>
100-
<ui5-togglebutton type="Negative" icon="sap-icon://sys-cancel" active-icon="sap-icon://incident">Deny</ui5-togglebutton>
96+
<ui5-togglebutton icon="sap-icon://menu">Menu</ui5-togglebutton>
97+
<ui5-togglebutton type="Emphasized" icon="sap-icon://accept">Add</ui5-togglebutton>
98+
<ui5-togglebutton type="Default" icon="sap-icon://nav-back">Back</ui5-togglebutton>
99+
<ui5-togglebutton type="Positive" icon="sap-icon://accept">Accept</ui5-togglebutton>
100+
<ui5-togglebutton type="Negative" icon="sap-icon://sys-cancel">Deny</ui5-togglebutton>
101101
</xmp></pre>
102102
</section>
103103

0 commit comments

Comments
 (0)