From eb079abfdfb4ca0783021b9177202f7fd85c7dc8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 9 May 2024 15:10:51 -0400
Subject: [PATCH 1/2] fix(input): only apply the shape to the outline fill in
 ionic theme

---
 core/src/components.d.ts                      |  4 +--
 .../components/input/input.ionic.outline.scss | 34 +++++++++++++------
 core/src/components/input/input.ionic.scss    | 15 --------
 3 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 08838a19d47..59583941f31 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1471,7 +1471,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * 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.
+          * 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. Only applies when the fill is set to `"solid"` or `"outline"`.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
@@ -6751,7 +6751,7 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * 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.
+          * 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. Only applies when the fill is set to `"solid"` or `"outline"`.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss
index 247a1b446b9..26597367e70 100644
--- a/core/src/components/input/input.ionic.outline.scss
+++ b/core/src/components/input/input.ionic.outline.scss
@@ -53,6 +53,13 @@
    * input + label.
    */
   border-bottom: none;
+
+  /**
+   * Do not show a background on the input wrapper as
+   * this includes the label, instead we apply the
+   * background to the native wrapper.
+   */
+  background: transparent;
 }
 
 :host(.input-fill-outline.input-shape-round) .label-text-wrapper {
@@ -80,9 +87,16 @@
 }
 
 :host(.input-fill-outline) .native-wrapper {
+  @include border-radius(inherit);
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   min-height: 40px;
+
+  /**
+  * Apply the background to the native input
+  * wrapper to only style the input.
+  */
+  background: var(--background);
 }
 
 // Input Fill: Outline, Outline Container
@@ -128,21 +142,19 @@
   margin-inline-start: 8px;
 }
 
-// Input - Disabled
-// ----------------------------------------------------------------
+// Input Shapes
+// --------------------------------------------------
 
-:host(.input-fill-outline.input-disabled) {
-  // color for the text within the input
-  --color: #{$ionic-color-neutral-400};
-  --background: transparent;
+:host(.input-fill-outline.input-shape-soft) {
+  --border-radius: #{$ionic-border-radius-rounded-medium};
 }
 
-:host(.input-fill-outline.input-disabled) .native-wrapper {
-  --background: #{$ionic-color-neutral-10};
-
-  @include border-radius(inherit);
+:host(.input-fill-outline.input-shape-round) {
+  --border-radius: #{$ionic-border-radius-rounded-full};
+}
 
-  background: var(--background);
+:host(.input-fill-outline.input-shape-rectangular) {
+  --border-radius: #{$ionic-border-radius-square};
 }
 
 // Input Focus
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 6183016b21e..9d95ab9aff5 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -101,21 +101,6 @@
   display: none;
 }
 
-// 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};
-}
-
-:host(.input-shape-rectangular) {
-  --border-radius: #{$ionic-border-radius-square};
-}
-
 // Input Bottom Content
 // ----------------------------------------------------------------
 

From 9884aad6b09537497711256b49f44b848a3796ac Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 9 May 2024 15:15:09 -0400
Subject: [PATCH 2/2] docs(input): commit the docs change

---
 core/src/components/input/input.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 7d212fc1a7b..ef03c4b858e 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -249,6 +249,7 @@ export class Input implements ComponentInterface {
    * 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.
+   * Only applies when the fill is set to `"solid"` or `"outline"`.
    */
   @Prop() shape?: 'soft' | 'round' | 'rectangular';