fix(input): default to soft shape

core/src/components.d.ts

@@ -543,9 +543,9 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
@@ -1463,9 +1463,9 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -5775,9 +5775,9 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
@@ -6723,9 +6723,9 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */

core/src/components/button/button.ionic.scss

@@ -5,7 +5,6 @@
 // -------------------------------------------------------------------------------
 
 :host {
-  --border-radius: #{$button-ionic-border-radius};
   --padding-bottom: var(--padding-top);
   --padding-end: #{$button-ionic-padding-end};
   --padding-start: var(--padding-end);
@@ -155,13 +154,20 @@
 // -------------------------------------------------------------------------------
 
 :host(.button-rectangular) {
-  --border-radius: #{$button-ionic-rectangular-border};
+  --border-radius: #{$button-ionic-rectangular-border-radius};
+}
+
+// Button Shape Soft
+// -------------------------------------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-ionic-soft-border-radius};
 }
 
 // Button Shape Round
 // -------------------------------------------------------------------------------
 :host(.button-round) {
-  --border-radius: #{$button-ionic-round-border};
+  --border-radius: #{$button-ionic-round-border-radius};
 }
 
 // Button Focused

core/src/components/button/button.ionic.vars.scss

@@ -3,9 +3,6 @@
 // Ionic Button
 // -------------------------------------------------------------------------------
 
-/// @prop - Border radius of the button
-$button-ionic-border-radius:                                  px-to-rem(8) !default;
-
 /// @prop - Padding top of the button
 $button-ionic-padding-top:                                    px-to-rem(12) !default;
 
@@ -128,13 +125,19 @@ $button-ionic-xlarge-font-size:                               dynamic-font-max(2
 // -------------------------------------------------------------------------------
 
 /// @prop - Border radius of the rectangular button
-$button-ionic-rectangular-border:                             0 !default;
+$button-ionic-rectangular-border-radius:                     0 !default;
+
+// Ionic Soft Button
+// -------------------------------------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-ionic-soft-border-radius:                            px-to-rem(8) !default;
 
 // Ionic Round Button
 // -------------------------------------------------------------------------------
 
 /// @prop - Border radius of the round button
-$button-ionic-round-border:                                   px-to-rem(999) !default;
+$button-ionic-round-border-radius:                           px-to-rem(999) !default;
 
 // Ionic Outline Button
 // -------------------------------------------------------------------------------

core/src/components/button/button.ios.scss

@@ -7,7 +7,6 @@
 // --------------------------------------------------
 
 :host {
-  --border-radius: #{$button-ios-border-radius};
   --padding-top: #{$button-ios-padding-top};
   --padding-bottom: #{$button-ios-padding-bottom};
   --padding-start: #{$button-ios-padding-start};
@@ -42,7 +41,6 @@
 // --------------------------------------------------
 
 :host(.button-outline) {
-  --border-radius: #{$button-ios-outline-border-radius};
   --border-width: #{$button-ios-outline-border-width};
   --border-style: #{$button-ios-outline-border-style};
   --background-activated: #{ion-color(primary, base)};
@@ -114,6 +112,12 @@
   font-size: #{$button-ios-small-font-size};
 }
 
+// iOS Soft Button
+// --------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-ios-soft-border-radius};
+}
 
 // iOS Round Button
 // --------------------------------------------------
@@ -126,6 +130,13 @@
   --padding-bottom: #{$button-ios-round-padding-bottom};
 }
 
+// iOS Rectangular Button
+// --------------------------------------------------
+
+:host(.button-rectangular) {
+  --border-radius: #{$button-ios-rectangular-border-radius};
+}
+
 // iOS Strong Button
 // --------------------------------------------------
 
@@ -155,7 +166,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 16px
@@ -179,7 +190,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 13px
@@ -203,7 +214,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 20px

core/src/components/button/button.ios.vars.scss

@@ -30,9 +30,6 @@ $button-ios-padding-start:                            $button-ios-padding-end !d
 /// @prop - Minimum height of the button
 $button-ios-min-height:                               3.1em !default;
 
-/// @prop - Border radius of the button
-$button-ios-border-radius:                            14px !default;
-
 /// @prop - Font size of the button text
 /// The maximum font size is calculated by taking the default font size
 /// and multiplying it by 3, since 310% of the default is the maximum
@@ -104,8 +101,6 @@ $button-ios-outline-border-width:                     1px !default;
 /// @prop - Border style of the outline button
 $button-ios-outline-border-style:                     solid !default;
 
-/// @prop - Border radius of the outline button
-$button-ios-outline-border-radius:                    $button-ios-border-radius !default;
 
 // iOS Clear Button
 // --------------------------------------------------
@@ -127,6 +122,13 @@ $button-ios-clear-opacity-activated:                  .4 !default;
 /// @prop - Opacity of the clear button on hover
 $button-ios-clear-opacity-hover:                      .6 !default;
 
+// iOS Soft Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-ios-soft-border-radius:                            14px !default;
+
+
 // iOS Round Button
 // --------------------------------------------------
 
@@ -146,6 +148,13 @@ $button-ios-round-padding-start:                      $button-round-padding-star
 $button-ios-round-border-radius:                      $button-round-border-radius !default;
 
 
+// iOS Rectangular Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the rectangular button
+$button-ios-rectangular-border-radius:               0 !default;
+
+
 // iOS Decorator Button
 // --------------------------------------------------
 

core/src/components/button/button.md.scss

@@ -5,7 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --border-radius: #{$button-md-border-radius};
   --padding-top: #{$button-md-padding-top};
   --padding-bottom: #{$button-md-padding-bottom};
   --padding-start: #{$button-md-padding-start};
@@ -76,6 +75,13 @@
 }
 
 
+// Material Design Soft Button
+// --------------------------------------------------
+
+:host(.button-soft) {
+  --border-radius: #{$button-md-soft-border-radius};
+}
+
 // Material Design Round Button
 // --------------------------------------------------
 
@@ -87,6 +93,12 @@
   --padding-bottom: #{$button-md-round-padding-bottom};
 }
 
+// Material Design Rectangular Button
+// --------------------------------------------------
+
+:host(.button-rectangular) {
+  --border-radius: #{$button-md-rectangular-border-radius};
+}
 
 // Material Design Button Sizes
 // --------------------------------------------------
@@ -149,7 +161,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 14px
@@ -174,7 +186,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 13px
@@ -199,7 +211,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 20px

core/src/components/button/button.md.vars.scss

@@ -30,9 +30,6 @@ $button-md-padding-start:                               1.1em !default;
 /// @prop - Minimum height of the button
 $button-md-min-height:                                  36px !default;
 
-/// @prop - Border radius of the button
-$button-md-border-radius:                               4px !default;
-
 /// @prop - Font size of the button text
 $button-md-font-size:                                   dynamic-font(14px) !default;
 
@@ -93,6 +90,13 @@ $button-md-small-min-height:                            2.1em !default;
 /// @prop - Font size of the small button
 $button-md-small-font-size:                             dynamic-font(13px) !default;
 
+// Material Design Round Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the soft button
+$button-md-soft-border-radius:                          4px !default;
+
+
 // Material Design Round Button
 // --------------------------------------------------
 
@@ -112,6 +116,13 @@ $button-md-round-padding-start:                         $button-round-padding-st
 $button-md-round-border-radius:                         $button-round-border-radius !default;
 
 
+// Material Design Rectangular Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the rectangular button
+$button-md-rectangular-border-radius:                  0 !default;
+
+
 // Material Design Decorator Button
 // --------------------------------------------------
 

core/src/components/button/button.tsx

@@ -115,9 +115,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   @Prop() rel: string | undefined;
 
   /**
-   * Set to `"round"` for a button with more rounded corners.
+   * Set to `"soft"` for a button with soft rounded corners, `"round"` for a button
+   * with fully rounded corners, or `"rectangular" for a button without rounded corners.
+   * Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
    */
-  @Prop({ reflect: true }) shape?: 'round' | 'rectangular';
+  @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular';
 
   /**
    * Set to `"small"` for a button with less height and padding, to `"default"`
@@ -216,6 +218,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     return 'bounded';
   }
 
+  /**
+   * Set the default shape for the different themes
+   */
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    if (shape === undefined) {
+      return theme === 'md' ? 'round' : 'soft';
+    }
+
+    return shape;
+  }
+
   /**
    * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
    */
@@ -343,13 +359,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
       color,
       expand,
       hasIconOnly,
-      shape,
       strong,
       inheritedAttributes,
     } = this;
 
     const theme = getIonTheme(this);
     const finalSize = this.getSize();
+    const finalShape = this.getShape();
     const TagType = href === undefined ? 'button' : ('a' as any);
     const attrs =
       TagType === 'button'
@@ -389,7 +405,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [buttonType]: true,
           [`${buttonType}-${expand}`]: expand !== undefined,
           [`${buttonType}-${finalSize}`]: finalSize !== undefined,
-          [`${buttonType}-${shape}`]: shape !== undefined,
+          [`${buttonType}-${finalShape}`]: finalShape !== undefined,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
           'in-toolbar': hostContext('ion-toolbar', this.el),

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

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Button - Round</title>
+    <title>Button - Shape</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -26,7 +26,7 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Button - Round</ion-title>
+          <ion-title>Button - Shape</ion-title>
         </ion-toolbar>
       </ion-header>
 
@@ -34,17 +34,174 @@
         <h1>Default</h1>
         <div id="default" class="grid">
           <div>
-            <ion-button size="small" shape="round">Button</ion-button>
+            <ion-button size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button>Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button>
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <div>
+            <ion-button fill="outline" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="outline" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <!-- Clear buttons have focused state to see shape -->
+          <div>
+            <ion-button fill="clear" size="small" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" size="large" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" size="small" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button fill="clear" size="large" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+
+        <h1>Soft</h1>
+        <div id="soft" class="grid">
+          <div>
+            <ion-button shape="soft" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <div>
+            <ion-button shape="soft" fill="outline" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="outline" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <!-- Clear buttons have focused state to see shape -->
+          <div>
+            <ion-button shape="soft" fill="clear" size="small" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" size="large" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" size="small" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="soft" fill="clear" size="large" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+
+        <h1>Round</h1>
+        <div id="round" class="grid">
+          <div>
+            <ion-button shape="round" size="small">Button</ion-button>
           </div>
           <div>
             <ion-button shape="round">Button</ion-button>
           </div>
           <div>
-            <ion-button size="large" shape="round">Button</ion-button>
+            <ion-button shape="round" size="large">Button</ion-button>
           </div>
-
           <div>
-            <ion-button size="small" shape="round">
+            <ion-button shape="round" size="small">
               <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
             </ion-button>
           </div>
@@ -54,25 +211,22 @@
             </ion-button>
           </div>
           <div>
-            <ion-button size="large" shape="round">
+            <ion-button shape="round" size="large">
               <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
             </ion-button>
           </div>
-        </div>
 
-        <h1>Outline</h1>
-        <div id="outline" class="grid">
           <div>
-            <ion-button size="small" shape="round" fill="outline">Button</ion-button>
+            <ion-button shape="round" fill="outline" size="small">Button</ion-button>
           </div>
           <div>
             <ion-button shape="round" fill="outline">Button</ion-button>
           </div>
           <div>
-            <ion-button size="large" shape="round" fill="outline">Button</ion-button>
+            <ion-button shape="round" fill="outline" size="large">Button</ion-button>
           </div>
           <div>
-            <ion-button size="small" shape="round" fill="outline">
+            <ion-button shape="round" fill="outline" size="small">
               <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
             </ion-button>
           </div>
@@ -82,26 +236,23 @@
             </ion-button>
           </div>
           <div>
-            <ion-button size="large" shape="round" fill="outline">
+            <ion-button shape="round" fill="outline" size="large">
               <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
             </ion-button>
           </div>
-        </div>
 
-        <h1>Clear</h1>
-        <!-- The buttons have the `ion-focused` class to  highlight that they are round. Otherwise, they would be invisible. -->
-        <div id="clear" class="grid">
+          <!-- Clear buttons have focused state to see shape -->
           <div>
-            <ion-button size="small" shape="round" fill="clear" class="ion-focused">Button</ion-button>
+            <ion-button shape="round" fill="clear" size="small" class="ion-focused">Button</ion-button>
           </div>
           <div>
             <ion-button shape="round" fill="clear" class="ion-focused">Button</ion-button>
           </div>
           <div>
-            <ion-button size="large" shape="round" fill="clear" class="ion-focused">Button</ion-button>
+            <ion-button shape="round" fill="clear" size="large" class="ion-focused">Button</ion-button>
           </div>
           <div>
-            <ion-button size="small" shape="round" fill="clear" class="ion-focused">
+            <ion-button shape="round" fill="clear" size="small" class="ion-focused">
               <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
             </ion-button>
           </div>
@@ -111,12 +262,92 @@
             </ion-button>
           </div>
           <div>
-            <ion-button size="large" shape="round" fill="clear" class="ion-focused">
+            <ion-button shape="round" fill="clear" size="large" class="ion-focused">
               <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
             </ion-button>
           </div>
         </div>
 
+        <h1>Rectangular</h1>
+        <div id="rectangular" class="grid">
+          <div>
+            <ion-button shape="rectangular" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="small">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="large">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="small">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="outline" size="large">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+
+          <!-- Clear buttons have focused state to see shape -->
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="small" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="large" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="small" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="rectangular" fill="clear" size="large" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
+
+        <!-- TODO remove from tests -->
         <h1>Color</h1>
         <div id="color">
           <ion-button shape="round">Default</ion-button>

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

@@ -5,13 +5,16 @@
 
 :host(.input-fill-outline) {
   --border-color: #{$background-color-step-300};
-  --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
 
   min-height: 56px;
 }
 
+:host(.input-fill-outline.input-shape-soft) {
+  --border-radius: 4px;
+}
+
 :host(.input-fill-outline.input-shape-round) {
   --border-radius: 28px;
   --padding-start: 32px;

core/src/components/input/input.md.solid.scss

@@ -6,13 +6,16 @@
 :host(.input-fill-solid) {
   --background: #{$background-color-step-50};
   --border-color: #{$background-color-step-500};
-  --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
 
   min-height: 56px;
 }
 
+:host(.input-fill-solid.input-shape-soft) {
+  --border-radius: 4px;
+}
+
 /**
  * The solid fill style has a border
  * at the bottom of the input wrapper.

core/src/components/input/input.tsx

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