fix(button): size and strong are respected in ion-buttons

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

@@ -1,5 +1,6 @@
 @import "./button";
 @import "./button.ios.vars";
+@import "../toolbar/toolbar.ios.vars";
 
 
 // iOS Button
@@ -23,6 +24,20 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
+/**
+ * The default buttons in a toolbar
+ * have a different font size/weight
+ * than buttons outside of a toolbar on iOS.
+ * However, we still want the "size"/"strong"
+ * properties to be usable in a toolbar, so we add
+ * the .in-buttons selector such that we
+ * can add the different font size/weight in a toolbar
+ * but still let "size"/"strong" override it.
+ */
+:host(.in-buttons) {
+  font-size: #{$toolbar-ios-button-font-size};
+  font-weight: 400;
+}
 
 // iOS Solid Button
 // --------------------------------------------------

core/src/components/button/button.tsx

@@ -293,6 +293,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-strong`]: strong,
           'in-toolbar': hostContext('ion-toolbar', this.el),
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+          'in-buttons': hostContext('ion-buttons', this.el),
           'button-has-icon-only': hasIconOnly,
           'button-disabled': disabled,
           'ion-activatable': true,

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

@@ -2,11 +2,53 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('button: size', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/size`);
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('should render small buttons', async ({ page }) => {
+    await page.setContent(`
+      <ion-button size="small" fill="solid">Small Button</ion-button>
+    `);
+
+    const wrapper = page.locator('ion-button');
+
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-size-small-${page.getSnapshotSettings()}.png`);
+  });
+  test('should render large buttons', async ({ page }) => {
+    await page.setContent(`
+      <ion-button size="large" fill="solid">Large Button</ion-button>
+    `);
+
+    const wrapper = page.locator('ion-button');
+
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-size-large-${page.getSnapshotSettings()}.png`);
+  });
+  test.describe('in ion-buttons', () => {
+    test('should render small button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button size="small" fill="solid">Small Button</ion-button>
+        </ion-buttons>
+      `);
+
+      const wrapper = page.locator('ion-button');
+
+      expect(await wrapper.screenshot()).toMatchSnapshot(
+        `button-size-small-in-buttons-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render large button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button size="large" fill="solid">Large Button</ion-button>
+        </ion-buttons>
+      `);
 
-    await page.setIonViewport();
+      const wrapper = page.locator('ion-button');
 
-    expect(await page.screenshot()).toMatchSnapshot(`button-size-${page.getSnapshotSettings()}.png`);
+      expect(await wrapper.screenshot()).toMatchSnapshot(
+        `button-size-large-in-buttons-${page.getSnapshotSettings()}.png`
+      );
+    });
   });
 });

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

@@ -18,6 +18,11 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button fill="solid">Default Button</ion-button>
+            <ion-button fill="solid" size="small">Small Button</ion-button>
+            <ion-button fill="solid" size="large">Large Button</ion-button>
+          </ion-buttons>
           <ion-title>Button - Size</ion-title>
         </ion-toolbar>
       </ion-header>

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

@@ -1,12 +1,57 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
+/**
+ * Clear buttons have special font-weight
+ * styles which is why we make sure
+ * to capture the clear button here.
+ */
 test.describe('button: strong', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/strong`);
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('should render strong button', async ({ page }) => {
+    await page.setContent(`
+      <ion-button fill="solid" strong="true">Button</ion-button>
+    `);
+
+    const wrapper = page.locator('ion-button');
+
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
+  });
+  test('should render strong clear button', async ({ page }) => {
+    await page.setContent(`
+      <ion-button fill="clear" strong="true">Button</ion-button>
+    `);
+
+    const wrapper = page.locator('ion-button');
+
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-clear-strong-${page.getSnapshotSettings()}.png`);
+  });
+  test.describe('in ion-buttons', () => {
+    test('should render strong button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button strong="true" fill="solid">Button</ion-button>
+        </ion-buttons>
+      `);
+
+      const wrapper = page.locator('ion-button');
+
+      expect(await wrapper.screenshot()).toMatchSnapshot(`button-strong-in-buttons-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render strong clear button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button strong="true" fill="clear">Button</ion-button>
+        </ion-buttons>
+      `);
 
-    await page.setIonViewport();
+      const wrapper = page.locator('ion-button');
 
-    expect(await page.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
+      expect(await wrapper.screenshot()).toMatchSnapshot(
+        `button-clear-strong-in-buttons-${page.getSnapshotSettings()}.png`
+      );
+    });
   });
 });

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

@@ -18,6 +18,11 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button fill="solid" strong="true">Solid Button</ion-button>
+            <ion-button fill="outline" strong="true">Outline Button</ion-button>
+            <ion-button fill="clear" strong="true">Clear Button</ion-button>
+          </ion-buttons>
           <ion-title>Button - Strong</ion-title>
         </ion-toolbar>
       </ion-header>

core/src/components/buttons/buttons.ios.scss

@@ -12,9 +12,6 @@
   @include margin-horizontal(2px, 2px);
 
   height: 32px;
-
-  font-size: #{$toolbar-ios-button-font-size};
-  font-weight: 400;
 }
 
 ::slotted(*) ion-button:not(.button-round) {

core/src/components/buttons/buttons.md.scss

@@ -14,9 +14,6 @@
   @include margin-horizontal(2px, 2px);
 
   height: 32px;
-
-  font-size: #{$toolbar-md-button-font-size};
-  font-weight: 500;
 }
 
 ::slotted(*) ion-button:not(.button-round) {