Merge pull request #39 from abusix/pla-385-fix-input-left-icon

fix(input): Fix left icon not being displayed in the text-input
abusix · Sep 25, 2023 · 86b7c72 · 86b7c72
2 parents 09363e0 + 9d06d13
commit 86b7c72
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/form-field/text-input/text-input.stories.tsx b/src/components/form-field/text-input/text-input.stories.tsx
@@ -2,6 +2,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { FormField } from "../form-field";
+import { SearchIcon } from "../../../icons";
 
 const meta: Meta<typeof FormField.TextInput> = {
     title: "Input/TextInput",
@@ -15,9 +16,11 @@ type Story = StoryObj<typeof FormField.TextInput>;
 const TextInputWithHooks = ({
     error = false,
     disabled = false,
+    hasLeftIcon = false,
 }: {
     error?: boolean;
     disabled?: boolean;
+    hasLeftIcon?: boolean;
 }) => {
     const [value, setValue] = useState("");
 
@@ -35,6 +38,7 @@ const TextInputWithHooks = ({
                 ariaDescribedBy="value-description"
                 error={error}
                 disabled={disabled}
+                LeftIcon={hasLeftIcon ? SearchIcon : undefined}
             />
             {error ? <FormField.ErrorMessage>Error message.</FormField.ErrorMessage> : null}
         </FormField>
@@ -57,6 +61,14 @@ export const WithError: Story = {
     ),
 };
 
+export const WithLeftIcon: Story = {
+    render: () => (
+        <div className="w-72">
+            <TextInputWithHooks hasLeftIcon error />
+        </div>
+    ),
+};
+
 export const Disabled: Story = {
     render: () => (
         <div className="w-72">

diff --git a/src/components/form-field/text-input/text-input.tsx b/src/components/form-field/text-input/text-input.tsx
@@ -60,10 +60,10 @@ export const TextInput = ({
         <div className={classNames("relative w-full", formFieldGroupStyles)}>
             {LeftIcon ? (
                 <div
-                    className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
+                    className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10"
                     aria-hidden="true"
                 >
-                    <LeftIcon className="text-gray-400 h-4 w-4 fill-neutral-600" />
+                    <LeftIcon className="text-gray-400 h-3.5 w-3.5 fill-neutral-600" />
                 </div>
             ) : null}
 
@@ -88,7 +88,7 @@ export const TextInput = ({
                     disabled && "cursor-not-allowed bg-neutral-100 text-neutral-600",
                     !error &&
                         !disabled &&
-                        "hover:border-neutral-600 focus:z-10 focus:border-primary-400 focus:ring-2 focus:ring-primary-200",
+                        "hover:border-neutral-600 focus:border-primary-400 focus:ring-2 focus:ring-primary-200",
                     error && !disabled && "border-danger-500"
                 )}
                 disabled={disabled}