✨ Add onInput support for Input components

Author: Frontendland

src/components/Input/Input.svelte

@@ -12,6 +12,7 @@
     export let className: SvelteInputProps['className'] = ''
     export let onChange: SvelteInputProps['onChange'] = () => {}
     export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
+    export let onInput: SvelteInputProps['onInput'] = () => {}
 
     const classes = classNames([
         styles.input,
@@ -41,10 +42,11 @@
             class={classes}
             on:change={onChange}
             on:keyup={onKeyUp}
+            on:input={onInput}
             {...$$restProps}
         />
     </ConditionalWrapper>
-    {#if label}
+    {#if subText}
         <div class={styles.subtext}>
             {@html subText}
         </div>

src/components/Input/Input.tsx

@@ -10,7 +10,6 @@ const Input = ({
     theme,
     label,
     subText,
-    icon,
     value,
     className,
     children,

src/components/Input/input.module.scss

@@ -68,7 +68,8 @@
 
         svg {
             @include position(absolute, l10px);
-            @include size(20px);
+            @include size(18px);
+            @include typography(primary-30);
         }
     }
 

src/components/Input/input.ts

@@ -41,10 +41,12 @@ export type InputProps = {
 export type SvelteInputProps = {
     onChange?: (e: any) => any
     onKeyUp?: (e: any) => any
+    onInput?: (e: any) => any
 } & InputProps
 
 export type ReactInputProps = {
     onChange?: (e: any) => any
     onKeyUp?: (e: any) => any
+    onInput?: (e: any) => any
     children?: React.ReactNode
 } & InputProps