Ionic-framework: feat: Let us control the behavior of ion-item --highlight-color-*

[kawazoe]

Feature Request

Ionic version:
[x] 5.3.1

Describe the Feature Request
There is no way to personalize the behavior of the form validation in ionic components like I could if I built my own form components. For instance, a red border is applied out of the box by ion-item on .ion-invalid elements:

:host(.item-interactive.ion-invalid) {
  --highlight-background: var(--highlight-color-invalid);
}

_https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/item/item.scss#L402_

Describe Preferred Solution
I wish I could have more control over this behavior. In my app, I do not want to see the invalid color when the form loads initially, like now, but instead only when the .ion-dirty class is also present.

Perhaps rules controlling the result of validation could be wrapped with a :host-context(...) query for a specific class defining some preset behaviors:

<!-- Current behavior: display validation results all the time. -->
<ion-app class".ion-validate">...</ion-app>
<!-- New behavior: display validation results only when .ion-dirty is present. -->
<ion-app class".ion-validate-on-dirty">...</ion-app>
<!-- New behavior: display validation results only when .ion-touched is present. -->
<ion-app class".ion-validate-on-touched">...</ion-app>

This would let us customize when we want the validation results to appear in our forms.

[brandyscarney]

Thanks for the issue! You should be able to style the ion-item using the validation classes and the CSS variables. Something like this: https://codepen.io/brandyscarney/pen/RwaRLgG

Is this what you mean?

[kawazoe]

No I'm talking about their default behavior when used with ngForm. Angular will set those classes for you. The problem is that your default style apply the invalid look based on .item-interactive.ion-invalid which is not what everyone wants. Most people will usually want to wait for the form to be dirty first .item-interactive.ion-dirty.ion-invalid, or touched .item-interactive.ion-touched.ion-invalid. There is currently no way of achieving this as far as I am aware.

[brandyscarney]

@kawazoe Do you have an example project where you can show me what you mean? The Codepen example I linked is just styling the item based on the existence of those classes, them being manually added was just to customize the CSS.

ion-item.ion-invalid {
  --highlight-background: none;
}

ion-item.ion-invalid.ion-touched {
  --highlight-background: var(--highlight-color-focused);
}

ion-item.ion-invalid.ion-dirty.ion-touched {
  --highlight-background: var(--highlight-color-invalid);
}

[kawazoe]

I was about to provide you with a sample, but then I noticed your initial reset rule. I don't know why I didn't thought of that. It makes total sense. Closing!

Here's the sample project if you're interested. It also adds the ability to force either the valid or invalid state to your answer. https://stackblitz.com/edit/angular-ivy-ct8win

[indraraj26]

@kawazoe Do you have an example project where you can show me what you mean? The Codepen example I linked is just styling the item based on the existence of those classes, them being manually added was just to customize the CSS.

ion-item.ion-invalid {
  --highlight-background: none;
}

ion-item.ion-invalid.ion-touched {
  --highlight-background: var(--highlight-color-focused);
}

ion-item.ion-invalid.ion-dirty.ion-touched {
  --highlight-background: var(--highlight-color-invalid);
}

This is needed to be in docs

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.