From 4b843352d202d70b33e62f64ef8ed3d44dea7f08 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Thu, 18 Nov 2021 18:37:47 +0300
Subject: [PATCH 1/2] feat(core-blocks): CB-1449 add icon to combobox input

---
 .../core-blocks/src/FormControls/Combobox.tsx | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
index 522fadefc8..1886998eb9 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -41,14 +41,17 @@ const styles = composes(
       font-weight: 500;
     }
     input {
-      padding-right: 12px !important;
+      padding-right: 24px !important;
     }
     MenuButton {
       position: absolute;
       right: 0;
       background: transparent;
       outline: none;
-      padding: 4px;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 8px 0 0;
       cursor: pointer;
       &:hover, &:focus {
         opacity: 0.7;
@@ -108,17 +111,22 @@ const styles = composes(
       display: flex;
       align-items: center;
 
-      /* & input-icon {
-        width: 32px;
-        height: 32px;
-        overflow: hidden;
-        flex-shrink: 0;
-
-        & IconOrImage {
-          width: 100%;
-          height: 100%;
-        }
-      }*/
+      & input-icon {
+          position: absolute;
+          left: 0;
+          width: 16px;
+          height: 16px;
+          margin-left: 12px;
+    
+          & IconOrImage {
+            width: 100%;
+            height: 100%;
+          }
+    
+          &:not(:empty) + input {
+            padding-left: 36px !important;
+          }
+      }
     }
   `
 );
@@ -173,7 +181,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
   valueSelector = v => v,
   iconSelector,
   titleSelector,
-  onChange = () => {},
+  onChange = () => { },
   onSelect,
   onSwitch,
   ...rest
@@ -312,19 +320,17 @@ export const Combobox: ComboboxType = observer(function Combobox({
     };
   }, [inputRef]);
 
-  // const icon = selectedItem && iconSelector?.(selectedItem);
+  const icon = selectedItem && iconSelector?.(selectedItem);
 
   return styled(useStyles(baseFormControlStyles, styles))(
     <field className={className}>
       {children && <field-label title={title} as='label'>{children}{rest.required && ' *'}</field-label>}
       <input-box>
-        {/* {icon && (
+        {icon && (
           <input-icon>
-            {typeof icon === 'string'
-              ? <IconOrImage icon={icon} />
-              : icon}
+            {typeof icon === 'string' ? <IconOrImage icon={icon} /> : icon}
           </input-icon>
-        )} */}
+        )}
         <input
           ref={setInputRef}
           role='new'
@@ -370,11 +376,9 @@ export const Combobox: ComboboxType = observer(function Combobox({
                   {...menu}
                   onClick={event => handleSelect(event.currentTarget.id)}
                 >
-                  {icon && (
+                  {iconSelector && (
                     <item-icon>
-                      {typeof icon === 'string'
-                        ? <IconOrImage icon={icon} />
-                        : icon}
+                      {icon && typeof icon === 'string' ? <IconOrImage icon={icon} /> : icon}
                     </item-icon>
                   )}
                   <item-value>{valueSelector(item)}</item-value>

From e6ef346c4c89a4efeed0cb6fbb06a070de22c7ed Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Thu, 18 Nov 2021 21:10:35 +0300
Subject: [PATCH 2/2] feat(core-blocks): CB-1449 change size

---
 webapp/packages/core-blocks/src/FormControls/Combobox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
index 1886998eb9..743aa7c00b 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -124,7 +124,7 @@ const styles = composes(
           }
     
           &:not(:empty) + input {
-            padding-left: 36px !important;
+            padding-left: 34px !important;
           }
       }
     }