fix(button): ionic theme sizes

core/api.txt

@@ -396,7 +396,7 @@ ion-button,prop,rel,string | undefined,undefined,false,false
 ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-button,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,true
-ion-button,prop,size,"default" | "large" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,true
+ion-button,prop,size,"default" | "large" | "medium" | "small" | undefined,undefined,false,true
 ion-button,prop,strong,boolean,false,false,false
 ion-button,prop,target,string | undefined,undefined,false,false
 ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false

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"?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';
+        "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"?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';
+        "size"?: 'small' | 'default' | 'medium' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
          */

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

@@ -4,20 +4,15 @@
 // Ionic Button
 // -------------------------------------------------------------------------------
 :host {
+  --padding-top: #{globals.$ion-space-0};
+  --padding-end: #{globals.$ion-space-0};
   --padding-bottom: var(--padding-top);
-  --padding-end: #{globals.$ion-space-500};
   --padding-start: var(--padding-end);
-  --padding-top: #{globals.$ion-space-0};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
 
   position: relative;
 
-  min-height: globals.$ion-scale-1000;
-
-  font-family: globals.$ion-font-family;
-  font-size: globals.$ion-font-size-350;
-
   // Target area
   &::after {
     @include globals.position(50%, 0, null, 0);
@@ -102,44 +97,31 @@
 // Button Sizes
 // -------------------------------------------------------------------------------
 
-/* Extra Small Button */
-:host(.button-xsmall) {
-  --padding-top: #{globals.$ion-space-100};
-  --padding-end: #{globals.$ion-space-300};
-
-  min-height: globals.$ion-space-600;
-
-  font-size: globals.$ion-font-size-300;
-}
-
 /* Small Button */
 :host(.button-small) {
-  --padding-top: #{globals.$ion-space-200};
   --padding-end: #{globals.$ion-space-400};
 
-  min-height: #{globals.$ion-scale-800};
+  @include globals.typography(globals.$ion-body-action-sm);
 
-  font-size: #{globals.$ion-font-size-300};
+  min-height: #{globals.$ion-scale-1000};
 }
 
-/* Large Button */
-:host(.button-large) {
-  --padding-top: #{globals.$ion-space-400};
-  --padding-end: #{globals.$ion-space-600};
+/* Medium Button */
+:host(.button-medium) {
+  --padding-end: #{globals.$ion-space-500};
 
-  min-height: #{globals.$ion-scale-1200};
+  @include globals.typography(globals.$ion-body-action-md);
 
-  font-size: #{globals.$ion-font-size-400};
+  min-height: #{globals.$ion-scale-1200};
 }
 
-/* Extra Large Button */
-:host(.button-xlarge) {
-  --padding-top: #{globals.$ion-space-400};
-  --padding-end: #{globals.$ion-space-800};
+/* Large Button */
+:host(.button-large) {
+  --padding-end: #{globals.$ion-space-700};
+
+  @include globals.typography(globals.$ion-body-action-lg);
 
   min-height: #{globals.$ion-scale-1400};
-
-  font-size: #{globals.$ion-font-size-500};
 }
 
 // Button with Icons
@@ -152,10 +134,8 @@
   font-size: globals.$ion-font-size-400;
 }
 
-:host(.button-xsmall),
 :host(.button-small),
-:host(.button-large),
-:host(.button-xlarge) {
+:host(.button-large) {
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
@@ -183,11 +163,6 @@
   height: globals.$ion-space-500;
 }
 
-:host(.button-xlarge) ::slotted(ion-spinner) {
-  width: globals.$ion-space-600;
-  height: globals.$ion-space-600;
-}
-
 // Button Shapes
 // -------------------------------------------------------------------------------
 
@@ -198,11 +173,6 @@
   --border-radius: #{globals.$ion-border-radius-200};
 }
 
-:host(.button-soft.button-xsmall),
-:host(.button-soft.button-small) {
-  --border-radius: #{globals.$ion-border-radius-100};
-}
-
 // Round Button
 // --------------------------------------------------
 
@@ -264,8 +234,6 @@
   font-size: globals.$ion-font-size-500;
 }
 
-:host(.button-xsmall) ::slotted(ion-icon[slot="start"]),
-:host(.button-xsmall) ::slotted(ion-spinner[slot="start"]),
 :host(.button-small) ::slotted(ion-icon[slot="start"]),
 :host(.button-small) ::slotted(ion-spinner[slot="start"]) {
   @include globals.margin-horizontal(null, globals.$ion-space-200);
@@ -277,14 +245,10 @@
 }
 
 :host(.button-large) ::slotted(ion-icon[slot="start"]),
-:host(.button-large) ::slotted(ion-spinner[slot="start"]),
-:host(.button-xlarge) ::slotted(ion-icon[slot="start"]),
-:host(.button-xlarge) ::slotted(ion-spinner[slot="start"]) {
+:host(.button-large) ::slotted(ion-spinner[slot="start"]) {
   @include globals.margin-horizontal(null, globals.$ion-space-300);
 }
 
-:host(.button-xsmall) ::slotted(ion-icon[slot="end"]),
-:host(.button-xsmall) ::slotted(ion-spinner[slot="end"]),
 :host(.button-small) ::slotted(ion-icon[slot="end"]),
 :host(.button-small) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-200, null);
@@ -296,9 +260,7 @@
 }
 
 :host(.button-large) ::slotted(ion-icon[slot="end"]),
-:host(.button-large) ::slotted(ion-spinner[slot="end"]),
-:host(.button-xlarge) ::slotted(ion-icon[slot="end"]),
-:host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
+:host(.button-large) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-300, null);
 }
 

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?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';
+  @Prop({ reflect: true }) size?: 'small' | 'default' | 'medium' | 'large';
 
   /**
    * If `true`, activates a button with a heavier font weight.
@@ -233,18 +233,14 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   }
 
   /**
-   * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
+   * Get the default size. If size is unset and the button is inside an item,
+   * the default size is "small". Otherwise, it uses the value of size.
    */
   private getSize(): string | undefined {
-    const theme = getIonTheme(this);
     const { size } = this;
 
-    if (size === undefined && this.inItem) {
-      return 'small';
-    }
-
-    if ((theme === 'ios' || theme === 'md') && (size === 'xsmall' || size === 'xlarge')) {
-      return undefined;
+    if (size === undefined) {
+      return this.inItem ? 'small' : 'medium';
     }
 
     return size;

core/src/components/button/test/size/button.e2e.ts

@@ -60,26 +60,3 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
     });
   });
 });
-
-/**
- * The following tests are specific to the Ionic theme and do not depend on the text direction.
- */
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('button: size'), () => {
-    test('should render xsmall buttons', async ({ page }) => {
-      await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-small`));
-    });
-
-    test('should render xlarge buttons', async ({ page }) => {
-      await page.setContent(`<ion-button size="xlarge" fill="solid">X-Large Button</ion-button>`, config);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-large`));
-    });
-  });
-});

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

@@ -107,40 +107,6 @@
             <ion-spinner slot="icon-only"></ion-spinner>
           </ion-button>
         </p>
-        <p>
-          <ion-button size="xlarge">
-            <ion-spinner slot="start"></ion-spinner>
-            Left, Extra Large
-          </ion-button>
-        </p>
-        <p>
-          <ion-button size="xlarge" href="#">
-            <ion-spinner slot="start"></ion-spinner>
-            Left, Extra Large
-          </ion-button>
-        </p>
-        <p>
-          <ion-button size="xlarge">
-            <ion-spinner slot="end"></ion-spinner>
-            Right, Extra Large
-          </ion-button>
-        </p>
-        <p>
-          <ion-button size="xlarge" href="#">
-            <ion-spinner slot="end"></ion-spinner>
-            Right, Extra Large
-          </ion-button>
-        </p>
-        <p>
-          <ion-button size="xlarge">
-            <ion-spinner slot="icon-only"></ion-spinner>
-          </ion-button>
-        </p>
-        <p>
-          <ion-button size="xlarge" href="#">
-            <ion-spinner slot="icon-only"></ion-spinner>
-          </ion-button>
-        </p>
       </ion-content>
     </ion-app>
   </body>

core/src/components/button/test/theme-ionic/index.html

@@ -35,10 +35,8 @@ <h4>Preview options</h4>
         <p>
           <ion-select id="select-size" justify="space-between" interface="alert" label="Size" placeholder="">
             <ion-select-option selected="true" value="">default</ion-select-option>
-            <ion-select-option value="xsmall">XSmall</ion-select-option>
             <ion-select-option value="small">Small</ion-select-option>
             <ion-select-option value="large">Large</ion-select-option>
-            <ion-select-option value="xlarge">Xlarge</ion-select-option>
           </ion-select>
 
           <ion-select id="select-shape" justify="space-between" interface="alert" label="Shape" placeholder="">