fix(button): ionic theme sizes (#30405)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adjusted ion-button sizes on Ionic theme to match Figma UI. Now
figma's small | medium | large match ionic's small | default | large.
- Removed xsmall and xlarge sizes, as UX rolled back the decision to
have them.
- Removed xsmall and xlarge tests and their usages.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

- [Ionic Theme
Button](https://ionic-framework-git-rou-11903-ionic1.vercel.app/src/components/button/test/theme-ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

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-bottom: var(--padding-top);
-  --padding-end: #{globals.$ion-space-500};
-  --padding-start: var(--padding-end);
   --padding-top: #{globals.$ion-space-0};
+  --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};
 
   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};
+}
+
+/* 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-top: #{globals.$ion-space-400};
-  --padding-end: #{globals.$ion-space-600};
+  --padding-end: #{globals.$ion-space-700};
 
-  min-height: #{globals.$ion-scale-1200};
-
-  font-size: #{globals.$ion-font-size-400};
-}
-
-/* Extra Large Button */
-:host(.button-xlarge) {
-  --padding-top: #{globals.$ion-space-400};
-  --padding-end: #{globals.$ion-space-800};
+  @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`));
-    });
-  });
-});