feat(input): add rectangular shape for the ionic theme (#29476)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The input supports an undefined and a `round` shape.

## What is the new behavior?
Adds support for the `rectangular` shape for the `ionic` theme &
screenshot tests for this shape with the outline fill.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

core/api.txt

@@ -628,7 +628,7 @@ ion-input,prop,pattern,string | undefined,undefined,false,false
 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,shape,"rectangular" | "round" | undefined,undefined,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

core/src/components.d.ts

@@ -1471,9 +1471,9 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * The shape of the input. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners.
          */
-        "shape"?: 'round';
+        "shape"?: 'round' | 'rectangular';
         /**
           * 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.
          */
@@ -6751,9 +6751,9 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * The shape of the input. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners.
          */
-        "shape"?: 'round';
+        "shape"?: 'round' | 'rectangular';
         /**
           * 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.
          */

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

@@ -55,8 +55,8 @@
 ::slotted([slot="end"]),
 .input-clear-icon {
   /**
-   * The target area has a z-index of 1, so the slotted elements 
-   * should be higher. Otherwise, the slotted elements will not 
+   * The target area has a z-index of 1, so the slotted elements
+   * should be higher. Otherwise, the slotted elements will not
    * be interactable. This is especially important for the clear
    * button, which should be clickable.
    */
@@ -108,6 +108,10 @@
   --border-radius: #{$ionic-border-radius-rounded-full};
 }
 
+:host(.input-shape-rectangular) {
+  --border-radius: #{$ionic-border-radius-square};
+}
+
 // Input Bottom Content
 // ----------------------------------------------------------------
 

core/src/components/input/input.tsx

@@ -246,9 +246,10 @@ export class Input implements ComponentInterface {
   @Prop() required = false;
 
   /**
-   * The shape of the input. If "round" it will have an increased border radius.
+   * The shape of the input. Set to `"round"` for an input with more rounded corners,
+   * or `"rectangular"` for an input without rounded corners.
    */
-  @Prop() shape?: 'round';
+  @Prop() shape?: 'round' | 'rectangular';
 
   /**
    * If `true`, the element will have its spelling and grammar checked.

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

@@ -56,6 +56,10 @@
             <h2>Round Shape</h2>
             <ion-input fill="outline" shape="round" label="Email"></ion-input>
           </div>
+          <div class="grid-item">
+            <h2>Rectangular Shape</h2>
+            <ion-input fill="outline" shape="rectangular" label="Email"></ion-input>
+          </div>
         </div>
       </ion-content>
     </ion-app>

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

@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input: shape'), () => {
     /**
-     * Solid fill is only available in MD theme.
+     * Solid fill is only available in the md theme
      */
     test.describe('solid fill', () => {
       test('should not have visual regressions', async ({ page }) => {
@@ -88,7 +88,7 @@ configs({ modes: ['ionic-md', 'md'] }).forEach(({ title, screenshot, config }) =
                 --border-radius: 10px !important;
               }
             </style>
-  
+
             <ion-input
               shape="round"
               fill="outline"
@@ -109,3 +109,62 @@ configs({ modes: ['ionic-md', 'md'] }).forEach(({ title, screenshot, config }) =
     });
   });
 });
+
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: shape'), () => {
+    /**
+     * Rectangular shape is only available in the ionic theme
+     * TODO(FW-6098): Add test for rectangular shape in md
+     * by combining these tests with the above tests
+     */
+    test.describe('rectangular shape', () => {
+      test.describe('outline fill', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.setContent(
+            `
+            <ion-input
+              shape="rectangular"
+              fill="outline"
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter your email"
+              maxlength="20"
+              counter="true"
+            ></ion-input>
+            `,
+            config
+          );
+
+          const input = page.locator('ion-input');
+          await expect(input).toHaveScreenshot(screenshot(`input-shape-rectangular-fill-outline`));
+        });
+
+        test('border radius should be customizable', async ({ page }) => {
+          await page.setContent(
+            `
+            <style>
+              ion-input {
+                --border-radius: 10px !important;
+              }
+            </style>
+
+            <ion-input
+              shape="rectangular"
+              fill="outline"
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter your email"
+              maxlength="20"
+              counter="true"
+            ></ion-input>
+          `,
+            config
+          );
+
+          const input = page.locator('ion-input');
+          await expect(input).toHaveScreenshot(screenshot(`input-shape-rectangular-fill-outline-custom`));
+        });
+      });
+    });
+  });
+});