Add icon prop in Input

Author: forestream

packages/components/src/components/Input/Input.stories.tsx

@@ -38,28 +38,27 @@ export const Disabled: Story = {
   },
 }
 
-// export const WithIcon: Story = {
-//   args: {
-//     disabled: true,
-//     icon: (
-//       <svg
-//         className={css({ color: '$text' })}
-//         fill="none"
-//         height="24"
-//         viewBox="0 0 24 24"
-//         width="24"
-//         xmlns="http://www.w3.org/2000/svg"
-//       >
-//         <path
-//           clipRule="evenodd"
-//           d="M16.2635 4.3205C15.8763 3.90288 15.2518 3.89202 14.8523 4.29596L6.92714 12.3101C6.77288 12.4661 6.66766 12.6701 6.6262 12.8938L6.19139 15.2388C6.04942 16.0044 6.67528 16.6795 7.38514 16.5264L9.56701 16.0557C9.74988 16.0163 9.91913 15.9232 10.0562 15.7868L16.6085 9.26287C16.6164 9.25496 16.6242 9.24687 16.6319 9.23862L18.0101 7.75198C18.4063 7.32464 18.4063 6.63179 18.0101 6.20445L16.2635 4.3205ZM15.1465 6.39842L15.5325 6.00805L16.4319 6.97821L16.058 7.38159L15.1465 6.39842ZM13.9617 7.59651L14.8868 8.59436L9.08091 14.3751L7.96212 14.6164L8.17961 13.4435L13.9617 7.59651ZM5.91304 18.0303C5.40878 18.0303 5 18.4712 5 19.0152C5 19.5591 5.40878 20 5.91304 20H18.087C18.5912 20 19 19.5591 19 19.0152C19 18.4712 18.5912 18.0303 18.087 18.0303H5.91304Z"
-//           fill="currentColor"
-//           fillRule="evenodd"
-//         />
-//       </svg>
-//     ),
-//   },
-// }
+export const WithIcon: Story = {
+  args: {
+    placeholder: 'Input text',
+    icon: (
+      <svg
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M14.5006 15.9949C13.445 16.6754 12.1959 17.069 10.8571 17.069C7.07005 17.069 4 13.9195 4 10.0345C4 6.14945 7.07005 3 10.8571 3C14.6442 3 17.7143 6.14945 17.7143 10.0345C17.7143 11.7044 17.1471 13.2384 16.1995 14.4448C16.2121 14.4567 16.2245 14.4688 16.2367 14.4813L19.6653 17.9986C20.1116 18.4564 20.1116 19.1988 19.6653 19.6566C19.2189 20.1145 18.4953 20.1145 18.049 19.6566L14.6204 16.1394C14.5761 16.0938 14.5361 16.0455 14.5006 15.9949ZM16.2143 10.0345C16.2143 13.1274 13.7799 15.569 10.8571 15.569C7.93435 15.569 5.5 13.1274 5.5 10.0345C5.5 6.94154 7.93435 4.5 10.8571 4.5C13.7799 4.5 16.2143 6.94154 16.2143 10.0345Z"
+          fill="#8D8C9A"
+          fillRule="evenodd"
+        />
+      </svg>
+    ),
+  },
+}
 
 // export const WithForm: Story = {
 //   args: {

packages/components/src/components/Input/index.tsx

@@ -3,6 +3,7 @@
 import {
   Box,
   Button,
+  Center,
   css,
   DevupThemeTypography,
   Input as DevupInput,
@@ -14,6 +15,7 @@ interface InputProps extends ComponentProps<'input'> {
   error?: boolean
   errorMessage?: string
   allowClear?: boolean
+  icon?: React.ReactNode
 }
 
 export function Input({
@@ -24,6 +26,7 @@ export function Input({
   error = false,
   errorMessage,
   allowClear = false,
+  icon,
   ...props
 }: InputProps) {
   const [value, setValue] = useState(defaultValue ?? '')
@@ -33,10 +36,26 @@ export function Input({
   const handleClear = () => {
     setValue('')
   }
-  const isClearButtonVisible = value && !props.disabled
+  const clearButtonVisible = value && !props.disabled
 
   return (
-    <Box pos="relative" w="fit-content">
+    <Box
+      pos="relative"
+      selectors={{ '&,&>*': { boxSizing: 'border-box' } }}
+      w="fit-content"
+    >
+      {icon && (
+        <Center
+          boxSize="24px"
+          color="$base"
+          left="12px"
+          pos="absolute"
+          top="50%"
+          transform="translateY(-50%)"
+        >
+          {icon}
+        </Center>
+      )}
       <DevupInput
         _disabled={{
           selectors: {
@@ -60,8 +79,8 @@ export function Input({
         border={error ? '1px solid $error' : '1px solid $border'}
         borderRadius="8px"
         onChange={onChangeProp ?? handleChange}
-        pl="12px"
-        pr={isClearButtonVisible ? '32px' : '12px'}
+        pl={icon ? '36px' : '12px'}
+        pr={['36px', null, allowClear ? '36px' : '12px']}
         py="12px"
         selectors={{
           '&::placeholder': {
@@ -72,9 +91,10 @@ export function Input({
         transition="all 0.1s ease-in-out"
         typography={typography}
         value={valueProp ?? value}
+        w="200px"
         {...props}
       />
-      {isClearButtonVisible && (
+      {clearButtonVisible && (
         <ClearButton
           className={css({
             display: ['flex', null, allowClear ? 'flex' : 'none'],