fix: Input paddings (#527)

Author: PolinaGurinovich97

src/components/FormItem/constants.ts

@@ -1,6 +1,6 @@
 import { FormItemOrientation } from '@/types/form-item';
 
-export const containerBaseClassName = 'w-full flex';
+export const containerBaseClassName = 'w-full flex gap-2';
 export const orientationClassMap: Record<FormItemOrientation, string> = {
   [FormItemOrientation.Vertical]: 'flex-col',
   [FormItemOrientation.Horizontal]: 'flex-row items-end',

src/components/Icon/Icon.tsx

@@ -18,6 +18,8 @@ export interface DialIconProps {
  * @param [icon] - The icon element to render
  * @param [className] - Additional CSS classes to apply to the icon wrapper
  */
+
+// TODO: really need?
 export const DialIcon: FC<DialIconProps> = ({ icon, className }) => {
   if (!icon) {
     return null;

src/components/Input/Input.tsx

@@ -11,7 +11,6 @@ import {
 
 import { useMergeRefs } from '@floating-ui/react';
 
-import { DialIcon } from '@/components/Icon/Icon';
 import { mergeClasses } from '@/utils/merge-classes';
 import { DialErrorText } from '@/components/ErrorText/ErrorText';
 import { DialLabel, type DialLabelProps } from '@/components/Label/Label';
@@ -71,7 +70,7 @@ export const DialInput: FC<DialInputProps> = ({
   ...props
 }) => {
   return (
-    <div className={mergeClasses('flex flex-col gap-y-1', containerClassName)}>
+    <div className={mergeClasses('flex flex-col gap-y-2', containerClassName)}>
       {labelProps && <DialLabel {...labelProps} htmlFor={id} />}
 
       <InputWrapper id={id} {...props} />
@@ -180,7 +179,7 @@ const InputWrapper: FC<InputWrapperProps> = ({
         </div>
       )}
 
-      <DialIcon icon={iconBefore} />
+      {iconBefore}
 
       <input
         ref={ref}
@@ -200,7 +199,7 @@ const InputWrapper: FC<InputWrapperProps> = ({
 
       {postfix && <p className="text-secondary dial-small-text"> {postfix}</p>}
 
-      <DialIcon icon={iconAfter} />
+      {iconAfter}
 
       {inputButtonIcon && <div className="">{inputButtonIcon}</div>}
     </div>

src/components/RadioGroupPopupField/RadioGroupPopupField.tsx

@@ -126,7 +126,7 @@ export const DialRadioGroupPopupField: FC<RadioGroupPopupFieldProps> = ({
   }, [onApply, onClosePopup]);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col gap-2">
       <DialLabel label={label} htmlFor={htmlFor} />
       <DialInputPopup
         disabled={disabled}

src/components/Select/Select.tsx

@@ -593,7 +593,7 @@ export const DialSelect: FC<DialSelectProps> = ({
             ? 'min-h-[25px] px-1.5 py-1'
             : 'min-h-[38px] px-3 py-2',
           invalid && 'dial-input-error',
-          variant === SelectVariant.Secondary ? '!bg-layer-4' : '',
+          variant === SelectVariant.Secondary ? '!bg-layer-4 !h-auto' : '',
           className,
         )}
         onMouseDown={(e) => {

src/components/Textarea/Textarea.tsx

@@ -38,7 +38,7 @@ export interface DialTextareaProps
  * - {@link HTMLTextAreaElement} - The underlying HTML textarea element type
  *
  * @param [onChange] - Callback function called when the textarea value changes
- * @param [labelProps] - Props for the field label, including `fieldLabel` (label text) and `required` (whether to show required indicator)
+ * @param [labelProps] - Props for the field label, including `label` (label text) and `required` (whether to show required indicator)
  * @param [className=""] - Additional CSS classes to apply to the textarea element
  * @param [containerClassName=""] - Additional CSS classes to apply to the container div
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
@@ -65,7 +65,7 @@ export const DialTextarea: FC<DialTextareaProps> = ({
   );
 
   return (
-    <div className={mergeClasses('flex flex-col gap-y-1', containerClassName)}>
+    <div className={mergeClasses('flex flex-col gap-y-2', containerClassName)}>
       {labelProps && <DialLabel {...labelProps} htmlFor={id} />}
       <textarea
         id={id}