add custom icon to input field (#514)

Mintbase · Sep 15, 2023 · f14cb23 · f14cb23 · vercel · Sep 15, 2023
1 parent 1908025
commit f14cb23
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/components/inputs/input-field/inputField.tsx b/src/components/inputs/input-field/inputField.tsx
@@ -23,6 +23,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   maxChars?: number
   initialCounter?: number
   defaultValue?: number | undefined
+  customIcon?: JSX.Element
 }
 
 export const MbInput = forwardRef<HTMLInputElement, InputProps>(
@@ -44,6 +45,7 @@ export const MbInput = forwardRef<HTMLInputElement, InputProps>(
       defaultValue,
       inputSize = ESize.MEDIUM,
       onChange,
+      customIcon,
       ...restProps
     },
     ref
@@ -134,6 +136,7 @@ export const MbInput = forwardRef<HTMLInputElement, InputProps>(
               )}
             </div>
           )}
+          {!!customIcon && !hasIcon && customIcon}
         </div>
         {maxChars ? (
           <MbCharCounter

diff --git a/src/stories/components/inputs/InputField.stories.tsx b/src/stories/components/inputs/InputField.stories.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 import { ESize } from '../../../consts/properties'
 import { MbInput, EControlStatus } from '../../../index'
+import { MbIcon, EIconName } from '../../../index'
 
 export default {
   title: 'Components/Inputs/Input',
@@ -25,6 +26,15 @@ export const Input = Template.bind({})
 Input.args = {
   label: 'Label',
   hasIcon: true,
+  customIcon: (
+    <MbIcon
+      name={EIconName.ARROW_DROP_DOWN}
+      className={`flex transform transition ease-in-out duration-300`}
+      size="16px"
+      color="blue-300"
+      darkColor="blue-100"
+    />
+  ),
   disabled: false,
   placeholder: 'Placeholder',
   type: 'text',