fix(input): update right icon margin and padding

innovaccer · Sep 7, 2023 · 4c88f9f · 4c88f9f
1 parent f89b6b3
commit 4c88f9f
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 67 deletions.
diff --git a/core/components/atoms/input/Input.tsx b/core/components/atoms/input/Input.tsx
@@ -137,7 +137,7 @@ export interface InputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
 const sizeMapping = {
   tiny: 12,
   regular: 16,
-  large: 20,
+  large: 16,
 };
 
 /**
@@ -192,6 +192,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
       [`Input--${size}`]: size,
       ['Input--disabled']: disabled || readOnly,
       ['Input--error']: error,
+      ['Input--withIcon--left']: size !== 'tiny' && icon,
+      ['Input--withIcon--right']: !disabled && (info || ((actionIcon || onClear) && (value || defaultValue))),
     },
     className
   );
@@ -211,6 +213,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
   const rightIconClass = classNames({
     ['Input-icon']: true,
     ['Input-iconWrapper--right']: true,
+    ['ml-4']: true,
   });
 
   const trigger = (

diff --git a/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap b/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Input component
 <body>
   <div>
     <div
-      class="Input Input--regular"
+      class="Input Input--regular Input--withIcon--left"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
@@ -90,7 +90,7 @@ exports[`Input component
 <body>
   <div>
     <div
-      class="Input Input--regular"
+      class="Input Input--regular Input--withIcon--left"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
@@ -384,7 +384,7 @@ exports[`Input component
 <body>
   <div>
     <div
-      class="Input Input--regular Input--disabled"
+      class="Input Input--regular Input--disabled Input--withIcon--left"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
@@ -446,7 +446,7 @@ exports[`Input component
 <body>
   <div>
     <div
-      class="Input Input--regular Input--disabled"
+      class="Input Input--regular Input--disabled Input--withIcon--left"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
@@ -506,7 +506,7 @@ exports[`Input component
 <body>
   <div>
     <div
-      class="Input Input--regular Input--error"
+      class="Input Input--regular Input--error Input--withIcon--left"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
@@ -566,7 +566,7 @@ exports[`Input component
 <body>
   <div>
     <div
-      class="Input Input--regular Input--disabled"
+      class="Input Input--regular Input--disabled Input--withIcon--left"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"

diff --git a/core/components/atoms/input/actionButton/ActionButton.tsx b/core/components/atoms/input/actionButton/ActionButton.tsx
@@ -48,6 +48,7 @@ export const ActionButton = (props: ActionButtonProps) => {
     [`material-icons-${type}`]: type && type !== 'filled',
     ['ActionButton']: true,
     [`${className}`]: className,
+    ['ml-4']: true,
   });
 
   const styles = {

diff --git a/core/components/atoms/input/actionButton/__tests__/__snapshots__/ActionButton.test.tsx.snap b/core/components/atoms/input/actionButton/__tests__/__snapshots__/ActionButton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons material-icons-round ActionButton"
+      class="material-icons material-icons-round ActionButton ml-4"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
       style="font-size: 16px; width: 16px;"
@@ -24,7 +24,7 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons ActionButton"
+      class="material-icons ActionButton ml-4"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
       style="font-size: 16px; width: 16px;"
@@ -42,7 +42,7 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons material-icons-outlined ActionButton"
+      class="material-icons material-icons-outlined ActionButton ml-4"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
       style="font-size: 16px; width: 16px;"
@@ -60,7 +60,7 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons material-icons-round ActionButton"
+      class="material-icons material-icons-round ActionButton ml-4"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
       style="font-size: 16px; width: 16px;"
@@ -78,7 +78,7 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons material-icons-sharp ActionButton"
+      class="material-icons material-icons-sharp ActionButton ml-4"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
       style="font-size: 16px; width: 16px;"
@@ -96,7 +96,7 @@ exports[`ActionButton component
 <body>
   <div>
     <i
-      class="material-icons material-icons-two-tone ActionButton"
+      class="material-icons material-icons-two-tone ActionButton ml-4"
       data-test="DesignSystem-Input-ActionButton"
       role="button"
       style="font-size: 16px; width: 16px;"

diff --git a/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -5172,7 +5172,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
         data-test="DesignSystem-InputMask--Wrapper"
       >
         <div
-          class="Input Input--regular"
+          class="Input Input--regular Input--withIcon--left Input--withIcon--right"
           data-test="DesignSystem-InputWrapper"
           role="presentation"
           style="min-width: 256px;"
@@ -5198,7 +5198,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
             value="03/01/2020"
           />
           <div
-            class="Input-icon Input-iconWrapper--right"
+            class="Input-icon Input-iconWrapper--right ml-4"
           >
             <i
               class="material-icons material-icons-rounded Icon Input-icon--right"