(inputs): make suffixes and affixes in consistency

[ArtemKhvorostianyi]

Goal:

1. Remove bg color from suffixes and affixes
2. Each input has same gaps for suffixes and affixes
3. Add suffix/affix support for text area
4. Keep inputs design in consistency: same gaps, same densities scales of icons, gaps
5. Change sizing of suffixes, affixes in different densities so icons inside won't be very big

Demo

Text inputs:

Text inputs with KBD usage:

For text input also:

• fixed outline border for text area variant, password variant
• used svg instead of lucide invalid icon since it has better sizing and able to set properly gap

Select inputs:

Number inputs:

Bool input:

Color input:

Feedback input:

Icon input:

Code input:

DateTime input:

DateRange input:

General comparison of inputs:

[rorychatt]

@ArtemKhvorostianyi yes remove bg by default in all inputs for affixes

[ArtemKhvorostianyi]

Removed gray bg in all inputs

[rorychatt]

@ArtemKhvorostianyi

these 3 places look weird - 2 icons on left, and too much spaces on the right - check this is consitent with other inputs

[rorychatt]

see my comment

[rorychatt]

icon looks super big, and it has not consistent gaps on the left and right of it

[rorychatt]

date range is completely fucked up

[rorychatt]

bool is large for some reason

[rorychatt]

icon is not styled consistently

[rorychatt]

text area drag icon is in wrong places

[rorychatt]

double icons

[rorychatt]

A lot more work here is needed.

Also make sure styles are consistent across different sizes.

[rorychatt]

this is not aligned

[artem-ivy-ai]

Staging preview

📄 Docs: https://ivy-framework-staging-docs-4525.sliplane.app
🧪 Samples: https://ivy-framework-staging-samples-4525.sliplane.app

[rorychatt]

-> duplicate icons. Also not sure about how left side looks. Some edgbes are curved, some are not (make all not curved)

[rorychatt]

Maybe the startting point for input should be more to the left? look super far to the right

[rorychatt]

Select inputs have different bg fill color

[rorychatt]

color inputs no overflow logic

[rorychatt]

Several inputs missing overflow ellipsis ...

[rorychatt]

see my feedback

[rorychatt]

@claude review this

[ivy-interactive-claude-code]

Claude finished @rorychatt's task in 2m 30s —— View job

---

Code Review Complete

I've reviewed the PR changes across 37 files. This is a significant refactoring effort to standardize suffix/affix handling across all input components. Overall the architecture is well-designed with shared styling utilities in text-input-variant.ts. However, there are several issues that need to be addressed based on the reviewer feedback screenshots.

---

Issues Found

1. Duplicate Icons in DateTime/DateRange Inputs

Files: DateTimeInputWidget/*.tsx, DateRangeInputWidget.tsx

The screenshots show duplicate calendar icons appearing. This happens because:

• The built-in CalendarIcon is rendered inside the trigger button
• When a prefix affix is added, it creates a duplicate icon appearance

Suggested fix: When hasPrefix is true, consider hiding the built-in calendar icon, or document that prefix slots should not contain calendar icons.

Fix this →

---

2. Inconsistent Border Rounding in Affix Shells

Files: Multiple input widgets

Some affix cells have curved edges while others don't. The textInputAffixCellClasses applies rounded-tl-fields rounded-bl-fields for prefix and rounded-tr-fields rounded-br-fields for suffix. However, when inputs have both prefix AND suffix, the middle input field should have NO rounding.

Looking at the code in DefaultVariant.tsx:133-135:

hasPrefix && "rounded-l-none",
hasSuffix && "rounded-r-none",
!hasAffixes && "rounded-field",

This logic is correct, but ensure all input variants apply it consistently.

---

3. Text Starting Position Too Far Right (NumberInput)

File: NumberInputWidget.tsx:350-358

The prefix cell applies textInputAffixIconOnlyPaddingVariant which adds extra padding. When combined with the input's own padding, text appears too far right.

<div
  className={cn(
    textInputAffixCellClasses("prefix", density),
    textInputAffixIconOnlyPaddingVariant({ density }), // This adds !px-2 on Medium
  )}
>

Suggested fix: Review whether textInputAffixIconOnlyPaddingVariant should be applied conditionally only when the prefix contains only an icon (no text).

Fix this →

---

4. Select Inputs Have Different Background Fill

File: SelectSingleVariant.tsx:306-319

The standalone select trigger (when no affixes) creates its own border container with dark:bg-white/5, but the inner SelectTrigger might have conflicting background styles.

Looking at line 224-228:

!hasAffixes &&
  "border-0 shadow-none rounded-field focus:ring-0 focus-visible:ring-0 focus:ring-offset-0 dark:bg-transparent",

The dark:bg-transparent conflicts with the outer container's dark:bg-white/5. Consider making these consistent.

---

5. Missing Text Overflow Ellipsis

Files: ColorInputWidget.tsx, IconInputWidget.tsx, others

From the screenshots, several inputs don't show ellipsis (...) when text overflows. The text input value should have truncate class applied.

In ColorInputWidget.tsx, the text field doesn't have explicit truncation handling. Add truncate class to the input or value display.

Fix this →

---

Code Quality Observations

Positive

• Well-structured shared utilities in text-input-variant.ts with clear density-based variants
• Consistent pattern for trailing cluster (clear/invalid icons) across components
• Good use of CVA (class-variance-authority) for managing density variants
• Comprehensive test coverage in TextInputWidget.test.ts
• Good separation of concerns with the DateInputAffixShell component

Suggestions

1. Consider extracting common affix shell pattern - Many components repeat the same affix shell structure. Consider creating a shared InputAffixShell component that all inputs can use.

2. Document the density scaling - The relationship between density and padding/sizing is complex. Adding JSDoc comments to the variant functions would help maintainability.

3. Type safety for slots - The slots prop is typed as { Prefix?: React.ReactNode[]; Suffix?: React.ReactNode[] }. Consider adding a more specific type that distinguishes between icon-only and text content for conditional styling.

---

Summary

The refactoring is architecturally sound but needs refinement to address the visual inconsistencies shown in the reviewer's screenshots. The main issues are:

• Duplicate icons in date inputs when using prefix affixes
• Inconsistent padding causing text to start too far right
• Select input background color mismatch
• Missing overflow ellipsis in some inputs

Once these visual issues are resolved, the PR will provide a much more consistent input component library.

---

|