docs(playground): substitute combobox with select in filters (#53)

Author: fifoosid

packages/playground/webapp/css/style.css

@@ -55,6 +55,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;
@@ -86,7 +91,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){
@@ -255,7 +260,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;
 }
@@ -268,35 +273,32 @@ 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 Select default styles */
+.switch-container .select-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 .select-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 Select restyling */
 
-/* Override ComboBox Suggestions color */
+/* Override Select Suggestions color */
 /* NB! Will affect all checkboxes! */
 .sapMSelectListItem {
 	background-color: #000 !important;
@@ -313,7 +315,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 {
@@ -331,17 +333,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;
+.select-width {
+	width: 20rem !important;
 }
 
 .ui5-logo {

packages/playground/webapp/view/Main.view.xml

@@ -50,27 +50,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="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" />
-						</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="select-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="select-width" id="direction-cb" selectedKey="false">
 							<core:Item key="false" text="LTR" />
 							<core:Item key="true" text="RTL" />
-						</ComboBox>
+						</Select>
 					</FlexBox>
 				</FlexBox>