fix(input): item and clear input styling is correct (#26238)

Author: liamdebeasi

core/src/components/input/input.ios.scss

@@ -8,6 +8,7 @@
   font-size: $input-ios-font-size;
 }
 
+// TODO FW-2764 Remove this
 :host(.legacy-input) {
   --padding-top: #{$input-ios-padding-top};
   --padding-end: #{$input-ios-padding-end};

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

@@ -2,6 +2,7 @@
 @import "./input.md.vars";
 @import "./input.md.solid.scss";
 @import "./input.md.outline.scss";
+@import "../item/item.md.vars.scss";
 
 // Material Design Input
 // --------------------------------------------------
@@ -13,6 +14,7 @@
   font-size: $input-md-font-size;
 }
 
+// TODO FW-2764 Remove this
 :host(.legacy-input) {
   --padding-top: #{$input-md-padding-top};
   --padding-end: #{$input-md-padding-end};
@@ -36,6 +38,16 @@
   background-size: $input-md-input-clear-icon-size;
 }
 
+/**
+ * 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
 // ----------------------------------------------------------------
 /**

core/src/components/input/input.scss

@@ -67,6 +67,7 @@
   z-index: $z-index-item-input;
 }
 
+// TODO FW-2764 Remove this
 :host(.legacy-input) {
   display: flex;
 
@@ -76,15 +77,17 @@
   background: var(--background);
 }
 
+// TODO FW-2764 Remove this
 :host(.legacy-input) .native-input {
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include border-radius(var(--border-radius));
 }
 
-:host-context(ion-item:not(.item-label)) {
+:host-context(ion-item:not(.item-label):not(.item-has-modern-input)) {
   --padding-start: 0;
 }
 
+// TODO FW-2764 Remove this
 :host(.legacy-input.ion-color) {
   color: current-color(base);
 }
@@ -180,8 +183,13 @@
 // Clear Input Icon
 // --------------------------------------------------
 
-.input-clear-icon {
+// TODO FW-2764 Remove this
+:host(.legacy-input) .input-clear-icon {
   @include margin(0);
+}
+
+.input-clear-icon {
+  @include margin(auto);
   @include padding(0);
   @include background-position(center);
 
@@ -263,6 +271,17 @@
   background: var(--background);
 }
 
+// Input Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper {
+  display: flex;
+
+  flex-grow: 1;
+
+  width: 100%;
+}
+
 // Input Highlight
 // ----------------------------------------------------------------
 

core/src/components/input/input.tsx

@@ -15,7 +15,7 @@ import type {
 } from '../../interface';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
-import { createColorClasses } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 import { getCounterText } from './input.utils';
 
@@ -616,67 +616,71 @@ 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),
         })}
       >
         <div class="input-wrapper">
           {this.renderLabelContainer()}
-          <input
-            class="native-input"
-            ref={(input) => (this.nativeInput = input)}
-            id={inputId}
-            disabled={disabled}
-            accept={this.accept}
-            autoCapitalize={this.autocapitalize}
-            autoComplete={this.autocomplete}
-            autoCorrect={this.autocorrect}
-            autoFocus={this.autofocus}
-            enterKeyHint={this.enterkeyhint}
-            inputMode={this.inputmode}
-            min={this.min}
-            max={this.max}
-            minLength={this.minlength}
-            maxLength={this.maxlength}
-            multiple={this.multiple}
-            name={this.name}
-            pattern={this.pattern}
-            placeholder={this.placeholder || ''}
-            readOnly={readonly}
-            required={this.required}
-            spellcheck={this.spellcheck}
-            step={this.step}
-            size={this.size}
-            type={this.type}
-            value={value}
-            onInput={this.onInput}
-            onChange={this.onChange}
-            onBlur={this.onBlur}
-            onFocus={this.onFocus}
-            onKeyDown={this.onKeydown}
-            {...this.inheritedAttributes}
-          />
-          {this.clearInput && !readonly && !disabled && (
-            <button
-              aria-label="reset"
-              type="button"
-              class="input-clear-icon"
-              onPointerDown={(ev) => {
-                /**
-                 * This prevents mobile browsers from
-                 * blurring the input when the clear
-                 * button is activated.
-                 */
-                ev.preventDefault();
-              }}
-              onClick={this.onClearButtonClick}
+          <div class="native-wrapper">
+            <input
+              class="native-input"
+              ref={(input) => (this.nativeInput = input)}
+              id={inputId}
+              disabled={disabled}
+              accept={this.accept}
+              autoCapitalize={this.autocapitalize}
+              autoComplete={this.autocomplete}
+              autoCorrect={this.autocorrect}
+              autoFocus={this.autofocus}
+              enterKeyHint={this.enterkeyhint}
+              inputMode={this.inputmode}
+              min={this.min}
+              max={this.max}
+              minLength={this.minlength}
+              maxLength={this.maxlength}
+              multiple={this.multiple}
+              name={this.name}
+              pattern={this.pattern}
+              placeholder={this.placeholder || ''}
+              readOnly={readonly}
+              required={this.required}
+              spellcheck={this.spellcheck}
+              step={this.step}
+              size={this.size}
+              type={this.type}
+              value={value}
+              onInput={this.onInput}
+              onChange={this.onChange}
+              onBlur={this.onBlur}
+              onFocus={this.onFocus}
+              onKeyDown={this.onKeydown}
+              {...this.inheritedAttributes}
             />
-          )}
+            {this.clearInput && !readonly && !disabled && (
+              <button
+                aria-label="reset"
+                type="button"
+                class="input-clear-icon"
+                onPointerDown={(ev) => {
+                  /**
+                   * This prevents mobile browsers from
+                   * blurring the input when the clear
+                   * button is activated.
+                   */
+                  ev.preventDefault();
+                }}
+                onClick={this.onClearButtonClick}
+              />
+            )}
+          </div>
           {shouldRenderHighlight && <div class="input-highlight"></div>}
         </div>
         {this.renderBottomContent()}
       </Host>
     );
   }
 
+  // TODO FW-2764 Remove this
   private renderLegacyInput() {
     if (!this.hasLoggedDeprecationWarning) {
       printIonWarning(