Skip to content

Commit 7f99be5

Browse files
vladitasevvladitasev
authored
fix(ui5-messagestrip): Close button now has the correct design (#2029)
1 parent 509aca2 commit 7f99be5

File tree

8 files changed

+96
-136
lines changed

8 files changed

+96
-136
lines changed

‎packages/main/src/Button.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
>
2323
{{#if icon}}
2424
<ui5-icon
25+
style="{{styles.icon}}"
2526
class="ui5-button-icon"
2627
name="{{icon}}"
2728
show-tooltip={{iconOnly}}

‎packages/main/src/Button.js

+22
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,19 @@ const metadata = {
8282
type: Boolean,
8383
},
8484

85+
/**
86+
* Defines the size of the icon inside the <code>ui5-button</code>.
87+
*
88+
* @type {string}
89+
* @defaultvalue undefined
90+
* @public
91+
* @since 1.0.0-rc.8
92+
*/
93+
iconSize: {
94+
type: String,
95+
defaultValue: undefined,
96+
},
97+
8598
/**
8699
* When set to <code>true</code>, the <code>ui5-button</code> will
87100
* automatically submit the nearest form element upon <code>press</code>.
@@ -383,6 +396,15 @@ class Button extends UI5Element {
383396
return this.nonFocusable ? "-1" : this._tabIndex;
384397
}
385398

399+
get styles() {
400+
return {
401+
icon: {
402+
width: this.iconSize,
403+
height: this.iconSize,
404+
},
405+
};
406+
}
407+
386408
static async onDefine() {
387409
await Promise.all([
388410
Icon.define(),

‎packages/main/src/MessageStrip.hbs

+10-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="{{classes.main}}"
1+
<div class="{{classes.root}}"
22
id="{{_id}}"
33
role="alert"
44
dir="{{effectiveDir}}"
@@ -16,19 +16,16 @@
1616
{{/unless}}
1717

1818
<span class="ui5-hidden-text">{{hiddenText}}</span>
19-
<span class="{{classes.label}}"><slot></slot></span>
19+
<span class="ui5-messagestrip-text"><slot></slot></span>
2020

2121
{{#unless noCloseButton}}
22-
<button
23-
class="ui5-messagestrip-close-icon-wrapper"
24-
title="{{_closeButtonText}}"
25-
@click={{_closeClick}}
26-
>
27-
<ui5-icon
28-
class="ui5-messagestrip-close-icon"
29-
name="decline"
30-
>
31-
</ui5-icon>
32-
</button>
22+
<ui5-button
23+
icon="decline"
24+
icon-size=".75rem"
25+
design="Transparent"
26+
class="ui5-messagestrip-close-button"
27+
title="{{_closeButtonText}}"
28+
@click={{_closeClick}}
29+
></ui5-button>
3330
{{/unless}}
3431
</div>

‎packages/main/src/MessageStrip.js

+13-32
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4-
import { isEnter, isSpace } from "@ui5/webcomponents-base/src/Keys.js";
54
import "@ui5/webcomponents-icons/dist/icons/decline.js";
65
import "@ui5/webcomponents-icons/dist/icons/message-information.js";
76
import "@ui5/webcomponents-icons/dist/icons/message-success.js";
@@ -10,6 +9,7 @@ import "@ui5/webcomponents-icons/dist/icons/message-warning.js";
109
import MessageStripType from "./types/MessageStripType.js";
1110
import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
1211
import Icon from "./Icon.js";
12+
import Button from "./Button.js";
1313
import { MESSAGE_STRIP_CLOSE_BUTTON } from "./generated/i18n/i18n-defaults.js";
1414

1515
// Styles
@@ -153,42 +153,27 @@ class MessageStrip extends UI5Element {
153153

154154
constructor() {
155155
super();
156-
157156
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
158157
}
159158

160159
_closeClick() {
161160
this.fireEvent("close", {});
162161
}
163162

164-
_closeKeyDown(event) {
165-
if (isEnter(event)) {
166-
this.fireEvent("close");
167-
}
168-
169-
if (isSpace(event)) {
170-
event.preventDefault();
171-
}
172-
}
173-
174-
_closeKeyUp(event) {
175-
if (isSpace(event)) {
176-
this.fireEvent("close");
177-
}
178-
}
179-
180163
static async onDefine() {
181-
await fetchI18nBundle("@ui5/webcomponents");
182-
183-
await Icon.define();
164+
await Promise.all([
165+
fetchI18nBundle("@ui5/webcomponents"),
166+
Icon.define(),
167+
Button.define(),
168+
]);
184169
}
185170

186171
static typeClassesMappings() {
187172
return {
188-
"Information": "ui5-messagestrip--info",
189-
"Positive": "ui5-messagestrip--positive",
190-
"Negative": "ui5-messagestrip--negative",
191-
"Warning": "ui5-messagestrip--warning",
173+
"Information": "ui5-messagestrip-root--info",
174+
"Positive": "ui5-messagestrip-root--positive",
175+
"Negative": "ui5-messagestrip-root--negative",
176+
"Warning": "ui5-messagestrip-root--warning",
192177
};
193178
}
194179

@@ -211,14 +196,10 @@ class MessageStrip extends UI5Element {
211196

212197
get classes() {
213198
return {
214-
label: {
215-
"ui5-messagestrip-text": true,
216-
"ui5-messagestripNoCloseButton": this.noCloseButton,
217-
},
218-
main: {
199+
root: {
219200
"ui5-messagestrip-root": true,
220-
"ui5-messagestrip-icon--hidden": this.noIcon,
221-
"ui5-messagestrip-close-icon--hidden": this.noCloseButton,
201+
"ui5-messagestrip-root-no-icon": this.noIcon,
202+
"ui5-messagestrip-root-no-close-button": this.noCloseButton,
222203
[this.typeClasses]: true,
223204
},
224205
};

‎packages/main/src/themes/Button.css

+2-5
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,6 @@
6464
}
6565

6666
.ui5-button-icon {
67-
font-size: var(--_ui5_button_icon_font_size);
68-
height: 0;
69-
top: -.5rem;
70-
position: relative;
7167
color: inherit;
7268
flex-shrink: 0;
7369
}
@@ -82,6 +78,7 @@
8278

8379
:host([icon-only]) .ui5-button-root {
8480
min-width: auto;
81+
padding: 0;
8582
}
8683

8784
:host([icon-only]) .ui5-button-text {
@@ -289,4 +286,4 @@ ui5-button[design="Emphasized"][focused] .ui5-button-root::after {
289286
ui5-button ui5-icon.ui5-button-icon {
290287
height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/
291288
top: 0;
292-
}
289+
}

‎packages/main/src/themes/MessageStrip.css

+44-83
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
width: 100%;
66
}
77

8+
/** Root classes **/
89
.ui5-messagestrip-root {
910
width: 100%;
1011
height: 100%;
@@ -14,148 +15,108 @@
1415
border-width: var(--_ui5_messagestrip_border_width);
1516
border-style: solid;
1617
box-sizing: border-box;
17-
padding: 0.4375rem 2rem 0.4375rem 2.5rem;
1818
position: relative;
1919
}
2020

21-
.ui5-messagestrip-root .ui5-messagestrip-icon-wrapper {
22-
position: absolute;
23-
top: var(--_ui5_messagestrip_icon_top);
24-
left: 0.75rem;
25-
box-sizing: border-box;
21+
.ui5-messagestrip-root-no-icon {
22+
padding: var(--_ui5_messagestrip_padding_no_icon);
2623
}
2724

28-
.ui5-messagestrip-root .ui5-messagestrip-text {
29-
width: 100%;
30-
color: var(--sapTextColor);
31-
line-height: 1.2;
32-
}
33-
34-
.ui5-messagestrip-icon--hidden {
35-
padding: 0.4375rem 2rem 0.4375rem 1rem;
36-
}
37-
38-
.ui5-messagestrip-close-icon--hidden {
25+
.ui5-messagestrip-root-no-close-button {
3926
padding-right: 1rem;
4027
}
4128

42-
.ui5-messagestrip-text {
43-
font-family: var(--sapFontFamily);
44-
font-size: var(--sapFontSize);
45-
}
46-
47-
.ui5-messagestrip--info {
29+
.ui5-messagestrip-root--info {
4830
background-color: var(--sapInformationBackground);
4931
border-color: var(--sapInformationBorderColor);
5032
color: var(--sapTextColor);
5133
}
5234

53-
.ui5-messagestrip--info .ui5-messagestrip-icon {
35+
.ui5-messagestrip-root--info .ui5-messagestrip-icon {
5436
color: var(--sapInformativeElementColor);
5537
}
5638

57-
.ui5-messagestrip--positive {
39+
.ui5-messagestrip-root--positive {
5840
background-color: var(--sapSuccessBackground);
5941
border-color: var(--sapSuccessBorderColor);
6042
}
6143

62-
.ui5-messagestrip--positive .ui5-messagestrip-icon {
44+
.ui5-messagestrip-root--positive .ui5-messagestrip-icon {
6345
color: var(--sapPositiveElementColor);
6446
}
6547

66-
.ui5-messagestrip--negative {
48+
.ui5-messagestrip-root--negative {
6749
background-color: var(--sapErrorBackground);
6850
border-color: var(--sapErrorBorderColor);
6951
}
7052

71-
.ui5-messagestrip--negative .ui5-messagestrip-icon {
53+
.ui5-messagestrip-root--negative .ui5-messagestrip-icon {
7254
color: var(--sapNegativeElementColor);
7355
}
7456

75-
.ui5-messagestrip--warning {
57+
.ui5-messagestrip-root--warning {
7658
background-color: var(--sapWarningBackground);
7759
border-color: var(--sapWarningBorderColor);
7860
}
7961

80-
.ui5-messagestrip--warning .ui5-messagestrip-icon {
62+
.ui5-messagestrip-root--warning .ui5-messagestrip-icon {
8163
color: var(--sapCriticalElementColor);
8264
}
8365

84-
.ui5-messagestrip-close-icon-wrapper {
85-
display: flex;
86-
justify-content: center;
87-
align-items: center;
66+
/** Icon wrapper **/
67+
.ui5-messagestrip-icon-wrapper {
68+
position: absolute;
69+
top: var(--_ui5_messagestrip_icon_top);
70+
left: 0.75rem;
71+
box-sizing: border-box;
72+
}
73+
74+
/** Text **/
75+
.ui5-messagestrip-text {
76+
width: 100%;
77+
color: var(--sapTextColor);
78+
line-height: 1.2;
79+
font-family: var(--sapFontFamily);
80+
font-size: var(--sapFontSize);
81+
}
82+
83+
/** Close button **/
84+
.ui5-messagestrip-close-button {
8885
width: var(--_ui5_messagestrip_close_button_size);
86+
min-width: var(--_ui5_messagestrip_close_button_size);
8987
height: var(--_ui5_messagestrip_close_button_size);
90-
border-radius: 0.25rem;
91-
background: transparent;
92-
color: var(--sapTextColor);
93-
cursor: pointer;
88+
min-height: var(--_ui5_messagestrip_close_button_size);
9489
position: absolute;
9590
right: 0.125rem;
9691
top: 0.125rem;
97-
outline: none;
98-
border: var(--_ui5_messagestrip_close_button_border);
99-
-webkit-user-select: none;
100-
-ms-user-select: none;
101-
user-select: none;
102-
}
103-
104-
.ui5-messagestrip-close-icon-wrapper:hover {
105-
background-color: var(--sapButton_Lite_Hover_Background);
92+
color: var(--sapTextColor);
10693
}
107-
108-
.ui5-messagestrip-close-icon-wrapper:active {
109-
background-color: var(--sapButton_Active_Background);
94+
.ui5-messagestrip-close-button[active] {
11095
color: var(--sapButton_Active_TextColor);
11196
}
11297

113-
.ui5-messagestrip-close-icon {
114-
width: 0.75rem;
115-
height: 0.75rem;
116-
pointer-events: none;
117-
}
118-
119-
.ui5-messagestrip-close-icon-wrapper:active .ui5-messagestrip-close-icon {
120-
color: currentColor;
121-
}
122-
123-
.ui5-messagestrip-close-icon-wrapper:focus {
124-
outline-offset: var(--_ui5_messagestrip_focus_offset);
125-
outline: var(--_ui5_messagestrip_focus_width) dotted var(--sapContent_FocusColor);
126-
}
127-
128-
.ui5-messagestrip-close-icon-wrapper:active:focus {
129-
outline: var(--_ui5_messagestrip_focus_width) dotted var(--sapContent_ContrastFocusColor);
130-
}
131-
132-
/* FF renders outine around element content, causing double outline - around the button and the icon */
133-
.ui5-messagestrip-close-icon-wrapper::-moz-focus-inner {
134-
border: none;
135-
}
136-
13798
/* RTL */
13899
.ui5-messagestrip-root[dir="rtl"] {
139100
padding-right: 2.5rem;
140101
padding-left: 2rem;
141102
}
142103

143-
[dir="rtl"] .ui5-messagestrip-icon-wrapper {
144-
right: 0.75rem;
145-
left: 0;
146-
}
147-
148-
[dir="rtl"] .ui5-messagestrip-icon--hidden {
104+
[dir="rtl"] .ui5-messagestrip-root-no-icon {
149105
padding-right: 1rem;
150106
padding-left: 2rem;
151107
}
152108

153-
[dir="rtl"] .ui5-messagestrip-close-icon--hidden {
109+
[dir="rtl"] .ui5-messagestrip-root-no-close-button {
154110
padding-left: 1rem;
155111
padding-right: 0;
156112
}
157113

158-
[dir="rtl"] .ui5-messagestrip-close-icon-wrapper {
114+
[dir="rtl"] .ui5-messagestrip-icon-wrapper {
115+
right: 0.75rem;
116+
left: 0;
117+
}
118+
119+
[dir="rtl"] .ui5-messagestrip-close-button {
159120
left: 0.125rem;
160121
right: auto;
161-
}
122+
}

0 commit comments

Comments
 (0)