Skip to content

Commit a03f2b3

Browse files
ivoplashkovivoplashkov
authored
fix(ui5-multiinput): Improve valueStateMessage in nMore popover (#2225)
ValueStateMessage is now shown inside the nMore popover on both desktop and mobile devices. FIXES: #1086
1 parent 746b348 commit a03f2b3

File tree

5 files changed

+182
-2
lines changed

5 files changed

+182
-2
lines changed

‎packages/main/src/MultiInput.hbs

+10
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
class="ui5-multi-input-tokenizer"
66
.morePopoverOpener={{this}}
77
.popoverMinWidth={{_inputWidth}}
8+
.valueState={{valueState}}
89
?expanded="{{expandedTokenizer}}"
910
show-more
1011
@keydown="{{_onTokenizerKeydown}}"
@@ -13,6 +14,15 @@
1314
@focusout="{{_tokenizerFocusOut}}"
1415
>
1516
<slot name="tokens"></slot>
17+
<div slot="valueStateMessage">
18+
{{#if shouldDisplayDefaultValueStateMessage}}
19+
{{valueStateText}}
20+
{{else}}
21+
{{#each valueStateMessageText}}
22+
{{this}}
23+
{{/each}}
24+
{{/if}}
25+
</div>
1626
</ui5-tokenizer>
1727
{{/inline}}
1828

‎packages/main/src/Tokenizer.js

+55
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnable
66
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
77
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
88
import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
9+
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
10+
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
911
import ResponsivePopover from "./ResponsivePopover.js";
1012
import List from "./List.js";
1113
import StandardListItem from "./StandardListItem.js";
@@ -15,6 +17,8 @@ import { MULTIINPUT_SHOW_MORE_TOKENS, TOKENIZER_ARIA_LABEL, TOKENIZER_POPOVER_RE
1517

1618
// Styles
1719
import styles from "./generated/themes/Tokenizer.css.js";
20+
import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
21+
import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
1822

1923
/**
2024
* @public
@@ -29,6 +33,10 @@ const metadata = {
2933
type: HTMLElement,
3034
individualSlots: true,
3135
},
36+
"valueStateMessage": {
37+
propertyName: "valueStateMessage",
38+
type: HTMLElement,
39+
},
3240
},
3341
properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
3442
showMore: { type: Boolean },
@@ -48,6 +56,18 @@ const metadata = {
4856
type: Integer,
4957
},
5058

59+
/**
60+
* Indicates the value state of the related input component.
61+
*
62+
* @type {ValueState}
63+
* @defaultvalue "None"
64+
* @private
65+
*/
66+
valueState: {
67+
type: ValueState,
68+
defaultValue: ValueState.None,
69+
},
70+
5171
_nMoreCount: { type: Integer },
5272
},
5373
events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
@@ -97,6 +117,10 @@ class Tokenizer extends UI5Element {
97117
return styles;
98118
}
99119

120+
static get staticAreaStyles() {
121+
return [ResponsivePopoverCommonCss, ValueStateMessageCss];
122+
}
123+
100124
static get staticAreaTemplate() {
101125
return TokenizerPopoverTemplate;
102126
}
@@ -282,6 +306,18 @@ class Tokenizer extends UI5Element {
282306
});
283307
}
284308

309+
get hasValueState() {
310+
return this.valueState === ValueState.None || this.valueState === ValueState.Success;
311+
}
312+
313+
get valueStateMessageText() {
314+
return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
315+
}
316+
317+
get _isPhone() {
318+
return isPhone();
319+
}
320+
285321
get classes() {
286322
return {
287323
wrapper: {
@@ -293,6 +329,14 @@ class Tokenizer extends UI5Element {
293329
"ui5-tokenizer--content": true,
294330
"ui5-tokenizer-nmore--content": this.showMore,
295331
},
332+
popoverValueState: {
333+
"ui5-valuestatemessage-root": true,
334+
"ui5-responsive-popover-header": this.showPopover,
335+
"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
336+
"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
337+
"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
338+
"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
339+
},
296340
};
297341
}
298342

@@ -301,6 +345,17 @@ class Tokenizer extends UI5Element {
301345
popover: {
302346
"min-width": `${this.popoverMinWidth}px`,
303347
},
348+
popoverValueStateMessage: {
349+
"width": isPhone() ? "100%" : `${this.popoverMinWidth}px`,
350+
"min-height": "2rem",
351+
"padding": isPhone() ? "0.25rem 1rem" : "0.3rem 0.625rem",
352+
},
353+
popoverHeader: {
354+
"min-height": "2rem",
355+
},
356+
popoverHeaderTitle: {
357+
"justify-content": "left",
358+
},
304359
};
305360
}
306361

‎packages/main/src/TokenizerPopover.hbs

+30-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,32 @@
22
tokenizer-popover="true"
33
style={{styles.popover}}
44
header-text={{morePopoverTitle}}
5-
content-only-on-desktop
5+
?content-only-on-desktop="{{hasValueState}}"
66
no-arrow
77
placement-type="Bottom"
88
horizontal-align="Left"
99
>
10+
{{#unless hasValueState}}
11+
<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
12+
{{#if _isPhone}}
13+
<div class="row" style="{{styles.popoverHeaderTitle}}">
14+
<ui5-title level="H5" class="ui5-responsive-popover-header-text">Remove</ui5-title>
15+
<ui5-button
16+
class="ui5-responsive-popover-close-btn"
17+
icon="decline"
18+
design="Transparent"
19+
@click="{{closeMorePopover}}"
20+
>
21+
</ui5-button>
22+
</div>
23+
{{/if}}
24+
<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
25+
{{#each valueStateMessageText}}
26+
{{this}}
27+
{{/each}}
28+
</div>
29+
</div>
30+
{{/unless}}
1031
<ui5-list
1132
class="ui5-tokenizer-list"
1233
mode="Delete"
@@ -18,4 +39,12 @@
1839
</ui5-li>
1940
{{/each}}
2041
</ui5-list>
42+
{{#if _isPhone}}
43+
<div slot="footer" class="ui5-responsive-popover-footer">
44+
<ui5-button
45+
design="Transparent"
46+
@click="{{closeMorePopover}}"
47+
>OK</ui5-button>
48+
</div>
49+
{{/if}}
2150
</ui5-responsive-popover>

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
width: 0;
108108
}
109109

110-
/* MultiComboBox specific */
110+
/* MultiComboBox & MultiInput specific */
111111
.ui5-multi-combobox-toggle-button {
112112
margin-left: 0.5rem;
113113
}
@@ -119,6 +119,12 @@
119119
flex-direction: column;
120120
}
121121

122+
.ui5-responsive-popover-header-text {
123+
display: flex;
124+
align-items: center;
125+
width: calc(100% - var(--_ui5_button_base_min_width));
126+
}
127+
122128
/* Header and footer layout */
123129
.ui5-responsive-popover-header .row {
124130
box-sizing: border-box;

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

+80
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,86 @@ <h1 class="sample-container-title">Multi Input with 11 tokens (overflowing) and
121121
<span id="basic-event-listener"></span>
122122
</div>
123123

124+
<div class="sample-container">
125+
<h1>Value States</h1>
126+
127+
<h1 class="sample-container-title">Multi Input - Success</h1>
128+
<ui5-multi-input id="multiInput-success"
129+
value-state="Success">
130+
<ui5-token slot="tokens" text="Amet"></ui5-token>
131+
<ui5-token slot="tokens" text="Incididunt"></ui5-token>
132+
<ui5-token slot="tokens" text="laboris"></ui5-token>
133+
<ui5-token slot="tokens" text="ea"></ui5-token>
134+
<ui5-token slot="tokens" text="eu"></ui5-token>
135+
<ui5-token slot="tokens" text="ipsum"></ui5-token>
136+
<ui5-token slot="tokens" text="do"></ui5-token>
137+
<ui5-token slot="tokens" text="esse"></ui5-token>
138+
<ui5-token slot="tokens" text="eu"></ui5-token>
139+
<ui5-token slot="tokens" text="amet"></ui5-token>
140+
<ui5-token slot="tokens" text="do"></ui5-token>
141+
</ui5-multi-input>
142+
143+
<br>
144+
<br>
145+
<h1 class="sample-container-title">Multi Input - Information</h1>
146+
<ui5-multi-input id="multiInput-information"
147+
value-state="Information">
148+
<ui5-token slot="tokens" text="Amet"></ui5-token>
149+
<ui5-token slot="tokens" text="Incididunt"></ui5-token>
150+
<ui5-token slot="tokens" text="laboris"></ui5-token>
151+
<ui5-token slot="tokens" text="ea"></ui5-token>
152+
<ui5-token slot="tokens" text="eu"></ui5-token>
153+
<ui5-token slot="tokens" text="ipsum"></ui5-token>
154+
<ui5-token slot="tokens" text="do"></ui5-token>
155+
<ui5-token slot="tokens" text="esse"></ui5-token>
156+
<ui5-token slot="tokens" text="eu"></ui5-token>
157+
<ui5-token slot="tokens" text="amet"></ui5-token>
158+
<ui5-token slot="tokens" text="do"></ui5-token>
159+
<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
160+
</ui5-multi-input>
161+
162+
<br>
163+
<br>
164+
165+
<h1 class="sample-container-title">Multi Input - Warning</h1>
166+
<ui5-multi-input id="multiInput-warning"
167+
value-state="Warning">
168+
<ui5-token slot="tokens" text="Amet"></ui5-token>
169+
<ui5-token slot="tokens" text="Incididunt"></ui5-token>
170+
<ui5-token slot="tokens" text="laboris"></ui5-token>
171+
<ui5-token slot="tokens" text="ea"></ui5-token>
172+
<ui5-token slot="tokens" text="eu"></ui5-token>
173+
<ui5-token slot="tokens" text="ipsum"></ui5-token>
174+
<ui5-token slot="tokens" text="do"></ui5-token>
175+
<ui5-token slot="tokens" text="esse"></ui5-token>
176+
<ui5-token slot="tokens" text="eu"></ui5-token>
177+
<ui5-token slot="tokens" text="amet"></ui5-token>
178+
<ui5-token slot="tokens" text="do"></ui5-token>
179+
</ui5-multi-input>
180+
181+
<br>
182+
<br>
183+
184+
<h1 class="sample-container-title">Multi Input - Error</h1>
185+
<ui5-multi-input id="multiInput-error"
186+
value-state="Error">
187+
<ui5-token slot="tokens" text="Amet"></ui5-token>
188+
<ui5-token slot="tokens" text="Incididunt"></ui5-token>
189+
<ui5-token slot="tokens" text="laboris"></ui5-token>
190+
<ui5-token slot="tokens" text="ea"></ui5-token>
191+
<ui5-token slot="tokens" text="eu"></ui5-token>
192+
<ui5-token slot="tokens" text="ipsum"></ui5-token>
193+
<ui5-token slot="tokens" text="do"></ui5-token>
194+
<ui5-token slot="tokens" text="esse"></ui5-token>
195+
<ui5-token slot="tokens" text="eu"></ui5-token>
196+
<ui5-token slot="tokens" text="amet"></ui5-token>
197+
<ui5-token slot="tokens" text="do"></ui5-token>
198+
</ui5-multi-input>
199+
200+
<br>
201+
<br>
202+
</div>
203+
124204
<div class="sample-container">
125205
<h1>Tokens</h1>
126206

0 commit comments

Comments
 (0)