feat(ui): DOMA-9506 added input prefix and changed caret color

open-condo-software · Jul 3, 2024 · 8a85a76 · 8a85a76
1 parent 8f3924b
commit 8a85a76
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/ui/src/components/Input/input.tsx b/packages/ui/src/components/Input/input.tsx
@@ -18,13 +18,15 @@ export type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style'
 export type InputProps = BaseInputProps & {
     allowClear?: boolean
     suffix?: string
+    prefix?: string
 }
 
 const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> = React.forwardRef((props, ref) => {
     const {
         allowClear: allowClearProp,
         className: propsClassName,
         suffix,
+        prefix,
         ...restProps
     } = props
 
@@ -37,6 +39,7 @@ const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<In
     }, [allowClearProp])
 
     const className = classNames(propsClassName, {
+        [`${INPUT_CLASS_PREFIX}-with-prefix`]: prefix,
         [`${INPUT_CLASS_PREFIX}-with-suffix`]: suffix,
     })
 
@@ -47,6 +50,7 @@ const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<In
         className={className}
         allowClear={allowClear}
         suffix={suffix}
+        prefix={prefix}
     />
 })
 

diff --git a/packages/ui/src/components/Input/style.less b/packages/ui/src/components/Input/style.less
@@ -11,6 +11,12 @@
   .condo-typography-text-large();
 }
 
+.condo-input-with-prefix.condo-input-affix-wrapper {
+  & > .condo-input-prefix {
+    color: @condo-global-color-gray-7;
+  }
+}
+
 .condo-input-with-suffix.condo-input-affix-wrapper {
   padding-right: @condo-global-spacing-4;
 

diff --git a/packages/ui/src/stories/Input/Input.stories.tsx b/packages/ui/src/stories/Input/Input.stories.tsx
@@ -11,6 +11,7 @@ export default {
         disabled: false,
         allowClear: false,
         suffix: '',
+        prefix: '',
     },
 } as ComponentMeta<typeof Component>