ionic-team / ionic-team/ionic-framework

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

Abierto
#30,066 1 comentario 0 reacciones 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.
![image](https://github.com/user-attachments/assets/9e99107b-8011-4361-8d16-4845870a5e20)

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](https://github.com/ionic-team/ionic-framework/issues/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_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.