Skip to content

Commit a62b471

Browse files
fifoosidfifoosid
authored
refactor(ui5-button): rename type property to design (#504)
BREAKING CHANGE: type property is changed to design
1 parent 0040e85 commit a62b471

14 files changed

+95
-95
lines changed

‎packages/main/src/Button.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvent
55
import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
66
import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
77
import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
8-
import ButtonType from "./types/ButtonType.js";
8+
import ButtonDesign from "./types/ButtonDesign.js";
99
import ButtonTemplate from "./build/compiled/ButtonTemplate.lit.js";
1010
import Icon from "./Icon.js";
1111

@@ -20,18 +20,18 @@ const metadata = {
2020
properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
2121

2222
/**
23-
* Defines the <code>ui5-button</code> type.
23+
* Defines the <code>ui5-button</code> design.
2424
* </br></br>
2525
* <b>Note:</b> Available options are "Default", "Emphasized", "Positive",
2626
* "Negative", and "Transparent".
2727
*
28-
* @type {ButtonType}
28+
* @type {ButtonDesign}
2929
* @defaultvalue "Default"
3030
* @public
3131
*/
32-
type: {
33-
type: ButtonType,
34-
defaultValue: ButtonType.Default,
32+
design: {
33+
type: ButtonDesign,
34+
defaultValue: ButtonDesign.Default,
3535
},
3636

3737
/**
@@ -258,7 +258,7 @@ class Button extends UI5Element {
258258
sapMBtnNoText: !this.text.length,
259259
sapMBtnDisabled: this.disabled,
260260
sapMBtnIconEnd: this.iconEnd,
261-
[`sapMBtn${this.type}`]: true,
261+
[`sapMBtn${this.design}`]: true,
262262
sapUiSizeCompact: getCompactSize(),
263263
},
264264
icon: {

‎packages/main/src/CalendarHeader.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvent
55
import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
66
import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
77
import Button from "./Button.js";
8-
import ButtonType from "./types/ButtonType.js";
8+
import ButtonDesign from "./types/ButtonDesign.js";
99
import CalendarHeaderTemplate from "./build/compiled/CalendarHeaderTemplate.lit.js";
1010

1111
// Styles
@@ -68,10 +68,10 @@ class CalendarHeader extends UI5Element {
6868
this._btnNext.icon = "sap-icon://slim-arrow-right";
6969

7070
this._btn1 = {};
71-
this._btn1.type = ButtonType.Transparent;
71+
this._btn1.type = ButtonDesign.Transparent;
7272

7373
this._btn2 = {};
74-
this._btn2.type = ButtonType.Transparent;
74+
this._btn2.type = ButtonDesign.Transparent;
7575
}
7676

7777
onBeforeRendering() {

‎packages/main/src/ListItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<div class="sapMDeleteListItemButton">
4848
<ui5-button
4949
id="{{_id}}-deleteSelectionElement"
50-
type="Transparent"
50+
design="Transparent"
5151
icon="sap-icon://decline"
5252
@ui5-press="{{_onDelete}}"
5353
></ui5-button>

‎packages/main/src/types/ButtonType.js renamed to ‎packages/main/src/types/ButtonDesign.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ const ButtonTypes = {
3030
Emphasized: "Emphasized",
3131
};
3232

33-
class ButtonType extends DataType {
33+
class ButtonDesign extends DataType {
3434
static isValid(value) {
3535
return !!ButtonTypes[value];
3636
}
3737
}
3838

39-
ButtonType.generataTypeAcessors(ButtonTypes);
39+
ButtonDesign.generataTypeAcessors(ButtonTypes);
4040

41-
export default ButtonType;
41+
export default ButtonDesign;

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

+18-18
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,24 @@
2323
</head>
2424

2525
<body>
26-
<ui5-button id="button1" type="Emphasized">Action Bar Button</ui5-button>
26+
<ui5-button id="button1" design="Emphasized">Action Bar Button</ui5-button>
2727
<ui5-button>Primary <br> button</ui5-button>
28-
<ui5-button type="Transparent">Secondary <span style="color:red;">button</span></ui5-button>
28+
<ui5-button design="Transparent">Secondary <span style="color:red;">button</span></ui5-button>
2929
<ui5-button disabled id="button-disabled">Inactive</ui5-button>
30-
<ui5-button type="Positive">Accept</ui5-button>
31-
<ui5-button type="Negative">Decline</ui5-button>
30+
<ui5-button design="Positive">Accept</ui5-button>
31+
<ui5-button design="Negative">Decline</ui5-button>
3232

3333
<br />
3434
<br />
3535

3636
<ui5-input id="field"></ui5-input>
3737

38-
<ui5-button type="Emphasized">Action<br> Bar<br> Button</ui5-button>
38+
<ui5-button design="Emphasized">Action<br> Bar<br> Button</ui5-button>
3939
<ui5-button>Primary button</ui5-button>
40-
<ui5-button type="Transparent">Secondary button</ui5-button>
40+
<ui5-button design="Transparent">Secondary button</ui5-button>
4141
<ui5-button disabled>Inactive</ui5-button>
42-
<ui5-button type="Positive">Agree</ui5-button>
43-
<ui5-button type="Negative">Decline</ui5-button>
42+
<ui5-button design="Positive">Agree</ui5-button>
43+
<ui5-button design="Negative">Decline</ui5-button>
4444

4545
<br/>
4646
<br/>
@@ -62,28 +62,28 @@
6262
<br/>
6363
<br/>
6464

65-
<ui5-button type="Default" icon="sap-icon://employee">Default</ui5-button>
66-
<ui5-button disabled type="Default" icon="sap-icon://employee">Default</ui5-button>
65+
<ui5-button design="Default" icon="sap-icon://employee">Default</ui5-button>
66+
<ui5-button disabled design="Default" icon="sap-icon://employee">Default</ui5-button>
6767
<br/>
6868
<br/>
6969

70-
<ui5-button type="Positive" icon="sap-icon://employee">Agree</ui5-button>
71-
<ui5-button disabled type="Positive" icon="sap-icon://employee">Agree</ui5-button>
70+
<ui5-button design="Positive" icon="sap-icon://employee">Agree</ui5-button>
71+
<ui5-button disabled design="Positive" icon="sap-icon://employee">Agree</ui5-button>
7272
<br/>
7373
<br/>
7474

75-
<ui5-button type="Negative" icon="sap-icon://employee">Decline</ui5-button>
76-
<ui5-button disabled type="Negative" icon="sap-icon://employee">Decline</ui5-button>
75+
<ui5-button design="Negative" icon="sap-icon://employee">Decline</ui5-button>
76+
<ui5-button disabled design="Negative" icon="sap-icon://employee">Decline</ui5-button>
7777
<br/>
7878
<br/>
7979

80-
<ui5-button type="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
81-
<ui5-button disabled type="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
80+
<ui5-button design="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
81+
<ui5-button disabled design="Transparent" icon="sap-icon://employee">Transparent</ui5-button>
8282
<br/>
8383
<br/>
8484

85-
<ui5-button type="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>
86-
<ui5-button disabled type="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>
85+
<ui5-button design="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>
86+
<ui5-button disabled design="Emphasized" icon="sap-icon://employee">Emphasized</ui5-button>
8787

8888
<br/>
8989
<br/>

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
</section>
7373

7474
<section class="row heading-row-centered">
75-
<ui5-button type="Emphasized">Getting started</ui5-button>
75+
<ui5-button design="Emphasized">Getting started</ui5-button>
7676
<ui5-button>Download</ui5-button>
7777
</section>
7878

@@ -136,15 +136,15 @@
136136
</section>
137137

138138
<section class="row row-centered">
139-
<ui5-button type="Emphasized">Submit</ui5-button>
139+
<ui5-button design="Emphasized">Submit</ui5-button>
140140
<ui5-button disabled>Not available</ui5-button>
141141
<ui5-button>Edit</ui5-button>
142-
<ui5-button type="Transparent">Apply</ui5-button>
143-
<ui5-button type="Transparent">Cancel</ui5-button>
142+
<ui5-button design="Transparent">Apply</ui5-button>
143+
<ui5-button design="Transparent">Cancel</ui5-button>
144144
<ui5-button icon="sap-icon://nav-back">Back</ui5-button>
145145
<ui5-button icon="sap-icon://feeder-arrow">Next</ui5-button>
146-
<ui5-button type="Positive">Approve</ui5-button>
147-
<ui5-button type="Negative">Decline</ui5-button>
146+
<ui5-button design="Positive">Approve</ui5-button>
147+
<ui5-button design="Negative">Decline</ui5-button>
148148
<ui5-button icon="sap-icon://download" icon-end>Download</ui5-button>
149149
<ui5-button icon="sap-icon://download">Activate</ui5-button>
150150
</section>
@@ -251,7 +251,7 @@
251251
<div style="display: flex;" slot="header">
252252
<ui5-title level="H5">Countries</ui5-title>
253253
<ui5-button id="button1" icon="sap-icon://refresh">Reset</ui5-button>
254-
<ui5-button type="Negative">Cencel</ui5-button>
254+
<ui5-button design="Negative">Cencel</ui5-button>
255255
</div>
256256

257257
<ui5-list id="myList" mode="Delete">
@@ -264,7 +264,7 @@
264264
<div style="display: flex;" slot="header">
265265
<ui5-title level="H5">Quarks</ui5-title>
266266
<ui5-button id="button2" icon="sap-icon://add">Add</ui5-button>
267-
<ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
267+
<ui5-button design="Negative" icon="sap-icon://delete">Remove</ui5-button>
268268
</div>
269269

270270
<ui5-list id="myList2" mode="SingleSelectBegin">
@@ -277,7 +277,7 @@
277277
<div style="display: flex;" slot="header">
278278
<ui5-title level="H5">Employees</ui5-title>
279279
<ui5-button id="button3" icon="sap-icon://add">Add</ui5-button>
280-
<ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
280+
<ui5-button design="Negative" icon="sap-icon://delete">Remove</ui5-button>
281281
</div>
282282

283283
<ui5-list id="myList3" mode="MultiSelect">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h1>UI5 Table Web Component</h1>
4949

5050
<div slot="header" class="header">
5151
<div>Countries</div>
52-
<ui5-button type="Accept">Export</ui5-button>
52+
<ui5-button design="Accept">Export</ui5-button>
5353
</div>
5454

5555
<!-- Items -->

‎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">Cancel</ui5-button>
77-
<ui5-button type="Accept" icon="sap-icon://accept">Done</ui5-button>
76+
<ui5-button design="Reject" icon="sap-icon://cancel">Cancel</ui5-button>
77+
<ui5-button design="Accept" icon="sap-icon://accept">Done</ui5-button>
7878
</div>
7979

8080
<!-- Content -->

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</head>
2525

2626
<body>
27-
<ui5-button id="btnOpenPopover" type="Emphasized" icon="sap-icon://employee">Open Popover</ui5-button>
27+
<ui5-button id="btnOpenPopover" design="Emphasized" icon="sap-icon://employee">Open Popover</ui5-button>
2828

2929
<ui5-popover id="popoverToOpen" header-text="Popover">
3030
<div style="padding: 1rem;text-align: center;">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<!-- Header -->
7272
<div style="display: flex; align-items: center;" slot="header">
7373
<ui5-title>Countries:</ui5-title>
74-
<ui5-button type="Accept">OK</ui5-button>
74+
<ui5-button design="Accept">OK</ui5-button>
7575
</div>
7676
<!-- Items -->
7777
<ui5-li>Argentina</ui5-li>

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

+37-37
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@
4242
<section>
4343
<h3>Basic Button</h3>
4444
<div class="snippet">
45-
<ui5-button class="samples-margin" type="Default">Enabled</ui5-button>
45+
<ui5-button class="samples-margin" design="Default">Enabled</ui5-button>
4646
<ui5-button class="samples-margin" disabled>Disabled</ui5-button>
47-
<ui5-button class="samples-margin" type="Transparent">Cancel</ui5-button>
48-
<ui5-button class="samples-margin" type="Positive" icon-end>Approve</ui5-button>
49-
<ui5-button class="samples-margin"type="Negative">Decline</ui5-button>
50-
<ui5-button class="samples-margin" type="Emphasized">Subscribe</ui5-button>
47+
<ui5-button class="samples-margin" design="Transparent">Cancel</ui5-button>
48+
<ui5-button class="samples-margin" design="Positive" icon-end>Approve</ui5-button>
49+
<ui5-button class="samples-margin"design="Negative">Decline</ui5-button>
50+
<ui5-button class="samples-margin" design="Emphasized">Subscribe</ui5-button>
5151
</div>
5252
<pre class="prettyprint lang-html"><xmp>
53-
<ui5-button type="Default">Enabled</ui5-button>
53+
<ui5-button design="Default">Enabled</ui5-button>
5454
<ui5-button disabled>Disabled</ui5-button>
55-
<ui5-button type="Transparent">Cancel</ui5-button>
56-
<ui5-button type="Positive" icon-end>Approve</ui5-button>
57-
<ui5-button type="Negative">Decline</ui5-button>
58-
<ui5-button type="Emphasized">Subscribe</ui5-button>
55+
<ui5-button design="Transparent">Cancel</ui5-button>
56+
<ui5-button design="Positive" icon-end>Approve</ui5-button>
57+
<ui5-button design="Negative">Decline</ui5-button>
58+
<ui5-button design="Emphasized">Subscribe</ui5-button>
5959
</xmp></pre>
6060
</section>
6161

@@ -65,17 +65,17 @@ <h3>Button with Icon</h3>
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>
6767
<ui5-button class="samples-margin" icon="sap-icon://download">Active Icon</ui5-button>
68-
<ui5-button class="samples-margin" type="Positive" icon="sap-icon://add">Add</ui5-button>
69-
<ui5-button class="samples-margin" type="Negative" icon="sap-icon://delete">Remove</ui5-button>
70-
<ui5-button class="samples-margin" type="Transparent" icon="sap-icon://accept">Accept</ui5-button>
68+
<ui5-button class="samples-margin" design="Positive" icon="sap-icon://add">Add</ui5-button>
69+
<ui5-button class="samples-margin" design="Negative" icon="sap-icon://delete">Remove</ui5-button>
70+
<ui5-button class="samples-margin" design="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>
7575
<ui5-button icon="sap-icon://download">Active Icon</ui5-button>
76-
<ui5-button type="Positive" icon="sap-icon://add">Add</ui5-button>
77-
<ui5-button type="Negative" icon="sap-icon://delete">Remove</ui5-button>
78-
<ui5-button type="Transparent" icon="sap-icon://accept">Transparent</ui5-button>
76+
<ui5-button design="Positive" icon="sap-icon://add">Add</ui5-button>
77+
<ui5-button design="Negative" icon="sap-icon://delete">Remove</ui5-button>
78+
<ui5-button design="Transparent" icon="sap-icon://accept">Transparent</ui5-button>
7979
</xmp></pre>
8080
</section>
8181

@@ -97,43 +97,43 @@ <h3>Icon Only Button</h3>
9797
<ui5-button class="samples-margin" icon="sap-icon://action-settings" aria-labelledby="lblSettings" ></ui5-button>
9898
<ui5-button class="samples-margin" icon="sap-icon://add" aria-labelledby="lblAdd"></ui5-button>
9999
<ui5-button class="samples-margin" icon="sap-icon://alert" aria-labelledby="lblAlert"></ui5-button>
100-
<ui5-button class="samples-margin" icon="sap-icon://accept" type="Positive" aria-labelledby="lblAccept"></ui5-button>
101-
<ui5-button class="samples-margin" icon="sap-icon://bookmark" type="Positive" aria-labelledby="lblBookmark"></ui5-button>
102-
<ui5-button class="samples-margin" icon="sap-icon://cancel" type="Negative" aria-labelledby="lblCancel" ></ui5-button>
103-
<ui5-button class="samples-margin" icon="sap-icon://call" type="Negative" aria-labelledby="lblCall" ></ui5-button>
104-
<ui5-button class="samples-margin" icon="sap-icon://camera" type="Transparent" aria-labelledby="lblCamera"></ui5-button>
105-
<ui5-button class="samples-margin" icon="sap-icon://cart" type="Transparent" aria-labelledby="lblCart"></ui5-button>
100+
<ui5-button class="samples-margin" icon="sap-icon://accept" design="Positive" aria-labelledby="lblAccept"></ui5-button>
101+
<ui5-button class="samples-margin" icon="sap-icon://bookmark" design="Positive" aria-labelledby="lblBookmark"></ui5-button>
102+
<ui5-button class="samples-margin" icon="sap-icon://cancel" design="Negative" aria-labelledby="lblCancel" ></ui5-button>
103+
<ui5-button class="samples-margin" icon="sap-icon://call" design="Negative" aria-labelledby="lblCall" ></ui5-button>
104+
<ui5-button class="samples-margin" icon="sap-icon://camera" design="Transparent" aria-labelledby="lblCamera"></ui5-button>
105+
<ui5-button class="samples-margin" icon="sap-icon://cart" design="Transparent" aria-labelledby="lblCart"></ui5-button>
106106
</div>
107107
<pre class="prettyprint lang-html"><xmp>
108108
<ui5-button icon="sap-icon://away" aria-labelledby="lblAway"></ui5-button>
109109
<ui5-button icon="sap-icon://action-settings" aria-labelledby="lblSettings" ></ui5-button>
110110
<ui5-button icon="sap-icon://add" aria-labelledby="lblAdd"></ui5-button>
111111
<ui5-button icon="sap-icon://alert" aria-labelledby="lblAlert"></ui5-button>
112-
<ui5-button icon="sap-icon://accept" type="Positive" aria-labelledby="lblAccept"></ui5-button>
113-
<ui5-button icon="sap-icon://bookmark" type="Positive" aria-labelledby="lblBookmark"></ui5-button>
114-
<ui5-button icon="sap-icon://cancel" type="Negative" aria-labelledby="lblCancel" ></ui5-button>
115-
<ui5-button icon="sap-icon://call" type="Negative" aria-labelledby="lblCall" ></ui5-button>
116-
<ui5-button icon="sap-icon://camera" type="Transparent" aria-labelledby="lblCamera"></ui5-button>
117-
<ui5-button icon="sap-icon://cart" type="Transparent" aria-labelledby="lblCart"></ui5-button>
112+
<ui5-button icon="sap-icon://accept" design="Positive" aria-labelledby="lblAccept"></ui5-button>
113+
<ui5-button icon="sap-icon://bookmark" design="Positive" aria-labelledby="lblBookmark"></ui5-button>
114+
<ui5-button icon="sap-icon://cancel" design="Negative" aria-labelledby="lblCancel" ></ui5-button>
115+
<ui5-button icon="sap-icon://call" design="Negative" aria-labelledby="lblCall" ></ui5-button>
116+
<ui5-button icon="sap-icon://camera" design="Transparent" aria-labelledby="lblCamera"></ui5-button>
117+
<ui5-button icon="sap-icon://cart" design="Transparent" aria-labelledby="lblCart"></ui5-button>
118118
<ui5-label style="display:none" id="lblAdd" aria-hidden="true">Add</ui5-label>
119119
</xmp></pre>
120120
</section>
121121

122122
<section>
123-
<h3>Button with Type</h3>
123+
<h3>Button with Design</h3>
124124
<div class="snippet">
125-
<ui5-button class="samples-margin" type="Emphasized">Submit</ui5-button>
126-
<ui5-button class="samples-margin" type="Positive">Agree</ui5-button>
127-
<ui5-button class="samples-margin" type="Negative">Decline</ui5-button>
125+
<ui5-button class="samples-margin" design="Emphasized">Submit</ui5-button>
126+
<ui5-button class="samples-margin" design="Positive">Agree</ui5-button>
127+
<ui5-button class="samples-margin" design="Negative">Decline</ui5-button>
128128
<ui5-button class="samples-margin" disabled>Disabled</ui5-button>
129-
<ui5-button class="samples-margin" type="Transparent">Transparent</ui5-button>
129+
<ui5-button class="samples-margin" design="Transparent">Transparent</ui5-button>
130130
</div>
131131
<pre class="prettyprint lang-html"><xmp>
132-
<ui5-button type="Emphasized">Submit</ui5-button>
133-
<ui5-button type="Positive">Agree</ui5-button>
134-
<ui5-button type="Negative">Decline</ui5-button>
132+
<ui5-button design="Emphasized">Submit</ui5-button>
133+
<ui5-button design="Positive">Agree</ui5-button>
134+
<ui5-button design="Negative">Decline</ui5-button>
135135
<ui5-button disabled>Disabled</ui5-button>
136-
<ui5-button type="Transparent">Transparent</ui5-button>
136+
<ui5-button design="Transparent">Transparent</ui5-button>
137137
</xmp></pre>
138138
</section>
139139

0 commit comments

Comments
 (0)