From e0e856cff5341693111380b3a716ea73f682f7e9 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 14 Feb 2019 15:34:44 +0200
Subject: [PATCH 1/2] docs(playground): substitute combobox with select in
 filters

---
 packages/playground/webapp/css/style.css      | 51 +++++++++----------
 packages/playground/webapp/view/Main.view.xml | 12 ++---
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/packages/playground/webapp/css/style.css b/packages/playground/webapp/css/style.css
index bbac81a5f452..f2247db961a7 100644
--- a/packages/playground/webapp/css/style.css
+++ b/packages/playground/webapp/css/style.css
@@ -56,6 +56,11 @@
 	background-color: #fff !important;
 }
 
+/* Fix flickering behaviour of Action list items */
+.side-links .sapMLIB {
+	padding: 0;
+}
+
 .hcb .side-links {
 	background-color: #000 !important;
 	color: #fff !important;
@@ -87,7 +92,7 @@ html.sap-desktop .hcb .side-links .links-list .sapMList .sapMLIB.sapMALI:not(.sa
 
 .side-links .links-list .sapMALIText {
 	text-align: left;
-    padding-left: 2rem;
+    padding-left: 2rem !important;
 }
 
 .side-links .links-list .sapMALIText:not(.sapMLIBActive){
@@ -256,7 +261,7 @@ html.sap-desktop .sapContrast .sapMLnk:focus:not(.sapMLnkDsbl) {
 }
 
 .switch-container {
-	background-color: #222222 !important;
+	background-color: #222 !important;
 	height: 14.19rem !important;
 	padding: 0 3rem;
 }
@@ -269,33 +274,30 @@ html.sap-desktop .sapContrast .sapMLnk:focus:not(.sapMLnkDsbl) {
 	color: white !important;
 }
 
-.switch-container .sapMInputBaseContentWrapper.sapMInputBaseHasEndIcons, .sapMInputBaseContentWrapper.sapMInputBaseHasEndIcons {
-	background-color: #222;
-	border-radius: 2px;
-	border-color: #fff;
-    border: 1px solid #fff;
+
+/* Change Combobox default styles */
+.switch-container .combobox-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow {
+	background-color: #000;
 }
 
-.switch-container .sapMInputBaseContentWrapper.sapMInputBaseHasEndIcons:hover,
-.switch-container .sapMInputBaseIconPressed.sapMInputBaseIcon,
-.switch-container .sapMInputBaseIconPressed .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {
-	background-color: #000 !important;
-	border-color: #fff !important;
+.switch-container .combobox-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow:hover,
+.switch-container .sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState) {
+	border-color: #fff;
 }
 
-.switch-container .sapMComboBoxInner.sapMInputBaseInner {
-	color: #fff !important;
+.switch-container .sapMSltArrow {
+	color: #fff;
+	background-color: #000;
 }
 
-.switch-container .sapMComboBox .sapMInputBaseIcon.sapUiIcon.sapUiIconMirrorInRTL.sapUiIconPointer {
-	color: #fff !important;
+.switch-container .sapMSelectListItemText {
+	color: #fff;
 }
 
-.switch-container .sapMInputBaseIcon:active,
-.switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon,
-html.sap-desktop .switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon:hover{
-	background-color: transparent;
+.switch-container .sapMSltPressed > .sapMSltArrow {
+	background-color: #222;
 }
+/* End of Combobox restyling */
 
 /* Override ComboBox Suggestions color */
 /* NB! Will affect all checkboxes! */
@@ -314,7 +316,7 @@ html.sap-desktop .switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon:
     display: flex !important;
     align-items: center;
     justify-content: center;
-	background-color: #222222 !important;
+	background-color: #222 !important;
 }
 
 .settings-button > span {
@@ -332,17 +334,12 @@ html.sap-desktop .switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon:
 	color: #fff !important;
 }
 
-.settings-button .sapMBtnActive {
-	/* background-color: #fff !important;
-	color: #000 !important; */
-}
-
 .settings-buttons-wrapper .sapMBtnContent {
 	color: #fff !important;
 }
 
 .combobox-width {
-	width: 20rem;
+	width: 20rem !important;
 }
 
 .ui5-logo {
diff --git a/packages/playground/webapp/view/Main.view.xml b/packages/playground/webapp/view/Main.view.xml
index 66471cf04840..5ccb7cc38da4 100644
--- a/packages/playground/webapp/view/Main.view.xml
+++ b/packages/playground/webapp/view/Main.view.xml
@@ -41,27 +41,27 @@
 				<FlexBox width="100%" justifyContent="SpaceBetween" wrap="Wrap">
 					<FlexBox direction="Column">
 						<Label text="Theme" labelFor="theme-cb"/>
-						<ComboBox class="combobox-width" id="theme-cb" selectedKey="sap_fiori_3">
+						<Select class="combobox-width" id="theme-cb" selectedKey="sap_fiori_3">
 							<core:Item key="sap_fiori_3" text="Fiori 3" />
 							<core:Item key="sap_belize_hcb" text="High Contrast Black" />
 							<core:Item key="sap_belize" text="Belize" />
-						</ComboBox>
+						</Select>
 					</FlexBox>
 
 					<FlexBox direction="Column">
 						<Label text="Content Density" labelFor="content-density-cb"/>				
-						<ComboBox class="combobox-width" id="content-densit-cb" selectedKey="false">
+						<Select class="combobox-width" id="content-densit-cb" selectedKey="false">
 							<core:Item key="false" text="Cozy" />
 							<core:Item key="true" text="Compact" />
-						</ComboBox>
+						</Select>
 					</FlexBox>
 
 					<FlexBox direction="Column">
 						<Label text="Text Direction" labelFor="direction-cb"/>				
-						<ComboBox class="combobox-width" id="direction-cb" selectedKey="false">
+						<Select class="combobox-width" id="direction-cb" selectedKey="false">
 							<core:Item key="false" text="LTR" />
 							<core:Item key="true" text="RTL" />
-						</ComboBox>
+						</Select>
 					</FlexBox>
 				</FlexBox>
 				<FlexBox class="settings-buttons-wrapper" width="100%" justifyContent="End">

From c600268fbd5a1a03bb178a99f2fb95d19d2cc605 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Fri, 15 Feb 2019 16:22:39 +0200
Subject: [PATCH 2/2] Change comments containing combobox

---
 packages/playground/webapp/css/style.css      | 12 ++++++------
 packages/playground/webapp/view/Main.view.xml |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/playground/webapp/css/style.css b/packages/playground/webapp/css/style.css
index f2247db961a7..f2c580dc9ab9 100644
--- a/packages/playground/webapp/css/style.css
+++ b/packages/playground/webapp/css/style.css
@@ -275,12 +275,12 @@ html.sap-desktop .sapContrast .sapMLnk:focus:not(.sapMLnkDsbl) {
 }
 
 
-/* Change Combobox default styles */
-.switch-container .combobox-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow {
+/* Change Select default styles */
+.switch-container .select-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow {
 	background-color: #000;
 }
 
-.switch-container .combobox-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow:hover,
+.switch-container .select-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow:hover,
 .switch-container .sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState) {
 	border-color: #fff;
 }
@@ -297,9 +297,9 @@ html.sap-desktop .sapContrast .sapMLnk:focus:not(.sapMLnkDsbl) {
 .switch-container .sapMSltPressed > .sapMSltArrow {
 	background-color: #222;
 }
-/* End of Combobox restyling */
+/* End of Select restyling */
 
-/* Override ComboBox Suggestions color */
+/* Override Select Suggestions color */
 /* NB! Will affect all checkboxes! */
 .sapMSelectListItem {
 	background-color: #000 !important;
@@ -338,7 +338,7 @@ html.sap-desktop .sapContrast .sapMLnk:focus:not(.sapMLnkDsbl) {
 	color: #fff !important;
 }
 
-.combobox-width {
+.select-width {
 	width: 20rem !important;
 }
 
diff --git a/packages/playground/webapp/view/Main.view.xml b/packages/playground/webapp/view/Main.view.xml
index 5ccb7cc38da4..be281a2a9543 100644
--- a/packages/playground/webapp/view/Main.view.xml
+++ b/packages/playground/webapp/view/Main.view.xml
@@ -41,7 +41,7 @@
 				<FlexBox width="100%" justifyContent="SpaceBetween" wrap="Wrap">
 					<FlexBox direction="Column">
 						<Label text="Theme" labelFor="theme-cb"/>
-						<Select class="combobox-width" id="theme-cb" selectedKey="sap_fiori_3">
+						<Select class="select-width" id="theme-cb" selectedKey="sap_fiori_3">
 							<core:Item key="sap_fiori_3" text="Fiori 3" />
 							<core:Item key="sap_belize_hcb" text="High Contrast Black" />
 							<core:Item key="sap_belize" text="Belize" />
@@ -50,7 +50,7 @@
 
 					<FlexBox direction="Column">
 						<Label text="Content Density" labelFor="content-density-cb"/>				
-						<Select class="combobox-width" id="content-densit-cb" selectedKey="false">
+						<Select class="select-width" id="content-densit-cb" selectedKey="false">
 							<core:Item key="false" text="Cozy" />
 							<core:Item key="true" text="Compact" />
 						</Select>
@@ -58,7 +58,7 @@
 
 					<FlexBox direction="Column">
 						<Label text="Text Direction" labelFor="direction-cb"/>				
-						<Select class="combobox-width" id="direction-cb" selectedKey="false">
+						<Select class="select-width" id="direction-cb" selectedKey="false">
 							<core:Item key="false" text="LTR" />
 							<core:Item key="true" text="RTL" />
 						</Select>