fix(input): match design for xlarge size (#29446)

core/api.txt

@@ -629,7 +629,7 @@ ion-input,prop,placeholder,string | undefined,undefined,false,false
 ion-input,prop,readonly,boolean,false,false,true
 ion-input,prop,required,boolean,false,false,false
 ion-input,prop,shape,"round" | undefined,undefined,false,false
-ion-input,prop,size,"large" | "medium" | undefined,'medium',false,false
+ion-input,prop,size,"large" | "medium" | "xlarge" | undefined,'medium',false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,theme,"ios" | "md" | "ionic",undefined,false,false

core/src/components.d.ts

@@ -1477,7 +1477,7 @@ export namespace Components {
         /**
           * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
          */
-        "size"?: 'medium' | 'large';
+        "size"?: 'medium' | 'large' | 'xlarge';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -6757,7 +6757,7 @@ declare namespace LocalJSX {
         /**
           * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
          */
-        "size"?: 'medium' | 'large';
+        "size"?: 'medium' | 'large' | 'xlarge';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */

core/src/components/input/input.ionic.outline.scss

@@ -15,6 +15,11 @@
   --padding-end: 16px;
 }
 
+:host(.input-fill-outline.input-size-xlarge) {
+  --padding-start: 20px;
+  --padding-end: 20px;
+}
+
 /**
  * The bottom content should never have
  * a border with the outline style.

core/src/components/input/input.ionic.scss

@@ -27,6 +27,10 @@
   min-height: 48px;
 }
 
+:host(.input-size-xlarge) .native-wrapper {
+  min-height: 56px;
+}
+
 // Target area
 // --------------------------------------------------
 :host .native-wrapper::after {

core/src/components/input/input.tsx

@@ -265,7 +265,7 @@ export class Input implements ComponentInterface {
    * The size of the input. If "large", it will have an increased height. By default the
    * size is medium. This property only applies to the `"ionic"` theme.
    */
-  @Prop() size?: 'medium' | 'large' = 'medium';
+  @Prop() size?: 'medium' | 'large' | 'xlarge' = 'medium';
 
   /**
    * The type of control to display. The default type is text.
@@ -506,9 +506,10 @@ export class Input implements ComponentInterface {
   private getSize() {
     const theme = getIonTheme(this);
     const { size } = this;
-    if (theme !== 'ionic' && size === 'large') {
+    if (theme !== 'ionic' && (size === 'large' || size === 'xlarge')) {
       printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`);
-      return undefined;
+      // Fallback to medium size, which is the default size for all themes.
+      return 'medium';
     }
     return size;
   }
@@ -776,7 +777,7 @@ export class Input implements ComponentInterface {
           'label-floating': labelShouldFloat,
           [`input-fill-${fill}`]: fill !== undefined,
           [`input-shape-${shape}`]: shape !== undefined,
-          [`input-size-${size}`]: size !== undefined,
+          [`input-size-${size}`]: true,
           [`input-label-placement-${labelPlacement}`]: true,
           'in-item': inItem,
           'in-item-color': hostContext('ion-item.ion-color', this.el),

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

@@ -90,6 +90,28 @@
             <ion-input size="large" fill="outline" shape="round" label="Email"></ion-input>
           </div>
         </div>
+
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill: XLarge Size</h2>
+            <ion-input size="xlarge" label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline: XLarge Size</h2>
+            <ion-input size="xlarge" fill="outline" label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Fill: XLarge Size, Round Shape</h2>
+            <ion-input size="xlarge" shape="round" label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline: XLarge Size, Round Shape</h2>
+            <ion-input size="xlarge" fill="outline" shape="round" label="Email"></ion-input>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>

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

@@ -139,5 +139,74 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
         await expect(input).toHaveScreenshot(screenshot(`input-size-large-outline-round`));
       });
     });
+
+    test.describe('input: size xlarge', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            size="xlarge"
+            label="Email"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge`));
+      });
+      test('should render correctly with stacked label', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            size="xlarge"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-label-stacked`));
+      });
+      test('should not have visual regressions with fill outline', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            fill="outline"
+            size="xlarge"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-outline`));
+      });
+      test('should not have visual regressions with fill outline and round shape', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            fill="outline"
+            shape="round"
+            size="xlarge"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-outline-round`));
+      });
+    });
   });
 });