feat(inputs): adjust dropdowns according to Horizon themes specification (#5054)

niyap · web-flow · commit 788402231d2e · 2022-04-19T17:59:17.000+03:00
diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
@@ -2,21 +2,6 @@
 	box-shadow: var(--sapContent_Shadow1);
 }
 
-.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);
-}
-
 .ui5-suggestions-popover::part(header),
 .ui5-suggestions-popover::part(content) {
 	padding: 0;
diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css
@@ -70,7 +70,6 @@
 .ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
 	outline-offset: var(--_ui5_value_state_header_offset);
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	border-radius: var(--_ui5_value_state_message_focus_border_radius);
 }
 
 .ui5-valuestatemessage-popover::part(header),
diff --git a/packages/main/src/themes/base/Suggestions-parameters.css b/packages/main/src/themes/base/Suggestions-parameters.css
diff --git a/packages/main/src/themes/base/ValueStateMessage-parameters.css b/packages/main/src/themes/base/ValueStateMessage-parameters.css
@@ -1,7 +1,6 @@
 :root {
 	--_ui5_value_state_message_border: none;
 	--_ui5_value_state_header_border: none;
-	--_ui5_value_state_message_focus_border_radius: 0;
 	--_ui5_input_value_state_icon_display: none;
 	--_ui5_value_state_message_padding: 0.5rem;
 	--_ui5_value_state_header_padding: .5625rem 1rem;
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -47,5 +47,4 @@
 @import "../base/ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-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
@@ -46,5 +46,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-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
@@ -46,5 +46,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-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
@@ -47,5 +47,4 @@
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-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
@@ -46,5 +46,4 @@
 @import "../base/ValueStateMessage-parameters.css";
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-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
@@ -48,5 +48,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-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
@@ -48,5 +48,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/Suggestions-parameters.css b/packages/main/src/themes/sap_horizon/Suggestions-parameters.css
diff --git a/packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css b/packages/main/src/themes/sap_horizon/ValueStateMessage-parameters.css
@@ -1,11 +1,11 @@
 @import "../base/ValueStateMessage-parameters.css";
 
 :root {
-	--_ui5_value_state_message_focus_border_radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
 	--_ui5_input_value_state_icon_display: inline-block;
 	--_ui5_value_state_message_padding: 0.5rem 0.5rem 0.5rem 1.875rem;
 	--_ui5_value_state_header_padding: .5rem .5rem .5rem 1.875rem;
 	--_ui5_value_state_message_popover_box_shadow: var(--sapContent_Shadow1);
 	--_ui5_value_state_message_icon_width: 1rem;
 	--_ui5_value_state_message_icon_height: 1rem;
+	--_ui5_value_state_header_offset: -0.25rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -50,7 +50,6 @@
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "./ValueStateMessage-parameters.css";
-@import "./Suggestions-parameters.css";
 @import "./Table-parameters.css";
 @import "./TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_dark/Suggestions-parameters.css b/packages/main/src/themes/sap_horizon_dark/Suggestions-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_dark/ValueStateMessage-parameters.css b/packages/main/src/themes/sap_horizon_dark/ValueStateMessage-parameters.css
@@ -1,11 +1,11 @@
 @import "../base/ValueStateMessage-parameters.css";
 
 :root {
-	--_ui5_value_state_message_focus_border_radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
 	--_ui5_input_value_state_icon_display: inline-block;
 	--_ui5_value_state_message_padding: 0.5rem 0.5rem 0.5rem 1.875rem;
 	--_ui5_value_state_header_padding: .5rem .5rem .5rem 1.875rem;
 	--_ui5_value_state_message_popover_box_shadow: var(--sapContent_Shadow1);
 	--_ui5_value_state_message_icon_width: 1rem;
 	--_ui5_value_state_message_icon_height: 1rem;
+	--_ui5_value_state_header_offset: -0.25rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -50,7 +50,6 @@
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "./ValueStateMessage-parameters.css";
-@import "./Suggestions-parameters.css";
 @import "./Table-parameters.css";
 @import "./TableColumn-parameters.css";
 @import "./TableRow-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -48,5 +48,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -48,5 +48,4 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
 @import "../base/StepInput-parameters.css";

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,6 @@`
`70`	`70`	`.ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {`
`71`	`71`	`outline-offset: var(--_ui5_value_state_header_offset);`
`72`	`72`	`outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);`
`73`		`- border-radius: var(--_ui5_value_state_message_focus_border_radius);`
`74`	`73`	`}`
`75`	`74`
`76`	`75`	`.ui5-valuestatemessage-popover::part(header),`