feat(input): add styles for round shape to ionic theme (#29329)

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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Added styles for `shape="round"`, including:
- Increased border radius
- Increased padding when additionally using outline fill and large size
- Horizontal padding also applied to label when using outline fill

I also changed the `$ionic-border-radius-rounded-full` design token from
100% to 999px. `border-radius: 100%` is pretty obviously incorrect for
most browsers (screenshot taken in Chrome):

![image](https://github.com/ionic-team/ionic-framework/assets/90629384/5dc47a65-0446-4e39-9ce3-1c749b6329e7)

## 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. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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

@@ -12,6 +12,11 @@
   --placeholder-opacity: 1;
 }
 
+:host(.input-fill-outline.input-size-large.input-shape-round) {
+  --padding-start: 16px;
+  --padding-end: 16px;
+}
+
 /**
  * The bottom content should never have
  * a border with the outline style.
@@ -34,10 +39,8 @@
   /**
    * For the ionic theme, the padding needs to sit on the
    * native wrapper instead, so that it sits within the
-   * outline container but does not affect the label text.
-
-   * For the ionic theme, the horizontal padding needs to
-   * sit on the native wrapper instead, so that
+   * outline container but does not always affect the
+   * label text.
    */
   @include padding(0);
 
@@ -49,6 +52,10 @@
   border-bottom: none;
 }
 
+:host(.input-fill-outline.input-shape-round) .label-text-wrapper {
+  @include padding(null, var(--padding-end), null, var(--padding-start));
+}
+
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
   @include transform-origin(start, top);
 
@@ -98,7 +105,7 @@
 // ----------------------------------------------------------------
 
 // This makes the label sit above the input.
-:host(.label-floating.input-fill-outline.input-label-placement-stacked:not(.input-shape-round)) .label-text-wrapper {
+:host(.label-floating.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
   @include transform(translateY(0), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
 

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

@@ -21,6 +21,13 @@
   min-height: 48px;
 }
 
+// Ionic Input Shapes
+// --------------------------------------------------
+
+:host(.input-shape-round) {
+  --border-radius: #{$ionic-border-radius-rounded-full};
+}
+
 // Input Bottom Content
 // ----------------------------------------------------------------
 

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

@@ -267,5 +267,42 @@ configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
       const input = page.locator('ion-input');
       await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-label-stacked`));
     });
+
+    test('should not have visual regressions with outline fill and round shape', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            fill="outline"
+            label="Email"
+            label-placement="stacked"
+            placeholder="example@ionic.io"
+            shape="round"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-label-stacked-shape-round`));
+    });
+
+    test('should not have visual regressions with outline fill, round shape, and large size', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            fill="outline"
+            label="Email"
+            label-placement="stacked"
+            placeholder="example@ionic.io"
+            shape="round"
+            size="large"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-label-stacked-shape-round-size-large`));
+    });
   });
 });

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

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

core/src/foundations/_design-tokens.json

@@ -388,7 +388,7 @@
           "$value": "32px"
         },
         "full": {
-          "$value": "100%"
+          "$value": "999px"
         }
       }
     },

core/src/foundations/ionic.root.scss

@@ -122,7 +122,7 @@
   --ionic-border-radius-rounded-medium: 8px;
   --ionic-border-radius-rounded-large: 16px;
   --ionic-border-radius-rounded-x-large: 32px;
-  --ionic-border-radius-rounded-full: 100%;
+  --ionic-border-radius-rounded-full: 999px;
   --ionic-border-size-small: 1px;
   --ionic-border-size-medium: 2px;
   --ionic-border-size-large: 3px;

core/src/foundations/ionic.vars.scss

@@ -121,7 +121,7 @@ $ionic-border-radius-rounded-small: var(--ionic-border-radius-rounded-small, 4px
 $ionic-border-radius-rounded-medium: var(--ionic-border-radius-rounded-medium, 8px);
 $ionic-border-radius-rounded-large: var(--ionic-border-radius-rounded-large, 16px);
 $ionic-border-radius-rounded-x-large: var(--ionic-border-radius-rounded-x-large, 32px);
-$ionic-border-radius-rounded-full: var(--ionic-border-radius-rounded-full, 100%);
+$ionic-border-radius-rounded-full: var(--ionic-border-radius-rounded-full, 999px);
 $ionic-border-size-small: var(--ionic-border-size-small, 1px);
 $ionic-border-size-medium: var(--ionic-border-size-medium, 2px);
 $ionic-border-size-large: var(--ionic-border-size-large, 3px);