Skip to content

Commit 4208d19

Browse files
fifoosidfifoosid
authored
fix(ui5-messagestrip): rename type property to design (#3276)
Part of #3107 BREAKING_CHANGE: type property of ui5-messagestrip is deprecated in favour of design
1 parent ca42531 commit 4208d19

File tree

5 files changed

+68
-67
lines changed

5 files changed

+68
-67
lines changed

‎packages/base/hash.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
b4zDkzbz6y2cYEqj8FVnMvuMEvg=
1+
3/PSzZvk10reeCuZDjQUmFqeOI4=

‎packages/main/src/MessageStrip.js

+13-12
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import "@ui5/webcomponents-icons/dist/information.js";
66
import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
77
import "@ui5/webcomponents-icons/dist/error.js";
88
import "@ui5/webcomponents-icons/dist/alert.js";
9-
import MessageStripType from "./types/MessageStripType.js";
9+
import MessageStripDesign from "./types/MessageStripDesign.js";
1010
import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
1111
import Icon from "./Icon.js";
1212
import Button from "./Button.js";
@@ -29,13 +29,14 @@ const metadata = {
2929
* <b>Note:</b> Available options are <code>"Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
3030
* and <code>"Warning"</code>.
3131
*
32-
* @type {MessageStripType}
32+
* @type {MessageStripDesign}
3333
* @defaultvalue "Information"
3434
* @public
35+
* @since 1.0.0-rc.15
3536
*/
36-
type: {
37-
type: MessageStripType,
38-
defaultValue: MessageStripType.Information,
37+
design: {
38+
type: MessageStripDesign,
39+
defaultValue: MessageStripDesign.Information,
3940
},
4041

4142
/**
@@ -112,7 +113,7 @@ const metadata = {
112113
* <h3 class="comment-api-title">Overview</h3>
113114
*
114115
* The <code>ui5-messagestrip</code> component enables the embedding of app-related messages.
115-
* It displays 4 types of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.
116+
* It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.
116117
* Each message can have a Close button, so that it can be removed from the UI, if needed.
117118
*
118119
* <h3>Usage</h3>
@@ -170,7 +171,7 @@ class MessageStrip extends UI5Element {
170171
await fetchI18nBundle("@ui5/webcomponents");
171172
}
172173

173-
static typeClassesMappings() {
174+
static designClassesMappings() {
174175
return {
175176
"Information": "ui5-messagestrip-root--info",
176177
"Positive": "ui5-messagestrip-root--positive",
@@ -189,7 +190,7 @@ class MessageStrip extends UI5Element {
189190
}
190191

191192
get hiddenText() {
192-
return `Message Strip ${this.type} ${this.noCloseButton ? "" : "closable"}`;
193+
return `Message Strip ${this.design} ${this.noCloseButton ? "" : "closable"}`;
193194
}
194195

195196
get _closeButtonText() {
@@ -202,7 +203,7 @@ class MessageStrip extends UI5Element {
202203
"ui5-messagestrip-root": true,
203204
"ui5-messagestrip-root-no-icon": this.noIcon,
204205
"ui5-messagestrip-root-no-close-button": this.noCloseButton,
205-
[this.typeClasses]: true,
206+
[this.designClasses]: true,
206207
},
207208
};
208209
}
@@ -212,11 +213,11 @@ class MessageStrip extends UI5Element {
212213
}
213214

214215
get standardIconName() {
215-
return MessageStrip.iconMappings()[this.type];
216+
return MessageStrip.iconMappings()[this.design];
216217
}
217218

218-
get typeClasses() {
219-
return MessageStrip.typeClassesMappings()[this.type];
219+
get designClasses() {
220+
return MessageStrip.designClassesMappings()[this.design];
220221
}
221222
}
222223

‎packages/main/src/types/MessageStripType.js renamed to ‎packages/main/src/types/MessageStripDesign.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
22

33
/**
4-
* @lends sap.ui.webcomponents.main.types.MessageStripType.prototype
4+
* @lends sap.ui.webcomponents.main.types.MessageStripDesign.prototype
55
* @public
66
*/
7-
const MessageStripTypes = {
7+
const MessageStripDesigns = {
88
/**
99
* Message should be just an information
1010
* @public
@@ -39,16 +39,16 @@ const MessageStripTypes = {
3939
* Defines different types of MessageStrip.
4040
* @constructor
4141
* @author SAP SE
42-
* @alias sap.ui.webcomponents.main.types.MessageStripType
42+
* @alias sap.ui.webcomponents.main.types.MessageStripDesign
4343
* @public
4444
* @enum {string}
4545
*/
46-
class MessageStripType extends DataType {
46+
class MessageStripDesign extends DataType {
4747
static isValid(value) {
48-
return !!MessageStripTypes[value];
48+
return !!MessageStripDesigns[value];
4949
}
5050
}
5151

52-
MessageStripType.generateTypeAccessors(MessageStripTypes);
52+
MessageStripDesign.generateTypeAccessors(MessageStripDesigns);
5353

54-
export default MessageStripType;
54+
export default MessageStripDesign;

‎packages/main/test/pages/MessageStrip.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -32,21 +32,21 @@
3232
<ui5-input id="inputField"></ui5-input>
3333

3434

35-
<ui5-messagestrip class="top" type="Information">Default (Information) with default icon and close button:</ui5-messagestrip>
36-
<ui5-messagestrip class="top" type="Negative">Negative with <b>default</b> icon and close button:</ui5-messagestrip>
37-
<ui5-messagestrip class="top" type="Warning">Warning with default icon and close button:</ui5-messagestrip>
38-
<ui5-messagestrip class="top" type="Positive">Positive with default icon and close button:</ui5-messagestrip>
35+
<ui5-messagestrip class="top" design="Information">Default (Information) with default icon and close button:</ui5-messagestrip>
36+
<ui5-messagestrip class="top" design="Negative">Negative with <b>default</b> icon and close button:</ui5-messagestrip>
37+
<ui5-messagestrip class="top" design="Warning">Warning with default icon and close button:</ui5-messagestrip>
38+
<ui5-messagestrip class="top" design="Positive">Positive with default icon and close button:</ui5-messagestrip>
3939

40-
<ui5-messagestrip class="top" type="Information">Information with default icon.</ui5-messagestrip>
41-
<ui5-messagestrip class="top" type="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
40+
<ui5-messagestrip class="top" design="Information">Information with default icon.</ui5-messagestrip>
41+
<ui5-messagestrip class="top" design="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
4242

43-
<ui5-messagestrip no-icon class="top" type="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
44-
<ui5-messagestrip no-icon no-close-button class="top" type="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
45-
<ui5-messagestrip no-close-button class="top" type="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
43+
<ui5-messagestrip no-icon class="top" design="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
44+
<ui5-messagestrip no-icon no-close-button class="top" design="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
45+
<ui5-messagestrip no-close-button class="top" design="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
4646

47-
<ui5-messagestrip type="Warning" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
47+
<ui5-messagestrip design="Warning" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
4848

49-
<ui5-messagestrip type="Positive" class="top"><img src="./img/loading.gif" width="16" height="16" slot="icon">Custom icon</ui5-messagestrip>
49+
<ui5-messagestrip design="Positive" class="top"><img src="./img/loading.gif" width="16" height="16" slot="icon">Custom icon</ui5-messagestrip>
5050

5151
<script>
5252
var counter = 0;

‎packages/main/test/samples/MessageStrip.sample.html

+36-36
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
<section>
1313
<h3>MessageStrip</h3>
1414
<div class="snippet">
15-
<ui5-messagestrip class="samples-margin-bottom" type="Information">Information MessageStrip</ui5-messagestrip>
16-
<ui5-messagestrip class="samples-margin-bottom" type="Positive">Positive MessageStrip</ui5-messagestrip>
17-
<ui5-messagestrip class="samples-margin-bottom" type="Negative">Negative MessageStrip</ui5-messagestrip>
18-
<ui5-messagestrip class="samples-margin-bottom" type="Warning">Warning MessageStrip</ui5-messagestrip>
15+
<ui5-messagestrip class="samples-margin-bottom" design="Information">Information MessageStrip</ui5-messagestrip>
16+
<ui5-messagestrip class="samples-margin-bottom" design="Positive">Positive MessageStrip</ui5-messagestrip>
17+
<ui5-messagestrip class="samples-margin-bottom" design="Negative">Negative MessageStrip</ui5-messagestrip>
18+
<ui5-messagestrip class="samples-margin-bottom" design="Warning">Warning MessageStrip</ui5-messagestrip>
1919
</div>
2020
<pre class="prettyprint lang-html"><xmp>
21-
<ui5-messagestrip type="Information">Information MessageStrip</ui5-messagestrip>
22-
<ui5-messagestrip type="Positive">Positive MessageStrip</ui5-messagestrip>
23-
<ui5-messagestrip type="Negative">Negative MessageStrip</ui5-messagestrip>
24-
<ui5-messagestrip type="Warning">Warning MessageStrip</ui5-messagestrip>
21+
<ui5-messagestrip design="Information">Information MessageStrip</ui5-messagestrip>
22+
<ui5-messagestrip design="Positive">Positive MessageStrip</ui5-messagestrip>
23+
<ui5-messagestrip design="Negative">Negative MessageStrip</ui5-messagestrip>
24+
<ui5-messagestrip design="Warning">Warning MessageStrip</ui5-messagestrip>
2525
<script>
2626
document.querySelectorAll("ui5-messagestrip").forEach(function(messageStrip) {
2727
messageStrip.addEventListener("close", function() {
@@ -35,32 +35,32 @@ <h3>MessageStrip</h3>
3535
<section>
3636
<h3>MessageStrip With No Close Button</h3>
3737
<div class="snippet">
38-
<ui5-messagestrip class="samples-margin-bottom" type="Information" no-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
39-
<ui5-messagestrip class="samples-margin-bottom" type="Positive" no-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
40-
<ui5-messagestrip class="samples-margin-bottom" type="Negative" no-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
41-
<ui5-messagestrip class="samples-margin-bottom" type="Warning" no-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
38+
<ui5-messagestrip class="samples-margin-bottom" design="Information" no-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
39+
<ui5-messagestrip class="samples-margin-bottom" design="Positive" no-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
40+
<ui5-messagestrip class="samples-margin-bottom" design="Negative" no-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
41+
<ui5-messagestrip class="samples-margin-bottom" design="Warning" no-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
4242
</div>
4343
<pre class="prettyprint lang-html"><xmp>
44-
<ui5-messagestrip type="Information" no-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
45-
<ui5-messagestrip type="Positive" no-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
46-
<ui5-messagestrip type="Negative" no-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
47-
<ui5-messagestrip type="Warning" no-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
44+
<ui5-messagestrip design="Information" no-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
45+
<ui5-messagestrip design="Positive" no-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
46+
<ui5-messagestrip design="Negative" no-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
47+
<ui5-messagestrip design="Warning" no-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
4848
</xmp></pre>
4949
</section>
5050

5151
<section>
5252
<h3>MessageStrip With No Icon</h3>
5353
<div class="snippet">
54-
<ui5-messagestrip class="samples-margin-bottom" type="Information" no-icon>Information MessageStrip With No Icon</ui5-messagestrip>
55-
<ui5-messagestrip class="samples-margin-bottom" type="Positive" no-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
56-
<ui5-messagestrip class="samples-margin-bottom" type="Negative" no-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
57-
<ui5-messagestrip class="samples-margin-bottom" type="Warning" no-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
54+
<ui5-messagestrip class="samples-margin-bottom" design="Information" no-icon>Information MessageStrip With No Icon</ui5-messagestrip>
55+
<ui5-messagestrip class="samples-margin-bottom" design="Positive" no-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
56+
<ui5-messagestrip class="samples-margin-bottom" design="Negative" no-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
57+
<ui5-messagestrip class="samples-margin-bottom" design="Warning" no-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
5858
</div>
5959
<pre class="prettyprint lang-html"><xmp>
60-
<ui5-messagestrip type="Information" no-icon>Information MessageStrip With No Icon</ui5-messagestrip>
61-
<ui5-messagestrip type="Positive" no-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
62-
<ui5-messagestrip type="Negative" no-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
63-
<ui5-messagestrip type="Warning" no-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
60+
<ui5-messagestrip design="Information" no-icon>Information MessageStrip With No Icon</ui5-messagestrip>
61+
<ui5-messagestrip design="Positive" no-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
62+
<ui5-messagestrip design="Negative" no-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
63+
<ui5-messagestrip design="Warning" no-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
6464
<script>
6565
document.querySelectorAll("ui5-messagestrip").forEach(function(messageStrip) {
6666
messageStrip.addEventListener("close", function() {
@@ -74,20 +74,20 @@ <h3>MessageStrip With No Icon</h3>
7474
<section>
7575
<h3>Custom MessageStrip</h3>
7676
<div class="snippet">
77-
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Information" no-icon no-close-button>You have new message.</ui5-messagestrip>
78-
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Positive" no-close-button>Successfull login!</ui5-messagestrip>
79-
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Negative" no-icon>Access denied!</ui5-messagestrip>
80-
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Warning">Update is required.</ui5-messagestrip>
81-
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Warning"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
82-
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Positive"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-messagestrip>
77+
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Information" no-icon no-close-button>You have new message.</ui5-messagestrip>
78+
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Positive" no-close-button>Successfull login!</ui5-messagestrip>
79+
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Negative" no-icon>Access denied!</ui5-messagestrip>
80+
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Warning">Update is required.</ui5-messagestrip>
81+
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Warning"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
82+
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Positive"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-messagestrip>
8383
</div>
8484
<pre class="prettyprint lang-html"><xmp>
85-
<ui5-messagestrip type="Information" style="width: 200px;" no-icon no-close-button>You have new message.</ui5-messagestrip>
86-
<ui5-messagestrip type="Positive" style="width: 200px;" no-close-button>Successfull login!</ui5-messagestrip>
87-
<ui5-messagestrip type="Negative" style="width: 200px;" no-icon>Access denied!</ui5-messagestrip>
88-
<ui5-messagestrip type="Warning" style="width: 200px;">Update is required.</ui5-messagestrip>
89-
<ui5-messagestrip type="Warning" style="width: 200px;"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
90-
<ui5-messagestrip type="Positive" style="width: 200px;"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-messagestrip>
85+
<ui5-messagestrip design="Information" style="width: 200px;" no-icon no-close-button>You have new message.</ui5-messagestrip>
86+
<ui5-messagestrip design="Positive" style="width: 200px;" no-close-button>Successfull login!</ui5-messagestrip>
87+
<ui5-messagestrip design="Negative" style="width: 200px;" no-icon>Access denied!</ui5-messagestrip>
88+
<ui5-messagestrip design="Warning" style="width: 200px;">Update is required.</ui5-messagestrip>
89+
<ui5-messagestrip design="Warning" style="width: 200px;"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
90+
<ui5-messagestrip design="Positive" style="width: 200px;"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-messagestrip>
9191
<script>
9292
document.querySelectorAll("ui5-messagestrip").forEach(function(messageStrip) {
9393
messageStrip.addEventListener("close", function() {

0 commit comments

Comments
 (0)