added medium size

Author: BenOsodrac

core/src/components.d.ts

@@ -587,9 +587,9 @@ export namespace Components {
          */
         "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.
+          * Set to `"small"` for a button with less height and padding, to `"medium"` for a button with the medium 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.
          */
-        "size"?: 'small' | 'default' | 'large';
+        "size"?: 'small' | 'default' | 'medium' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
          */
@@ -6068,9 +6068,9 @@ declare namespace LocalJSX {
          */
         "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.
+          * Set to `"small"` for a button with less height and padding, to `"medium"` for a button with the medium 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.
          */
-        "size"?: 'small' | 'default' | 'large';
+        "size"?: 'small' | 'default' | 'medium' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
          */

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

@@ -5,18 +5,14 @@
 // -------------------------------------------------------------------------------
 :host {
   --padding-top: #{globals.$ion-space-0};
-  --padding-end: #{globals.$ion-space-500};
+  --padding-end: #{globals.$ion-space-0};
   --padding-bottom: var(--padding-top);
   --padding-start: var(--padding-end);
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
 
-  @include globals.typography(globals.$ion-body-action-md);
-
   position: relative;
 
-  min-height: globals.$ion-scale-1200;
-
   // Target area
   &::after {
     @include globals.position(50%, 0, null, 0);
@@ -110,6 +106,15 @@
   min-height: #{globals.$ion-scale-1000};
 }
 
+/* Medium Button */
+:host(.button-medium) {
+  --padding-end: #{globals.$ion-space-500};
+
+  @include globals.typography(globals.$ion-body-action-md);
+
+  min-height: #{globals.$ion-scale-1200};
+}
+
 /* Large Button */
 :host(.button-large) {
   --padding-end: #{globals.$ion-space-600};

core/src/components/button/button.tsx

@@ -122,13 +122,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   @Prop({ reflect: true }) 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
+   * Set to `"small"` for a button with less height and padding, to `"medium"`
+   * for a button with the medium 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.
    */
-  @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';
+  @Prop({ reflect: true }) size?: 'small' | 'default' | 'medium' | 'large';
 
   /**
    * If `true`, activates a button with a heavier font weight.
@@ -239,8 +239,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   private getSize(): string | undefined {
     const { size } = this;
 
-    if (size === undefined && this.inItem) {
-      return 'small';
+    if (size === undefined) {
+      return this.inItem ? 'small' : 'medium';
     }
 
     return size;