Fix Inputs interactive area (#600)

* fix(InputWrapper): make horizontal paddings interactive

* refactor: cleanup unused code

* feat(TextField): render extra content before or after control

* refactor(SearchField): rebuild on top of TextField

* fix(PasswordField): use InputEndContent for eye button

* fix: don't render InputEndContent instead of hiding it

* docs: autogenerate API docs for Input

* fix(DatePicker): use InputStartContent

Author: ariser

src/components/AutoComplete/AutoComplete.test.tsx

@@ -213,7 +213,7 @@ describe("AutoComplete", () => {
       expect(queryByText("Content3")).not.toBeNull();
       expect(queryByText("Content1 long text content")).toBeNull();
       expect(queryByText("Group label")).not.toBeVisible();
-      fireEvent.click(getByTestId("search-close"));
+      fireEvent.click(getByTestId("textfield-clear"));
       expect(queryByText("Group label")).toBeVisible();
       expect(queryByText("Content0")).not.toBeNull();
       expect(queryByText("Content1 long text content")).not.toBeNull();

src/components/DatePicker/Common.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { InputElement, InputWrapper } from "../Input/InputWrapper";
+import { InputElement, InputStartContent, InputWrapper } from "../Input/InputWrapper";
 import { ReactNode, useCallback, useId } from "react";
 import { Icon } from "../Icon/Icon";
 import { Container } from "../Container/Container";
@@ -53,8 +53,11 @@ export const DatePickerInput = ({
       disabled={disabled}
       id={id ?? defaultId}
     >
-      <Icon name="calendar" />
+      <InputStartContent>
+        <Icon name="calendar" />
+      </InputStartContent>
       <InputElement
+        $hasStartContent
         data-testid="datepicker-input"
         placeholder={placeholder}
         readOnly
@@ -120,8 +123,11 @@ export const DateRangePickerInput = ({
       disabled={disabled}
       id={id ?? defaultId}
     >
-      <Icon name="calendar" />
+      <InputStartContent>
+        <Icon name="calendar" />
+      </InputStartContent>
       <InputElement
+        $hasStartContent
         as="div"
         data-testid="daterangepicker-input"
       >

src/components/Input/InputWrapper.tsx

@@ -59,7 +59,6 @@ const Wrapper = styled.div<{
       overflow: auto;
     `
     }
-    padding: 0 ${theme.click.field.space.x};
     ${
       $error
         ? `
@@ -183,15 +182,20 @@ export const InputWrapper = ({
   );
 };
 
-export const InputElement = styled.input`
+export const InputElement = styled.input<{
+  $hasStartContent?: boolean;
+  $hasEndContent?: boolean;
+}>`
   background: transparent;
   border: none;
   outline: none;
   width: 100%;
   color: inherit;
   font: inherit;
-  ${({ theme }) => `
+  ${({ theme, $hasStartContent, $hasEndContent }) => `
     padding: ${theme.click.field.space.y} 0;
+    padding-left: ${$hasStartContent ? "0" : theme.click.field.space.x};
+    padding-right: ${$hasEndContent ? "0" : theme.click.field.space.x};
     &::placeholder {
       color: ${theme.click.field.color.placeholder.default};
     }
@@ -230,21 +234,15 @@ export const TextAreaElement = styled.textarea`
   font: inherit;
   resize: none;
   ${({ theme }) => `
-    padding: ${theme.click.field.space.y} 0;
+    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};
     align-self: stretch;
     &::placeholder {
       color: ${theme.click.field.color.placeholder.default};
     }
   `}
 `;
 
-export const TextAreaWrapper = styled(InputWrapper)`
-  resize: vertical;
-  overflow: auto;
-  color: red;
-`;
-
-export const IconButton = styled.button<{ $show?: boolean }>`
+export const IconButton = styled.button`
   background: transparent;
   color: inherit;
   border: none;
@@ -253,9 +251,8 @@ export const IconButton = styled.button<{ $show?: boolean }>`
   &:not(:disabled) {
     cursor: pointer;
   }
-  ${({ theme, $show }) => `
+  ${({ theme }) => `
       padding: ${theme.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
   `}
 `;
 
@@ -269,3 +266,24 @@ export const IconWrapper = styled.svg`
     }
   `}
 `;
+
+export const InputStartContent = styled.div`
+  ${({ theme }) => `
+    padding-left: ${theme.click.field.space.x};
+    cursor: text;
+    gap: ${theme.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `}
+`;
+
+export const InputEndContent = styled.div`
+  ${({ theme }) => `
+    padding-right: ${theme.click.field.space.x};
+    gap: ${theme.click.field.space.gap};
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+  `}
+`;

src/components/Input/PasswordField.stories.tsx

@@ -1,46 +1,33 @@
 import { useEffect, useState } from "react";
-import { PasswordField as PasswordFieldInput, PasswordFieldProps } from "./PasswordField";
-import { Container } from "../Container/Container";
 
-const PasswordField = ({
-  value: valueProp,
-  ...props
-}: Omit<PasswordFieldProps, "onChange">) => {
-  const [value, setValue] = useState(valueProp);
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
+import { Meta, StoryObj } from "@storybook/react";
 
-  return (
-    <Container maxWidth="75%">
-      <PasswordFieldInput
-        value={value}
-        onChange={(inputValue: string) => {
-          setValue(inputValue);
-        }}
-        {...props}
-      />
-    </Container>
-  );
-};
+import { PasswordField } from "./PasswordField";
 
-export default {
+const meta: Meta<typeof PasswordField> = {
   component: PasswordField,
   title: "Forms/Input/PasswordField",
   tags: ["form-field", "input", "autodocs"],
-  argTypes: {
-    value: { control: "text" },
-    label: { control: "text" },
-    error: { control: "text" },
-    disabled: { control: "boolean" },
-    placeholder: { control: "text" },
-    readOnly: { control: "boolean" },
-    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
-    dir: { control: "inline-radio", options: ["start", "end"] },
+  render: ({ value: valueProp, ...props }) => {
+    const [value, setValue] = useState(valueProp);
+
+    useEffect(() => {
+      setValue(valueProp);
+    }, [valueProp]);
+
+    return (
+      <PasswordField
+        {...props}
+        value={value}
+        onChange={setValue}
+      />
+    );
   },
 };
 
-export const Playground = {
+export default meta;
+
+export const Playground: StoryObj<typeof PasswordField> = {
   args: {
     label: "Label",
     disabled: false,

src/components/Input/PasswordField.tsx

@@ -1,6 +1,12 @@
 import { ChangeEvent, InputHTMLAttributes, forwardRef, useId, useState } from "react";
 import { Icon } from "@/components";
-import { IconButton, InputElement, InputWrapper, WrapperProps } from "./InputWrapper";
+import {
+  IconButton,
+  InputElement,
+  InputEndContent,
+  InputWrapper,
+  WrapperProps,
+} from "./InputWrapper";
 export interface PasswordFieldProps
   extends Omit<WrapperProps, "id" | "children">,
     Omit<
@@ -39,6 +45,8 @@ export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
       onChangeProp(e.target.value, e);
     };
 
+    const hasEndContent = value.length > 0;
+
     return (
       <InputWrapper
         disabled={disabled}
@@ -49,6 +57,8 @@ export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
         dir={dir}
       >
         <InputElement
+          $hasStartContent={false}
+          $hasEndContent={hasEndContent}
           ref={ref}
           type={viewPassword ? "text" : "password"}
           id={id ?? defaultId}
@@ -57,16 +67,19 @@ export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           onChange={onChange}
           {...props}
         />
-        <IconButton
-          disabled={disabled}
-          onClick={togglePasswordViewer}
-          $show={value.length > 0}
-        >
-          <Icon
-            name={viewPassword ? "eye-closed" : "eye"}
-            size="md"
-          />
-        </IconButton>
+        {hasEndContent && (
+          <InputEndContent>
+            <IconButton
+              disabled={disabled}
+              onClick={togglePasswordViewer}
+            >
+              <Icon
+                name={viewPassword ? "eye-closed" : "eye"}
+                size="md"
+              />
+            </IconButton>
+          </InputEndContent>
+        )}
       </InputWrapper>
     );
   }

src/components/Input/SearchField.stories.tsx

@@ -1,56 +1,39 @@
 import { useEffect, useState } from "react";
-import { SearchField as SearchFieldInput, SearchFieldProps } from "./SearchField";
+
+import { Meta, StoryObj } from "@storybook/react";
+
 import { Container } from "../Container/Container";
 
-const SearchField = ({
-  value: valueProp,
-  ...props
-}: Omit<SearchFieldProps, "onChange">) => {
-  const [value, setValue] = useState(valueProp);
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
-
-  return (
-    <Container maxWidth="350px">
-      <SearchFieldInput
-        value={value}
-        onChange={(inputValue: string) => {
-          setValue(inputValue);
-        }}
-        {...props}
-      />
-    </Container>
-  );
-};
+import { SearchField } from "./SearchField";
 
-export default {
+const meta: Meta<typeof SearchField> = {
   component: SearchField,
   title: "Forms/Input/SearchField",
   tags: ["form-field", "input", "autodocs"],
-  argTypes: {
-    value: { control: "text" },
-    clear: { control: "boolean" },
-    label: { control: "text" },
-    error: { control: "text" },
-    disabled: { control: "boolean" },
-    placeholder: { control: "text" },
-    readOnly: { control: "boolean" },
-    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
-    dir: { control: "inline-radio", options: ["start", "end"] },
-    isFilter: { control: "boolean" },
+  render: ({ value: valueProp, ...props }) => {
+    const [value, setValue] = useState(valueProp);
+
+    useEffect(() => {
+      setValue(valueProp);
+    }, [valueProp]);
+
+    return (
+      <Container maxWidth="350px">
+        <SearchField
+          {...props}
+          value={value}
+          onChange={setValue}
+        />
+      </Container>
+    );
   },
 };
 
-export const Playground = {
+export default meta;
+
+export const Playground: StoryObj<typeof SearchField> = {
   args: {
     label: "Label",
-    disabled: false,
     placeholder: "Placeholder",
-    clear: false,
-    readOnly: false,
-    isFilter: false,
-    value: "",
-    error: "",
   },
 };