bug: ion-item and ion-input UI inconsistency border line with helper and error text

[AdrienJacquard]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x, v8.x

Current Behavior

When using ion-input with helper or error text inside an ion-item, the ion-item renders its own border, and the ion-input renders a separate border around the helper or error text. This results in overlapping or duplicate borders, causing an inconsistent UI that looks cluttered and unappealing.

This behavior stems from a change in Ionic 7, where ion-input is decoupled from ion-item, and helper/error text must now be provided directly to ion-input. This design choice creates a challenge in maintaining the consistent structure expected when using ion-list, as all child components should typically be ion-item.

While a similar issue was reported for the counter feature in ion-input (see Ionic Framework issue #27939), the resolution was to update the documentation and suggest avoiding the use of ion-item in cases where the counter is required. However, this workaround is not ideal for the current scenario. It undermines the consistent usage of ion-item as a child of ion-list and forces developers to conditionally remove or reintroduce ion-item depending on attributes like helper or error text. This breaks the cohesive design paradigm that Ionic promotes.

Expected Behavior

The integration of ion-input and ion-item should allow for seamless styling, ensuring that only a single border is displayed when using helper or error text. This could be achieved by ensuring compatibility between ion-input and ion-item, or by providing clear documentation and design guidelines to maintain a consistent and visually appealing UI when both components are used together.

Steps to Reproduce

1. Create an Ionic project using Ionic 7 or 8.
2. Add an ion-list and include multiple ion-item components.
3. Inside one of the ion-item components, add an ion-input with helper or error text.
4. Observe the overlapping borders or inconsistent styling between ion-item and the ion-input with helper/error text.

Code Reproduction URL

https://stackblitz.com/edit/angular-2cisuedg?file=src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0
   Ionic Framework               : @ionic/angular 7.6.6
   @angular-devkit/build-angular : 18.2.12
   @angular-devkit/schematics    : 18.2.12
   @angular/cli                  : 18.2.12
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 6.2.0
   @capacitor/android : 6.2.0
   @capacitor/core    : 6.2.0
   @capacitor/ios     : 6.2.0

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v20.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 10.2.3
   OS     : Windows 10

Additional Information

No response