Skip to content

fix(ui5-messagestrip): rename properties #3346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 28, 2021
Merged

fix(ui5-messagestrip): rename properties #3346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d62538
fix(ui5-messagestrip): rename properties
fifoosid May 28, 2021
3b625d4
merge master branch
fifoosid May 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/main/src/MessageStrip.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
aria-labelledby="{{_id}}"
>

{{#unless noIcon}}
{{#unless hideIcon}}
<div
class="ui5-messagestrip-icon-wrapper"
aria-hidden="true"
Expand All @@ -22,7 +22,7 @@
<span class="ui5-hidden-text">{{hiddenText}}</span>
<span class="ui5-messagestrip-text"><slot></slot></span>

{{#unless noCloseButton}}
{{#unless hideCloseButton}}
<ui5-button
icon="decline"
design="Transparent"
Expand Down
11 changes: 6 additions & 5 deletions packages/main/src/MessageStrip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,9 @@ const metadata = {
* @type {boolean}
* @defaultvalue false
* @public
* @since 1.0.0-rc.15
*/
noIcon: {
hideIcon: {
type: Boolean,
},

Expand All @@ -58,7 +59,7 @@ const metadata = {
* @defaultvalue false
* @public
*/
noCloseButton: {
hideCloseButton: {
type: Boolean,
},
},
Expand Down Expand Up @@ -190,7 +191,7 @@ class MessageStrip extends UI5Element {
}

get hiddenText() {
return `Message Strip ${this.design} ${this.noCloseButton ? "" : "closable"}`;
return `Message Strip ${this.design} ${this.hideCloseButton ? "" : "closable"}`;
}

get _closeButtonText() {
Expand All @@ -201,8 +202,8 @@ class MessageStrip extends UI5Element {
return {
root: {
"ui5-messagestrip-root": true,
"ui5-messagestrip-root-no-icon": this.noIcon,
"ui5-messagestrip-root-no-close-button": this.noCloseButton,
"ui5-messagestrip-root-hide-icon": this.hideIcon,
"ui5-messagestrip-root-hide-close-button": this.hideCloseButton,
[this.designClasses]: true,
},
};
Expand Down
8 changes: 4 additions & 4 deletions packages/main/src/themes/MessageStrip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
position: relative;
}

.ui5-messagestrip-root-no-icon {
.ui5-messagestrip-root-hide-icon {
padding: var(--_ui5_messagestrip_padding_no_icon);
}

.ui5-messagestrip-root-no-close-button {
.ui5-messagestrip-root-hide-close-button {
padding-right: 1rem;
}

Expand Down Expand Up @@ -107,12 +107,12 @@
padding-left: 2rem;
}

[dir="rtl"] .ui5-messagestrip-root-no-icon {
[dir="rtl"] .ui5-messagestrip-root-hide-icon {
padding-right: 1rem;
padding-left: 2rem;
}

[dir="rtl"] .ui5-messagestrip-root-no-close-button {
[dir="rtl"] .ui5-messagestrip-root-hide-close-button {
padding-left: 1rem;
padding-right: 0;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/main/test/pages/MessageStrip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@
<ui5-messagestrip class="top" design="Information">Information with default icon.</ui5-messagestrip>
<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>

<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>
<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>
<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>
<ui5-messagestrip hide-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>
<ui5-messagestrip hide-icon hide-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>
<ui5-messagestrip hide-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>

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

Expand Down
44 changes: 22 additions & 22 deletions packages/main/test/samples/MessageStrip.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,32 @@ <h3>MessageStrip</h3>
<section>
<h3>MessageStrip With No Close Button</h3>
<div class="snippet">
<ui5-messagestrip class="samples-margin-bottom" design="Information" no-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Positive" no-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Negative" no-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Warning" no-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Information" hide-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Positive" hide-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Negative" hide-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Warning" hide-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-messagestrip design="Information" no-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip design="Positive" no-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip design="Negative" no-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip design="Warning" no-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip design="Information" hide-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip design="Positive" hide-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip design="Negative" hide-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip design="Warning" hide-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
</xmp></pre>
</section>

<section>
<h3>MessageStrip With No Icon</h3>
<div class="snippet">
<ui5-messagestrip class="samples-margin-bottom" design="Information" no-icon>Information MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Positive" no-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Negative" no-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Warning" no-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Information" hide-icon>Information MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Positive" hide-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Negative" hide-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom" design="Warning" hide-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-messagestrip design="Information" no-icon>Information MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip design="Positive" no-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip design="Negative" no-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip design="Warning" no-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip design="Information" hide-icon>Information MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip design="Positive" hide-icon>Positive MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip design="Negative" hide-icon>Negative MessageStrip With No Icon</ui5-messagestrip>
<ui5-messagestrip design="Warning" hide-icon>Warning MessageStrip With No Icon</ui5-messagestrip>
<script>
document.querySelectorAll("ui5-messagestrip").forEach(function(messageStrip) {
messageStrip.addEventListener("close", function() {
Expand All @@ -74,17 +74,17 @@ <h3>MessageStrip With No Icon</h3>
<section>
<h3>Custom MessageStrip</h3>
<div class="snippet">
<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>
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Positive" no-close-button>Successfull login!</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Negative" no-icon>Access denied!</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Information" hide-icon hide-close-button>You have new message.</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Positive" hide-close-button>Successfull login!</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Negative" hide-icon>Access denied!</ui5-messagestrip>
<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" design="Warning">Update is required.</ui5-messagestrip>
<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>
<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>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-messagestrip design="Information" style="width: 200px;" no-icon no-close-button>You have new message.</ui5-messagestrip>
<ui5-messagestrip design="Positive" style="width: 200px;" no-close-button>Successfull login!</ui5-messagestrip>
<ui5-messagestrip design="Negative" style="width: 200px;" no-icon>Access denied!</ui5-messagestrip>
<ui5-messagestrip design="Information" style="width: 200px;" hide-icon hide-close-button>You have new message.</ui5-messagestrip>
<ui5-messagestrip design="Positive" style="width: 200px;" hide-close-button>Successfull login!</ui5-messagestrip>
<ui5-messagestrip design="Negative" style="width: 200px;" hide-icon>Access denied!</ui5-messagestrip>
<ui5-messagestrip design="Warning" style="width: 200px;">Update is required.</ui5-messagestrip>
<ui5-messagestrip design="Warning" style="width: 200px;"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
<ui5-messagestrip design="Positive" style="width: 200px;"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-messagestrip>
Expand Down