feat(ui5-input, ui5-combobox, ui5-multicombobox): SAP Horizon Theme Implementation (#4182)

elenastoyanovaa · web-flow · commit 1f1db0743c4a · 2021-10-28T13:26:59.000+03:00
* feat(ui5-input, ui5-combobox, ui5-multicombobox): SAP Horizon Theme Implementation

* additional styles

* remove hash update

* add nmore logic

* additional styles
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -39,6 +39,7 @@ import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 import ComboBoxItem from "./ComboBoxItem.js";
 import Icon from "./Icon.js";
@@ -367,7 +368,7 @@ class ComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss, SuggestionsCss];
 	}
 
 	static get template() {
@@ -994,6 +995,10 @@ class ComboBox extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateText,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-header": true,
 				"ui5-valuestatemessage-root": true,
diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -1,4 +1,5 @@
 <ui5-responsive-popover
+	class="{{classes.popover}}"
 	hide-arrow
 	content-only-on-desktop
 	_disable-initial-focus
diff --git a/packages/main/src/GroupHeaderListItem.hbs b/packages/main/src/GroupHeaderListItem.hbs
@@ -1,4 +1,5 @@
 <li
+	part="native-li"
 	tabindex="{{_tabIndex}}"
 	class="ui5-ghli-root {{classes.main}}"
 	@focusin="{{_onfocusin}}"
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -40,6 +40,7 @@ import {
 import styles from "./generated/themes/Input.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 const rgxFloat = new RegExp(/(\+|-)?\d+(\.|,)\d+/);
 
@@ -487,7 +488,7 @@ class Input extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	constructor() {
@@ -1154,6 +1155,10 @@ class Input extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-suggestions-popover": !this.isPhone && this.showSuggestions,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.showSuggestions && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage-header": true,
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
@@ -1,5 +1,6 @@
 {{#if showSuggestions}}
 	<ui5-responsive-popover
+		class="{{classes.popover}}"
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
@@ -1,4 +1,5 @@
 <li
+	part="native-li"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -49,6 +49,7 @@ import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPop
 import styles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 /**
  * @public
@@ -388,7 +389,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get dependencies() {
@@ -1033,6 +1034,11 @@ class MultiComboBox extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-multi-combobox-all-items-responsive-popover": true,
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage-header": true,
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -1,7 +1,7 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
 	horizontal-align="Stretch"
-	class="ui5-multi-combobox-all-items-responsive-popover"
+	class="{{classes.popover}}"
 	hide-arrow
 	_disable-initial-focus
 	@ui5-selection-change={{_listSelectionChange}}
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
@@ -27,6 +27,9 @@ import styles from "./generated/themes/Tokenizer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 
+// reuse suggestions focus styling for NMore popup
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
+
 /**
  * @public
  */
@@ -125,7 +128,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get staticAreaTemplate() {
diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
@@ -181,6 +181,7 @@ class Suggestions {
 
 		this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
 		item.selected = false;
+		item.focused = false;
 		this._getComponent().open = false;
 	}
 
@@ -296,10 +297,12 @@ class Suggestions {
 
 		if (previousItem) {
 			previousItem.selected = false;
+			previousItem.focused = false;
 		}
 
 		if (currentItem) {
 			currentItem.selected = true;
+			currentItem.focused = true;
 
 			if (this.handleFocus) {
 				currentItem.focus();
@@ -317,6 +320,7 @@ class Suggestions {
 		const items = this._getItems();
 		items.forEach(item => {
 			item.selected = false;
+			item.focused = false;
 		});
 	}
 
diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
@@ -0,0 +1,14 @@
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li][focused]:first-child::part(native-li)::after,
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-groupheader][focused]:first-child::part(native-li)::after,
+.ui5-suggestions-popover:not(.ui5-suggestions-popover-with-value-state-header) [ui5-li-suggestion-item][focused]:first-child::part(native-li)::after,
+.ui5-tokenizer-list [ui5-li][focused]:first-child::part(native-li)::after {
+	border-top-left-radius: var(--_ui5_suggestions_item_focus_border_radius);
+	border-top-right-radius: var(--_ui5_suggestions_item_focus_border_radius);
+}
+
+.ui5-suggestions-popover [ui5-li][focused]:last-child::part(native-li)::after,
+.ui5-suggestions-popover [ui5-li-suggestion-item][focused]:last-child::part(native-li)::after,
+.ui5-tokenizer-list [ui5-li][focused]:last-child::part(native-li)::after {
+	border-bottom-left-radius: var(--_ui5_suggestions_item_focus_border_radius);
+	border-bottom-right-radius: var(--_ui5_suggestions_item_focus_border_radius);
+}
diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css
@@ -38,8 +38,7 @@ ui5-responsive-popover .ui5-valuestatemessage-header {
 }
 
 .ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
-	outline-width: 0.0625rem;
-	outline-style: dotted;
 	outline-offset: -0.125rem;
-	outline-color: initial;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_value_state_message_focus_border_radius);
 } 
diff --git a/packages/main/src/themes/base/Suggestions-parameters.css b/packages/main/src/themes/base/Suggestions-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_suggestions_item_focus_border_radius: 0;
+}
diff --git a/packages/main/src/themes/base/ValueStateMessage-parameters.css b/packages/main/src/themes/base/ValueStateMessage-parameters.css
@@ -1,3 +1,4 @@
 :root {
 	--_ui5_value_state_message_border: none;
+	--_ui5_value_state_message_focus_border_radius: 0;
 }
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -39,4 +39,5 @@
 @import "../base/Token-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -39,3 +39,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -38,4 +38,5 @@
 @import "./Token-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -39,4 +39,5 @@
 @import "./Token-parameters.css";
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -39,3 +39,4 @@
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -39,4 +39,5 @@
 @import "./Token-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -39,4 +39,5 @@
 @import "./Token-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
-@import "./SliderBase-parameters.css";
+@import "./SliderBase-parameters.css";
+@import "../base/Suggestions-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/Suggestions-parameters.css b/packages/main/src/themes/sap_horizon/Suggestions-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/Suggestions-parameters.css";
+
+:root {
+	--_ui5_suggestions_item_focus_border_radius: var(--sapElement_BorderCornerRadius);
+}
diff --git a/packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css b/packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/ValueStateMessage-parameters.css";
+
+:root {
+	--_ui5_value_state_message_focus_border_radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
+}
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -40,9 +40,10 @@
 @import "../base/GrowingButton-parameters.css";
 @import "../base/Title-parameters.css";
 @import "./Token-parameters.css";
-@import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
+@import "./ValueStateMessage-parameters.css";
+@import "./Suggestions-parameters.css";
 @import "./Table-parameters.css";
 @import "./TableRow-parameters.css";
-@import "./TableColumn-parameters.css";
+@import "./TableColumn-parameters.css";

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<ui5-responsive-popover`
	`2`	`+ class="{{classes.popover}}"`
`2`	`3`	`hide-arrow`
`3`	`4`	`content-only-on-desktop`
`4`	`5`	`_disable-initial-focus`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<li`
	`2`	`+ part="native-li"`
`2`	`3`	`tabindex="{{_tabIndex}}"`
`3`	`4`	`class="ui5-ghli-root {{classes.main}}"`
`4`	`5`	`@focusin="{{_onfocusin}}"`