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. -->
This commit is contained in:
Liam DeBeasi
2023-08-14 10:16:05 -05:00
committed by GitHub
parent e5a02f49e5
commit 92b13c298b

View File

@ -2,6 +2,7 @@
// Item // Item
// -------------------------------------------------- // --------------------------------------------------
// TODO: FW-4955
:host { :host {
/** /**
@ -45,10 +46,10 @@
* *
* @prop --ripple-color: Color of the item ripple effect * @prop --ripple-color: Color of the item ripple effect
* *
* @prop --highlight-height: The height of the highlight on the item * @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 * @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 * @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 * @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-radius: 0px;
--border-width: 0px; --border-width: 0px;