From 92b13c298b403b1d20ac4ba929fb3eb8556aa276 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 14 Aug 2023 10:16:05 -0500
Subject: [PATCH] chore: highlight variables are deprecated (#27987)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There was some confusion on
https://github.com/ionic-team/ionic-framework/issues/27985 as to how the
`--highlight-*` variables on `ion-item` apply to the modern form
controls. These variables only work with the legacy form syntax, but we
did not add a proper deprecation message.

`--highlight-*` variables have been added to `ion-input` and
`ion-textarea` instead so developers can customize the highlight when
using the modern form syntax.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Deprecated the `--highlight-*` variables on `ion-item`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 core/src/components/item/item.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 402b8eb6ed..46e2cafe05 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -2,6 +2,7 @@
 
 // Item
 // --------------------------------------------------
+// TODO: FW-4955
 
 :host {
   /**
@@ -45,10 +46,10 @@
    *
    * @prop --ripple-color: Color of the item ripple effect
    *
-   * @prop --highlight-height: The height of the highlight on the item
-   * @prop --highlight-color-focused: The color of the highlight on the item when focused
-   * @prop --highlight-color-valid: The color of the highlight on the item when valid
-   * @prop --highlight-color-invalid: The color of the highlight on the item when invalid
+   * @prop --highlight-height: The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
+   * @prop --highlight-color-focused: The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
+   * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
+   * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
   --border-radius: 0px;
   --border-width: 0px;