fix(item): add input highlight using an absolute div (#15856)

Adds the following CSS properties to item:

```
--highlight-color-focused
--highlight-color-valid
--highlight-color-invalid
--highlight-height
```

This also fixes an issue where we were showing the highlight on items
with no lines, and shows inset vs full properly. Adds documentation and tests for input focus.

fixes #14036 fixes #9639 fixes #14952 closes #15690

angular/src/directives/proxies.ts

@@ -363,12 +363,12 @@ export class Input {
 }
 
 export declare interface Item extends StencilComponents<'IonItem'> {}
-@Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'state', 'type'] })
+@Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type'] })
 export class Item {
 
   constructor(r: ElementRef) {
     const el = r.nativeElement;
-    proxyInputs(this, el, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'state', 'type']);
+    proxyInputs(this, el, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type']);
   }
 }
 

core/src/components.d.ts

@@ -2107,7 +2107,6 @@ export namespace Components {
     * When using a router, it specifies the transition direction when navigating to another page using `href`.
     */
     'routerDirection'?: RouterDirection;
-    'state'?: 'valid' | 'invalid' | 'focus';
     /**
     * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
     */
@@ -2150,7 +2149,6 @@ export namespace Components {
     * When using a router, it specifies the transition direction when navigating to another page using `href`.
     */
     'routerDirection'?: RouterDirection;
-    'state'?: 'valid' | 'invalid' | 'focus';
     /**
     * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
     */
@@ -4017,7 +4015,7 @@ export namespace Components {
     * The text to display on the ok button. Default: `OK`.
     */
     'okText': string;
-    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement>;
+    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonAlertElement | HTMLIonPopoverElement | HTMLIonActionSheetElement>;
     /**
     * The text to display when the select is empty.
     */

core/src/components/input/input.tsx

@@ -324,7 +324,6 @@ export class Input implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
-
         'in-item': hostContext('ion-item', this.el),
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus

core/src/components/input/test/basic/e2e.ts

@@ -5,6 +5,33 @@ it('input: basic', async () => {
     url: '/src/components/input/test/basic?ionic:animated=false'
   });
 
-  const compare = await page.compareScreenshot();
+  let compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+
+  const fullInput = await page.find('#fullInput');
+  await fullInput.click();
+
+  const fullItem = await page.find('#fullItem');
+  expect(fullItem).toHaveClass('item-has-focus');
+
+  compare = await page.compareScreenshot('full input focused');
+  expect(compare).toMatchScreenshot();
+
+  const insetInput = await page.find('#insetInput');
+  await insetInput.click();
+
+  const insetItem = await page.find('#insetItem');
+  expect(insetItem).toHaveClass('item-has-focus');
+
+  compare = await page.compareScreenshot('inset input focused');
+  expect(compare).toMatchScreenshot();
+
+  const noneInput = await page.find('#noneInput');
+  await noneInput.click();
+
+  const noneItem = await page.find('#noneItem');
+  expect(noneItem).toHaveClass('item-has-focus');
+
+  compare = await page.compareScreenshot('no lines input focused');
   expect(compare).toMatchScreenshot();
 });

core/src/components/input/test/basic/index.html

@@ -28,6 +28,18 @@
           <ion-input placeholder="Placeholder"></ion-input>
         </ion-item>
 
+        <ion-item lines="full" id="fullItem">
+          <ion-input id="fullInput" placeholder="Full"></ion-input>
+        </ion-item>
+
+        <ion-item lines="inset" id="insetItem">
+          <ion-input id="insetInput" placeholder="Inset"></ion-input>
+        </ion-item>
+
+        <ion-item lines="none" id="noneItem">
+          <ion-input id="noneInput" placeholder="None"></ion-input>
+        </ion-item>
+
         <ion-item>
           <ion-label>Default Label</ion-label>
           <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>

core/src/components/item/item.ios.scss

@@ -9,16 +9,17 @@
   --padding-start: #{$item-ios-padding-start};
   --inner-padding-end: #{$item-ios-padding-end / 2};
   --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px};
-
-  font-size: $item-ios-font-size;
-}
-
-:host(:not(.ion-color)) {
   --background: var(--ion-item-background-color, transparent);
   --background-activated: #{$item-ios-background-color-active};
   --border-color: #{$item-ios-border-bottom-color};
   --color: #{$item-ios-text-color};
   --detail-icon-color: #{$item-ios-border-bottom-color};
+  --highlight-height: 0;
+  --highlight-color-focused: #{$item-ios-input-highlight-color};
+  --highlight-color-valid: #{$item-ios-input-highlight-color-valid};
+  --highlight-color-invalid: #{$item-ios-input-highlight-color-invalid};
+
+  font-size: $item-ios-font-size;
 }
 
 :host(.activated) {
@@ -29,14 +30,24 @@
 // iOS Item Lines
 // --------------------------------------------------
 
+// Default input items have an inset border
+:host(.item-interactive) {
+  --show-full-highlight: 0;
+  --show-inset-highlight: 1;
+}
+
 // Full lines - apply the border to the item
 // Inset lines - apply the border to the item inner
 :host(.item-lines-full) {
   --border-width: #{0px 0px $item-ios-border-bottom-width 0px};
+  --show-full-highlight: 1;
+  --show-inset-highlight: 0;
 }
 
 :host(.item-lines-inset) {
   --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px};
+  --show-full-highlight: 0;
+  --show-inset-highlight: 1;
 }
 
 // Full lines - remove the border from the item inner (inset list items)
@@ -45,11 +56,13 @@
 :host(.item-lines-inset),
 :host(.item-lines-none) {
   --border-width: 0px;
+  --show-full-highlight: 0;
 }
 
 :host(.item-lines-full),
 :host(.item-lines-none) {
   --inner-border-width: 0px;
+  --show-inset-highlight: 0;
 }
 
 

core/src/components/item/item.ios.vars.scss

@@ -63,6 +63,15 @@ $item-ios-border-bottom-color:               $item-ios-border-color !default;
 /// @prop - Border bottom for the item
 $item-ios-border-bottom:                     $item-ios-border-bottom-width $item-ios-border-bottom-style $item-ios-border-bottom-color !default;
 
+/// @prop - Color of the item input highlight
+$item-ios-input-highlight-color:             ion-color(primary, base) !default;
+
+/// @prop - Color of the item input highlight when valid
+$item-ios-input-highlight-color-valid:       ion-color(success, base) !default;
+
+/// @prop - Color of the item input highlight when invalid
+$item-ios-input-highlight-color-invalid:     ion-color(danger, base) !default;
+
 
 // Item Slots
 // --------------------------------------------------

core/src/components/item/item.md.scss

@@ -8,40 +8,48 @@
 :host {
   --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
   --padding-start: #{$item-md-padding-start};
+  --background: var(--ion-item-background-color, transparent);
+  --background-activated: #{$item-md-background-color-active};
+  --color: #{$item-md-text-color};
+  --border-color: #{$item-md-border-bottom-color};
   --inner-padding-end: #{$item-md-padding-end / 2};
-  --padding-start: #{$item-md-padding-start};
+  --inner-border-width: #{0 0 $item-md-border-bottom-width 0};
+  --detail-icon-color: #{$item-md-border-bottom-color};
+  --highlight-height: 2px;
+  --highlight-color-focused: #{$item-md-input-highlight-color};
+  --highlight-color-valid: #{$item-md-input-highlight-color-valid};
+  --highlight-color-invalid: #{$item-md-input-highlight-color-invalid};
 
   font-size: $item-md-font-size;
   font-weight: normal;
 
   text-transform: none;
 }
 
-:host(:not(.ion-color)) {
-  --background: var(--ion-item-background-color, transparent);
-  --background-activated: #{$item-md-background-color-active};
-  --border-color: #{$item-md-border-bottom-color};
-  --color: #{$item-md-text-color};
-  --detail-icon-color: #{$item-md-border-bottom-color};
-}
-
 
 // Material Design Item Lines
 // --------------------------------------------------
 
-// Default input items have a border
+// Default input items have a full border
 :host(.item-interactive) {
   --border-width: #{0 0 $item-md-border-bottom-width 0};
+  --inner-border-width: 0;
+  --show-full-highlight: 1;
+  --show-inset-highlight: 0;
 }
 
 // Full lines - apply the border to the item
 // Inset lines - apply the border to the item inner
 :host(.item-lines-full) {
   --border-width: #{0 0 $item-md-border-bottom-width 0};
+  --show-full-highlight: 1;
+  --show-inset-highlight: 0;
 }
 
 :host(.item-lines-inset) {
   --inner-border-width: #{0 0 $item-md-border-bottom-width 0};
+  --show-full-highlight: 0;
+  --show-inset-highlight: 1;
 }
 
 // Full lines - remove the border from the item inner (inset list items)
@@ -50,11 +58,13 @@
 :host(.item-lines-inset),
 :host(.item-lines-none) {
   --border-width: 0;
+  --show-full-highlight: 0;
 }
 
 :host(.item-lines-full),
 :host(.item-lines-none) {
   --inner-border-width: 0;
+  --show-inset-highlight: 0;
 }
 
 // Material Design Item Detail Push

core/src/components/item/item.md.vars.scss

@@ -48,6 +48,15 @@ $item-md-border-bottom-color:               $item-md-border-color !default;
 /// @prop - Border bottom for the item when lines are displayed
 $item-md-border-bottom:                     $item-md-border-bottom-width $item-md-border-bottom-style $item-md-border-color !default;
 
+/// @prop - Color of the item input highlight
+$item-md-input-highlight-color:             ion-color(primary, base) !default;
+
+/// @prop - Color of the item input highlight when valid
+$item-md-input-highlight-color-valid:       ion-color(success, base) !default;
+
+/// @prop - Color of the item input highlight when invalid
+$item-md-input-highlight-color-invalid:     ion-color(danger, base) !default;
+
 
 // Item Slots
 // --------------------------------------------------