fix: input component

scaleflex · Sep 13, 2024 · 6e65805 · 6e65805
1 parent 545a201
commit 6e65805
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 24 deletions.
diff --git a/packages/ui/src/core/input/input.component.tsx b/packages/ui/src/core/input/input.component.tsx
@@ -41,7 +41,7 @@ const Input = intrinsicComponent<InputProps, HTMLInputElement>(
       iconStart,
       iconEnd,
       iconChange,
-      inputActions,
+      // inputActions,
       clearIcon,
       iconClickStart,
       iconClickEnd,
@@ -196,11 +196,6 @@ const Input = intrinsicComponent<InputProps, HTMLInputElement>(
       );
     };
 
-    const renderInputActions = (inputActions: React.ReactNode): JSX.Element | undefined => {
-      if (!inputActions) return;
-      return <Styled.InputActions>{inputActions}</Styled.InputActions>;
-    };
-
     return (
       <Styled.Input
         onClick={focusOnClick ? handleFocus : undefined}
@@ -216,22 +211,22 @@ const Input = intrinsicComponent<InputProps, HTMLInputElement>(
         $error={error}
         clearIcon={clearIcon}
         isHovering={rest.isHovering}
-        $isSelectedItems={Boolean(isSelectedItems || inputActions)}
+        $isSelectedItems={Boolean(isSelectedItems)}
         {...(InputPropsData || {})}
       >
-        <Styled.InputContent>
-          {renderIcon(iconStart, 'start')}
-          {renderField()}
-          {renderCopyIcon(<CopyOutline size={getIconSize(size, 'copy')} />)}
-          {showCopyMessage && renderCopyText()}
-          {renderClearIcon()}
-          {inputType === Type.Password && renderPasswordIcon()}
-          {renderIcon(iconEnd, 'end')}
-          {renderIcon(iconChange, '')}
-          {children && <>{children}</>}
-        </Styled.InputContent>
-
-        {renderInputActions(inputActions)}
+        {/* <Styled.InputContent> */}
+        {renderIcon(iconStart, 'start')}
+        {renderField()}
+        {renderCopyIcon(<CopyOutline size={getIconSize(size, 'copy')} />)}
+        {showCopyMessage && renderCopyText()}
+        {renderClearIcon()}
+        {inputType === Type.Password && renderPasswordIcon()}
+        {renderIcon(iconEnd, 'end')}
+        {renderIcon(iconChange, '')}
+        {children && <>{children}</>}
+        {/* </Styled.InputContent> */}
+
+        {/* {renderInputActions(inputActions)} */}
       </Styled.Input>
     );
   }

diff --git a/packages/ui/src/core/input/input.styles.ts b/packages/ui/src/core/input/input.styles.ts
@@ -100,9 +100,10 @@ const Input = styled.div.attrs({
   }) => css`
     position: relative;
     display: flex;
-    flex-direction: column;
-    align-items: stretch;
+    align-items: center;
+    /* flex-direction: column; */
     box-sizing: border-box;
+    column-gap: 8px;
     cursor: text;
     transition: all 100ms ease-out;
     width: ${$fullWidth ? '100%' : '300px'};
@@ -270,10 +271,10 @@ const InputActions = styled.div.attrs({
 const InputContent = styled.div.attrs({
   className: generateClassNames(baseClassName, 'inputContent'),
 })`
-  display: flex;
+  /* display: flex;
   align-items: center;
   width: 100%;
-  box-sizing: border-box;
+  box-sizing: border-box; */
 `;
 
 const Styled = applyDisplayNames({