remve xsmall and xlarge sizes

Author: BenOsodrac

core/src/components.d.ts

@@ -589,7 +589,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "size"?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';
+        "size"?: 'small' | 'default' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
          */
@@ -6070,7 +6070,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "size"?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';
+        "size"?: 'small' | 'default' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
          */

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

@@ -102,9 +102,7 @@
 // -------------------------------------------------------------------------------
 
 /* Small Button */
-/* Extra Small Button */
-:host(.button-small),
-:host(.button-xsmall) {
+:host(.button-small) {
   --padding-top: #{globals.$ion-space-200};
   --padding-end: #{globals.$ion-space-400};
 
@@ -114,9 +112,7 @@
 }
 
 /* Large Button */
-/* Extra Large Button */
-:host(.button-large),
-:host(.button-xlarge) {
+:host(.button-large) {
   --padding-top: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-600};
 
@@ -135,10 +131,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"]) {
@@ -166,11 +160,6 @@
   height: globals.$ion-space-500;
 }
 
-:host(.button-xlarge) ::slotted(ion-spinner) {
-  width: globals.$ion-space-600;
-  height: globals.$ion-space-600;
-}
-
 // Button Shapes
 // -------------------------------------------------------------------------------
 
@@ -181,7 +170,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};
 }
@@ -247,8 +235,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);
@@ -260,14 +246,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);
@@ -279,9 +261,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

@@ -128,7 +128,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    * 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' | 'large';
 
   /**
    * If `true`, activates a button with a heavier font weight.
@@ -233,20 +233,15 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   }
 
   /**
-   * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
+   * Set the size based if the button is inside of an item, the default size is "small"
    */
   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;
-    }
-
     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`));
-    });
-  });
-});