wip: remove cloneNode from valueStateMessage

SAP · May 10, 2024 · ae83517 · ae83517
1 parent 81298c4
commit ae83517
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 82 deletions.
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -1105,7 +1105,7 @@ class ComboBox extends UI5Element {
 	}
 
 	_announceValueStateText() {
-		const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessageText.map(el => el.textContent).join(" ");
+		const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessage.map(el => el.textContent).join(" ");
 
 		if (valueStateText) {
 			announce(valueStateText, InvisibleMessageMode.Polite);
@@ -1158,7 +1158,7 @@ class ComboBox extends UI5Element {
 			return `${text} ${this.valueStateDefaultText || ""}`;
 		}
 
-		return `${text}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+		return `${text}`.concat(" ", this.valueStateMessage.map(el => el.textContent).join(" "));
 	}
 
 	get valueStateDefaultText(): string | undefined {
@@ -1169,10 +1169,6 @@ class ComboBox extends UI5Element {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
-	get valueStateMessageText(): Array<Node> {
-		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
-	}
-
 	get valueStateTextMappings(): ValueStateAnnouncement {
 		return {
 			[ValueState.Positive]: ComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS),

diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -44,21 +44,23 @@
 		</div>
 
 		{{#if hasValueStateText}}
-			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
-				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
-			</div>
+			{{#unless shouldOpenValueStateMessagePopover}}
+				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+					{{> valueStateMessageContent}}
+				</div>
+			{{/unless}}
 		{{/if}}
-	{{/if}}
-
-	{{#unless _isPhone}}
+	{{else}}
 		{{#if hasValueStateText}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
-				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
-			</div>
+			{{#unless shouldOpenValueStateMessagePopover}}
+				<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+					{{> valueStateMessageContent}}
+				</div>
+			{{/unless}}
 		{{/if}}
-	{{/unless}}
+	{{/if}}
 
 	<ui5-list
 		class="ui5-combobox-items-list"
@@ -100,18 +102,16 @@
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-			{{> valueStateMessage}}
+			{{> valueStateMessageContent}}
 		</div>
 	</ui5-popover>
 {{/if}}
 
-{{#*inline "valueStateMessage"}}
+{{#*inline "valueStateMessageContent"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateDefaultText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessageText"></slot>
 	{{/if}}
 {{/inline}}
 

diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts
@@ -433,10 +433,6 @@ class FileUploader extends UI5Element implements IFormElement {
 		return this.hasValueState && this.valueState !== ValueState.Positive;
 	}
 
-	get valueStateMessageText() {
-		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
-	}
-
 	get shouldDisplayDefaultValueStateMessage(): boolean {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}

diff --git a/packages/main/src/FileUploaderPopover.hbs b/packages/main/src/FileUploaderPopover.hbs
@@ -11,16 +11,14 @@
 		{{#if _valueStateMessageInputIcon}}
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 		{{/if}}
-		{{> valueStateMessage}}
+		{{> valueStateMessageContent}}
 	</div>
 </ui5-popover>
 
-{{#*inline "valueStateMessage"}}
+{{#*inline "valueStateMessageContent"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -1738,7 +1738,7 @@ class MultiComboBox extends UI5Element {
 			return `${text} ${this.valueStateDefaultText || ""}`;
 		}
 
-		return `${text}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+		return `${text}`.concat(" ", this.valueStateMessage.map(el => el.textContent).join(" "));
 	}
 
 	get valueStateDefaultText(): string {
@@ -1759,10 +1759,6 @@ class MultiComboBox extends UI5Element {
 		return this.hasValueState ? `ui5-multi-combobox-valueStateDesc` : undefined;
 	}
 
-	get valueStateMessageText() {
-		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
-	}
-
 	get ariaLabelText() {
 		return getEffectiveAriaLabelText(this);
 	}

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -47,25 +47,27 @@
 			</div>
 		</div>
 		{{#if hasValueStateMessage}}
-			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
-				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
-			</div>
+			{{#unless shouldDisplayOnlyValueStateMessage}}
+				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+					{{> valueStateMessageContent}}
+				</div>
+			{{/unless}}
 		{{/if}}
 
 		{{> selectAllWrapper}}
-	{{/if}}
-
-	{{#unless _isPhone}}
+	{{else}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" @keydown="{{_onListHeaderKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
-				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
-			</div>
+			{{#unless shouldDisplayOnlyValueStateMessage}}
+				<div slot="header" @keydown="{{_onListHeaderKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+					{{> valueStateMessageContent}}
+				</div>
+			{{/unless}}
 		{{/if}}
 
 		{{> selectAllWrapper}}
-	{{/unless}}
+	{{/if}}
 
 	{{#if filterSelected}}
 		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
@@ -99,7 +101,7 @@
 	{{/if}}
 </ui5-responsive-popover>
 
-{{#if hasValueStateMessage}}
+{{#if shouldDisplayOnlyValueStateMessage}}
 	<ui5-popover
 		skip-registry-update
 		_disable-initial-focus
@@ -112,18 +114,16 @@
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-			{{> valueStateMessage}}
+			{{> valueStateMessageContent}}
 		</div>
 	</ui5-popover>
 {{/if}}
 
-{{#*inline "valueStateMessage"}}
+{{#*inline "valueStateMessageContent"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateDefaultText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
 

diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
@@ -973,7 +973,7 @@ class Select extends UI5Element implements IFormElement {
 		if (this.shouldDisplayDefaultValueStateMessage) {
 			valueStateText = this.valueStateDefaultText;
 		} else {
-			valueStateText = this.valueStateMessageText.map(el => el.textContent).join(" ");
+			valueStateText = this.valueStateMessage.map(el => el.textContent).join(" ");
 		}
 
 		return `${this.valueStateTypeText} ${valueStateText}`;
@@ -1070,7 +1070,7 @@ class Select extends UI5Element implements IFormElement {
 	}
 
 	get shouldDisplayDefaultValueStateMessage() {
-		return !this.valueStateMessageText.length && this.hasValueStateText;
+		return !this.valueStateMessage.length && this.hasValueStateText;
 	}
 
 	get hasValueStateText() {

diff --git a/packages/main/src/SelectPopover.hbs b/packages/main/src/SelectPopover.hbs
@@ -24,20 +24,23 @@
 					</ui5-button>
 				</div>
 				{{#if hasValueStateText}}
-					<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
-						{{> valueStateMessage}}
-					</div>
+					{{#unless shouldOpenValueStateMessagePopover}}
+						<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
+							{{> valueStateMessageContent}}
+						</div>
+					{{/unless}}
 				{{/if}}
 			</div>
-		{{/if}}
-		{{#unless _isPhone}}
+		{{else}}
 			{{#if hasValueStateText}}
-				<div class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
-					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
-					{{> valueStateMessage}}
-				</div>
+				{{#unless shouldOpenValueStateMessagePopover}}
+					<div class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+						<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+						{{> valueStateMessageContent}}
+					</div>
+				{{/unless}}
 			{{/if}}
-		{{/unless}}
+		{{/if}}
 
 		<ui5-list
 			selection-mode="SingleAuto"
@@ -75,17 +78,15 @@
 	>
 		<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
-			{{> valueStateMessage}}
+			{{> valueStateMessageContent}}
 		</div>
 	</ui5-popover>
 {{/if}}
 
-{{#*inline "valueStateMessage"}}
+{{#*inline "valueStateMessageContent"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
@@ -577,7 +577,7 @@ class TextArea extends UI5Element implements IFormElement {
 		}
 
 		if (this.hasCustomValueState) {
-			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessage.map(el => el.textContent).join(" "));
 		}
 
 		return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
@@ -611,10 +611,6 @@ class TextArea extends UI5Element implements IFormElement {
 		return this.valueState === ValueState.Negative || this.valueState === ValueState.Critical || this.valueState === ValueState.Information;
 	}
 
-	get valueStateMessageText() {
-		return this.valueStateMessage.map(x => x.cloneNode(true));
-	}
-
 	get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
 		return this.effectiveDir !== "rtl" ? "Start" : "End";
 	}

diff --git a/packages/main/src/TextAreaPopover.hbs b/packages/main/src/TextAreaPopover.hbs
@@ -11,16 +11,14 @@
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-			{{> valueStateMessage}}
+			{{> valueStateMessageContent}}
 		</div>
 	</ui5-popover>
 {{/if}}
 
-{{#*inline "valueStateMessage"}}
+{{#*inline "valueStateMessageContent"}}
 	{{#if hasCustomValueState}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{else}}
 		{{valueStateDefaultText}}
 	{{/if}}

diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
@@ -172,6 +172,7 @@
 			<ui5-mcb-item text="Compact"></ui5-mcb-item>
 			<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
 			<ui5-mcb-item selected text="Longest word in the world"></ui5-mcb-item>
+			<div slot="valueStateMessage">Test</div>
 		</ui5-multi-combobox>
 	</div>