Merge pull request #4525 from Ivy-Interactive/4502-remove-gray-background-from-searchinput-affix

(inputs): make suffixes and affixes in consistency

Author: rorychatt

src/Ivy.Samples.Shared/Apps/Tests/InputAffixesGalleryApp.cs

@@ -274,11 +274,6 @@ public override object Build()
                | Text.Monospaced("Nullable with prefix/suffix")
                | nullableState.ToTextInput().Prefix("$").Placeholder("Amount")
                | nullableState.ToTextInput().Suffix("%").Placeholder("Percentage")
-               | nullableState.ToTextInput().Prefix("https://").Suffix(".com").Placeholder("domain")
-
-               | Text.Monospaced("Nullable + Invalid + ShortcutKey")
-               | nullableState.ToTextInput().Prefix("@").Invalid("Required field").ShortcutKey("Ctrl+P")
-               | nullableState.ToTextInput().Suffix(Icons.Search).Invalid("Invalid input").ShortcutKey("Ctrl+F")
-               | nullableState.ToTextInput().Prefix(Icons.Mail).Suffix(".com").Invalid("Error").ShortcutKey("Ctrl+B");
+               | nullableState.ToTextInput().Prefix("https://").Suffix(".com").Placeholder("domain");
     }
 }

src/Ivy.Samples.Shared/Apps/Widgets/Inputs/TextInputApp.cs

@@ -2,18 +2,32 @@ import { InfoIcon } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { cn } from "@/lib/utils";
 
-export const InvalidIcon: React.FC<{ message: string; className?: string }> = ({
-  message,
-  className,
-}) => {
+export const InvalidIcon: React.FC<{
+  message: string;
+  className?: string;
+  iconClassName?: string;
+}> = ({ message, className, iconClassName }) => {
   return (
     <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger
-          className={cn(className, "cursor-pointer pointer-events-auto")}
-          data-invalid-icon="true"
-        >
-          <InfoIcon className="size-4 text-red-900 hover:text-red-400 transition-colors duration-200" />
+      <Tooltip className="contents">
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            tabIndex={-1}
+            data-invalid-icon="true"
+            className={cn(
+              "inline-flex shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 shadow-none outline-none leading-none",
+              "pointer-events-auto focus-visible:ring-1 focus-visible:ring-ring",
+              className,
+            )}
+          >
+            <InfoIcon
+              className={cn(
+                "block shrink-0 text-red-900 transition-colors duration-200 hover:text-red-400",
+                iconClassName ?? "size-4",
+              )}
+            />
+          </button>
         </TooltipTrigger>
         <TooltipContent className="bg-popover text-popover-foreground shadow-md">
           <div className="max-w-60">{message}</div>

src/frontend/src/components/InvalidIcon.tsx

@@ -1,5 +1,19 @@
 import { cva } from "class-variance-authority";
 
+/** Gap between control and label — scales with density. */
+export const boolInputControlGapVariant = cva("", {
+  variants: {
+    density: {
+      Small: "gap-1.5",
+      Medium: "gap-2",
+      Large: "gap-2.5",
+    },
+  },
+  defaultVariants: {
+    density: "Medium",
+  },
+});
+
 // Row min-height variants - matches TextInput heights for consistent form field alignment
 export const boolInputRowMinHeightVariant = cva("", {
   variants: {

src/frontend/src/components/ui/input/bool-input-variant.ts

@@ -16,6 +16,20 @@ export const colorInputVariant = cva(
   },
 );
 
+/** Affix row min-height — matches bool/text field heights. */
+export const colorInputRowMinHeightVariant = cva("", {
+  variants: {
+    density: {
+      Small: "min-h-7",
+      Medium: "min-h-9",
+      Large: "min-h-11",
+    },
+  },
+  defaultVariants: {
+    density: "Medium",
+  },
+});
+
 export const colorInputPickerVariant = cva("", {
   variants: {
     density: {

src/frontend/src/components/ui/input/color-input-variant.ts

@@ -1,13 +1,13 @@
 import { cva } from "class-variance-authority";
 
 export const dateRangeInputVariant = cva(
-  "w-full justify-start text-left font-normal pr-20 cursor-pointer bg-transparent",
+  "w-full justify-start text-left font-normal cursor-pointer bg-transparent",
   {
     variants: {
       density: {
-        Small: "h-8 px-3",
-        Medium: "h-9 px-4 py-2",
-        Large: "h-10 px-5 py-2",
+        Small: "h-7 min-h-7 max-h-7 px-2 py-0 text-xs [&_svg]:!size-3",
+        Medium: "h-9 min-h-9 max-h-9 px-3 py-0 text-sm [&_svg]:!size-4",
+        Large: "h-11 min-h-11 max-h-11 px-4 py-0 text-base [&_svg]:!size-5",
       },
     },
     defaultVariants: {
@@ -16,12 +16,12 @@ export const dateRangeInputVariant = cva(
   },
 );
 
-export const dateRangeInputIconVariant = cva("", {
+export const dateRangeInputIconVariant = cva("shrink-0", {
   variants: {
     density: {
-      Small: "size-3",
-      Medium: "size-4",
-      Large: "size-5",
+      Small: "!size-3",
+      Medium: "!size-4",
+      Large: "!size-5",
     },
   },
   defaultVariants: {

src/frontend/src/components/ui/input/date-range-input-variant.ts

@@ -1,13 +1,13 @@
 import { cva } from "class-variance-authority";
 
 export const dateTimeInputVariant = cva(
-  "w-full justify-start text-left font-normal pr-20 cursor-pointer bg-transparent",
+  "w-full justify-start text-left font-normal cursor-pointer bg-transparent",
   {
     variants: {
       density: {
-        Small: "h-7 px-2 text-xs",
-        Medium: "h-9 px-3 py-2 text-sm",
-        Large: "h-11 px-4 py-2 text-base",
+        Small: "h-7 min-h-7 max-h-7 px-2 py-0 text-xs [&_svg]:!size-3",
+        Medium: "h-9 min-h-9 max-h-9 px-3 py-0 text-sm [&_svg]:!size-4",
+        Large: "h-11 min-h-11 max-h-11 px-4 py-0 text-base [&_svg]:!size-5",
       },
     },
     defaultVariants: {
@@ -16,7 +16,7 @@ export const dateTimeInputVariant = cva(
   },
 );
 
-export const dateTimeInputIconVariant = cva("", {
+export const dateTimeInputIconVariant = cva("shrink-0", {
   variants: {
     density: {
       Small: "!size-3",

src/frontend/src/components/ui/input/date-time-input-variant.ts

@@ -16,6 +16,23 @@ export const iconInputTriggerVariant = cva(
   },
 );
 
+/** Trigger inside affix shell — heights match textInputSizeVariant (h-7 / h-9 / h-11). */
+export const iconInputAffixTriggerVariant = cva(
+  "justify-start font-normal min-w-0 max-w-none rounded-none border-0 bg-transparent px-0! py-0! shadow-none dark:border-transparent dark:bg-transparent",
+  {
+    variants: {
+      density: {
+        Small: "h-7 text-xs",
+        Medium: "h-9 text-sm",
+        Large: "h-11 text-base",
+      },
+    },
+    defaultVariants: {
+      density: "Medium",
+    },
+  },
+);
+
 export const iconInputIconVariant = cva("", {
   variants: {
     density: {