feat(input): add soft shape for ionic theme (#29477)

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?
<!-- Please describe the current behavior that you are modifying. -->

The input component does not support the `soft` shape.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `soft` has been added to shape, but will only work for the `ionic`
theme.
- Added tests

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


[Preview](https://ionic-framework-git-fw-6096-ionic1.vercel.app/src/components/input/test/shape?ionic:theme=ionic)

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,"rectangular" | "round" | undefined,undefined,false,false
+ion-input,prop,shape,"rectangular" | "round" | "soft" | 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. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners.
+          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | '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. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners.
+          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | '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

@@ -104,6 +104,10 @@
 // Ionic Input Shapes
 // --------------------------------------------------
 
+:host(.input-shape-soft) {
+  --border-radius: #{$ionic-border-radius-rounded-medium};
+}
+
 :host(.input-shape-round) {
   --border-radius: #{$ionic-border-radius-rounded-full};
 }

core/src/components/input/input.tsx

@@ -246,10 +246,11 @@ export class Input implements ComponentInterface {
   @Prop() required = false;
 
   /**
-   * The shape of the input. Set to `"round"` for an input with more rounded corners,
-   * or `"rectangular"` for an input without rounded corners.
+   * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully
+   * rounded corners, or `"rectangular"` for an input without rounded corners.
+   * Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
    */
-  @Prop() shape?: 'round' | 'rectangular';
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';
 
   /**
    * If `true`, the element will have its spelling and grammar checked.
@@ -518,7 +519,8 @@ export class Input implements ComponentInterface {
   private getShape() {
     const theme = getIonTheme(this);
     const { shape } = this;
-    if (theme === 'ios' && shape === 'round') {
+    // TODO(ROU-5475): Remove the check for `soft` when the shape is supported in ios and md.
+    if ((theme === 'ios' && shape === 'round') || (theme !== 'ionic' && shape === 'soft')) {
       printIonWarning(`The "${shape}" shape is not supported in the ${theme} theme.`);
       return undefined;
     }

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

@@ -52,6 +52,10 @@
             <h2>Default Shape</h2>
             <ion-input fill="outline" label="Email"></ion-input>
           </div>
+          <div class="grid-item">
+            <h2>Soft Shape</h2>
+            <ion-input fill="outline" shape="soft" label="Email"></ion-input>
+          </div>
           <div class="grid-item">
             <h2>Round Shape</h2>
             <ion-input fill="outline" shape="round" label="Email"></ion-input>

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

@@ -112,6 +112,32 @@ configs({ modes: ['ionic-md', 'md'] }).forEach(({ title, screenshot, config }) =
 
 configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input: shape'), () => {
+    // TODO(ROU-5475): Add the `md` theme once the `soft` shape is available
+    // in the `md` theme by combining these tests with the above tests.
+    test.describe('soft shape', () => {
+      test.describe('outline fill', () => {
+        test('should not have visual regressions', async ({ page }) => {
+          await page.setContent(
+            `
+            <ion-input
+              shape="soft"
+              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-soft-fill-outline`));
+        });
+      });
+    });
+
     /**
      * Rectangular shape is only available in the ionic theme
      * TODO(FW-6098): Add test for rectangular shape in md