fix(item): form validation states are now properly shown (#23853)

resolves #23733 #23850 Co-authored-by: Will Martin <[email protected]>
ionic-team · Aug 31, 2021 · 5ca2ce9 · 5ca2ce9
1 parent 12216d3
commit 5ca2ce9
Show file tree

Hide file tree

Showing 5 changed files with 378 additions and 61 deletions.
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
@@ -20,7 +20,7 @@
   --padding-start: #{$item-md-padding-start};
   --inner-padding-end: #{$item-md-padding-end};
   --inner-border-width: #{0 0 $item-md-border-bottom-width 0};
-  --highlight-height: 2px;
+  --highlight-height: 1px;
   --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};
@@ -31,6 +31,67 @@
   text-transform: none;
 }
 
+:host(.item-fill-outline) {
+  --highlight-height: 2px;
+}
+
+// Item Fill: None
+// --------------------------------------------------
+
+:host(.item-fill-none.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight,
+:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-highlight {
+  transform: scaleX(1);
+
+  border-width: 0 0 var(--full-highlight-height) 0;
+  border-style: var(--border-style);
+  border-color: var(--highlight-background);
+}
+
+:host(.item-fill-none.item-interactive.ion-focus) .item-native,
+:host(.item-fill-none.item-interactive.item-has-focus) .item-native,
+:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-native {
+  border-bottom-color: var(--highlight-background);
+}
+
+// Item Fill: Outline
+// --------------------------------------------------
+
+:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight {
+  transform: scaleX(1);
+}
+
+:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight,
+:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-highlight {
+  border-width: var(--full-highlight-height);
+  border-style: var(--border-style);
+  border-color: var(--highlight-background);
+}
+
+:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-native {
+  border-color: var(--highlight-background);
+}
+
+// Item Fill: Solid
+// --------------------------------------------------
+
+:host(.item-fill-solid.item-interactive.ion-focus) .item-highlight,
+:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight,
+:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-highlight {
+  transform: scaleX(1);
+
+  border-width: 0 0 var(--full-highlight-height) 0;
+  border-style: var(--border-style);
+  border-color: var(--highlight-background);
+}
+
+:host(.item-fill-solid.item-interactive.ion-focus) .item-native,
+:host(.item-fill-solid.item-interactive.item-has-focus) .item-native,
+:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-native {
+  border-bottom-color: var(--highlight-background);
+}
 
 // Material Design Item: States
 // --------------------------------------------------
@@ -329,7 +390,6 @@
 
 :host(.item-fill-solid.ion-color),
 :host(.item-fill-outline.ion-color) {
-  --highlight-background: #{current-color(base)};
   --highlight-color-focused: #{current-color(base)};
 }
 
@@ -353,8 +413,6 @@
 :host(.item-fill-solid.ion-focused) .item-native,
 :host(.item-fill-solid.item-has-focus) .item-native {
   --background: var(--background-focused);
-
-  border-bottom-color: var(--highlight-color-focused);
 }
 
 :host(.item-fill-solid.item-shape-round) {
@@ -413,21 +471,3 @@
     --border-color: #{$item-md-input-fill-border-color-hover};
   }
 }
-
-
-// Material Design Item: Invalid
-// --------------------------------------------------
-
-:host(.item-fill-outline.ion-invalid:not(.ion-color)) .item-native,
-:host(.item-fill-solid.ion-invalid:not(.ion-color)) .item-native {
-  caret-color: var(--highlight-color-invalid);
-}
-
-:host(.item-fill-outline.ion-invalid),
-:host(.item-fill-outline.ion-invalid) .item-native,
-:host(.item-fill-outline.ion-invalid:not(.ion-color)) .item-highlight,
-:host(.item-fill-solid.ion-invalid:not(.ion-color)),
-:host(.item-fill-solid.ion-invalid:not(.ion-color)) .item-native,
-:host(.item-fill-solid.ion-invalid:not(.ion-color)) .item-highlight {
-  border-color: var(--highlight-color-invalid);
-}
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
@@ -375,45 +375,10 @@ button, a {
   pointer-events: none;
 }
 
-:host(.ion-focused) .item-highlight,
-:host(.ion-focused) .item-inner-highlight,
-:host(.item-has-focus) .item-highlight,
-:host(.item-has-focus) .item-inner-highlight {
-  transform: scaleX(1);
-
-  border-style: var(--border-style);
-  border-color: var(--highlight-background);
+:host(.item-interactive.item-has-focus) .item-native {
+  caret-color: var(--highlight-background);
 }
 
-:host(.ion-focused) .item-highlight,
-:host(.item-has-focus) .item-highlight {
-  border-width: var(--full-highlight-height);
-
-  opacity: var(--show-full-highlight);
-}
-
-:host(.ion-focused) .item-inner-highlight,
-:host(.item-has-focus) .item-inner-highlight {
-  border-bottom-width: var(--inset-highlight-height);
-
-  opacity: var(--show-inset-highlight);
-}
-
-:host(.ion-focused.item-fill-solid) .item-highlight,
-:host(.item-has-focus.item-fill-solid) .item-highlight {
-  border-width: calc(var(--full-highlight-height) - 1px);
-}
-
-:host(.ion-focused) .item-inner-highlight,
-:host(.ion-focused:not(.item-fill-outline)) .item-highlight,
-:host(.item-has-focus) .item-inner-highlight,
-:host(.item-has-focus:not(.item-fill-outline)) .item-highlight {
-  border-top: none;
-  border-right: none;
-  border-left: none;
-}
-
-
 // Item Input Focused
 // --------------------------------------------------
 

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
@@ -324,7 +324,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       Object.assign(childStyles, value);
     });
     const ariaDisabled = (disabled || childStyles['item-interactive-disabled']) ? 'true' : null;
-
+    const fillValue = fill || 'none';
     return (
       <Host
         aria-disabled={ariaDisabled}
@@ -335,7 +335,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'item': true,
             [mode]: true,
             [`item-lines-${lines}`]: lines !== undefined,
-            [`item-fill-${fill}`]: fill !== undefined,
+            [`item-fill-${fillValue}`]: true,
             [`item-shape-${shape}`]: shape !== undefined,
             'item-disabled': disabled,
             'in-list': hostContext('ion-list', this.el),

diff --git a/core/src/components/item/test/form/e2e.ts b/core/src/components/item/test/form/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('item: form', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/form?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});