refactor(item, range): remove item-specific logic (#26520)

core/src/components/input/input.md.scss

@@ -34,16 +34,6 @@
   height: 22px;
 }
 
-/**
- * The input with no fill in item should
- * have start padding applied on the input
- * not the item.
- */
-:host(.in-full-item:not(.input-fill-outline)),
-:host(.in-full-item:not(.input-fill-solid)) {
-  --padding-start: #{$item-md-padding-start};
-}
-
 // Input Bottom
 // ----------------------------------------------------------------
 /**
@@ -104,6 +94,15 @@
   transform: scale(1);
 }
 
+/**
+ * Adjust the highlight up by 1px
+ * so it is not cut off by the
+ * the item's line (if one is present).
+ */
+:host(.in-item) .input-highlight {
+  @include position(null, null, 0, 0);
+}
+
 // Input Shape Rounded
 // ----------------------------------------------------------------
 

core/src/components/input/input.tsx

@@ -650,7 +650,7 @@ export class Input implements ComponentInterface {
           [`input-fill-${fill}`]: fill !== undefined,
           [`input-shape-${shape}`]: shape !== undefined,
           [`input-label-placement-${labelPlacement}`]: true,
-          'in-full-item': hostContext('ion-item:not(.item-lines-inset)', this.el),
+          'in-item': hostContext('ion-item', this.el),
         })}
       >
         <label class="input-wrapper">

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

@@ -45,10 +45,9 @@
       </ion-header>
 
       <ion-content id="content" class="ion-padding" color="light">
-        <h1>Regular List</h1>
         <div class="grid">
           <div class="grid-item">
-            <h2>No Fill</h2>
+            <h2>Regular List</h2>
             <ion-list>
               <ion-item>
                 <ion-input label="Email"></ion-input>
@@ -57,42 +56,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Solid</h2>
-            <ion-list>
-              <ion-item lines="none">
-                <ion-input fill="solid" label="Email"></ion-input>
-              </ion-item>
-            </ion-list>
-          </div>
-
-          <div class="grid-item">
-            <h2>Outline</h2>
-            <ion-list>
-              <ion-item lines="none">
-                <ion-input fill="outline" label="Email"></ion-input>
-              </ion-item>
-            </ion-list>
-          </div>
-
-          <div class="grid-item">
-            <h2>Outline, Floating</h2>
-            <ion-list>
-              <ion-item lines="none">
-                <ion-input fill="outline" label="Email" label-placement="floating"></ion-input>
-              </ion-item>
-            </ion-list>
-          </div>
-        </div>
-
-        <h1>Inset List</h1>
-        <div class="grid">
-          <div class="grid-item">
-            <h2>No Fill</h2>
-            <ion-list>
-              <ion-item lines="inset">
+            <h2>Inset List</h2>
+            <ion-list inset="true">
+              <ion-item>
                 <ion-input label="Email"></ion-input>
               </ion-item>
-              <ion-item lines="inset">
+              <ion-item>
                 <ion-input label="Email"></ion-input>
               </ion-item>
             </ion-list>

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

@@ -19,42 +19,6 @@ test.describe('input: item', () => {
     const list = page.locator('ion-list');
     expect(await list.screenshot()).toMatchSnapshot(`input-list-no-fill-${page.getSnapshotSettings()}.png`);
   });
-  test('should render correctly in list with solid fill', async ({ page }) => {
-    await page.setContent(`
-      <ion-list>
-        <ion-item>
-          <ion-input
-            fill="solid"
-            label="Email"
-            value="hi@ionic.io"
-            helper-text="Enter your email"
-            maxlength="20"
-            counter="true"
-          ></ion-input>
-        </ion-item>
-      </ion-list>
-    `);
-    const list = page.locator('ion-list');
-    expect(await list.screenshot()).toMatchSnapshot(`input-list-solid-${page.getSnapshotSettings()}.png`);
-  });
-  test('should render correctly in list with outline fill', async ({ page }) => {
-    await page.setContent(`
-      <ion-list>
-        <ion-item>
-          <ion-input
-            fill="outline"
-            label="Email"
-            value="hi@ionic.io"
-            helper-text="Enter your email"
-            maxlength="20"
-            counter="true"
-          ></ion-input>
-        </ion-item>
-      </ion-list>
-    `);
-    const list = page.locator('ion-list');
-    expect(await list.screenshot()).toMatchSnapshot(`input-list-outline-${page.getSnapshotSettings()}.png`);
-  });
   test('should render correctly in inset list with no fill', async ({ page }) => {
     await page.setContent(`
       <ion-list inset="true">

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

@@ -35,19 +35,6 @@
   --highlight-height: 2px;
 }
 
-// Item: Modern Input
-// --------------------------------------------------
-
-/**
- * Since ion-item should be a relatively
- * unopinionated container, the padding
- * should be set on the ion-input instead.
- */
-// TODO FW-2764 This should check to see if item has ion-input or ion-textarea
-:host(.item-has-modern-input:not(.item-lines-inset)) .item-native {
-  @include padding(null, null, null, 0px);
-}
-
 // Item Fill: None
 // --------------------------------------------------
 

core/src/components/item/item.scss

@@ -95,27 +95,6 @@
   box-sizing: border-box;
 }
 
-/**
- * The highlight on ion-input should extend to
- * the end of the item and should overlay any
- * border that the ion-item has added.
- */
-// TODO FW-2764 This should check to see if item has ion-input or ion-textarea
-:host(.item-has-modern-input) {
-  --inner-padding-end: 0px;
-
-  overflow: initial;
-}
-
-/**
- * The shadow of the range knob should
- * not be clipped by the item.
- */
-// TODO FW-2997 This should check for a slotted ion-range
-:host(.item-has-modern-range) {
-  overflow: initial;
-}
-
 // Item: Color
 // --------------------------------------------------
 

core/src/components/item/item.tsx

@@ -310,14 +310,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     return this.canActivate() || focusableChild !== null;
   }
 
-  private hasModernInput(): boolean {
-    return this.el.querySelector('ion-input:not(.legacy-input)') !== null;
-  }
-
-  private hasModernRange(): boolean {
-    return this.el.querySelector('ion-range:not(.legacy-range)') !== null;
-  }
-
   private getFirstInput(): HTMLIonInputElement | HTMLIonTextareaElement {
     const inputs = this.el.querySelectorAll('ion-input, ion-textarea') as NodeListOf<
       HTMLIonInputElement | HTMLIonTextareaElement
@@ -403,8 +395,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
     const fillValue = fill || 'none';
     const inList = hostContext('ion-list', this.el);
-    const hasModernInput = this.hasModernInput();
-    const hasModernRange = this.hasModernRange();
 
     return (
       <Host
@@ -424,8 +414,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'ion-activatable': canActivate,
             'ion-focusable': this.focusable,
             'item-rtl': document.dir === 'rtl',
-            'item-has-modern-input': hasModernInput,
-            'item-has-modern-range': hasModernRange,
           }),
         }}
         role={inList ? 'listitem' : null}