Merge remote-tracking branch 'origin/feature-8.0' into sp/sync-next-03-21

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

@@ -114,11 +114,6 @@
   font-size: #{$button-ios-small-font-size};
 }
 
-:host(.button-has-icon-only) {
-  --padding-top: 0;
-  --padding-bottom: 0;
-}
-
 
 // iOS Round Button
 // --------------------------------------------------
@@ -131,7 +126,6 @@
   --padding-bottom: #{$button-ios-round-padding-bottom};
 }
 
-
 // iOS Strong Button
 // --------------------------------------------------
 
@@ -139,6 +133,47 @@
   font-weight: #{$button-ios-strong-font-weight};
 }
 
+// iOS Icon Only Button
+// --------------------------------------------------
+
+:host(.button-has-icon-only) {
+  --padding-top: 0;
+  --padding-bottom: var(--padding-top);
+  --padding-end: var(--padding-top);
+  --padding-start: var(--padding-end);
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-width: clamp(30px, 2.125em, 60px);
+
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-height: clamp(30px, 2.125em, 60px);
+}
+
+::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.125em;
+}
+
+:host(.button-small.button-has-icon-only) {
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-width: clamp(23px, 2.16em, 54px);
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-height: clamp(23px, 2.16em, 54px);
+  
+}
+
+:host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.4em;
+}
+
+:host(.button-large.button-has-icon-only) {
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-width: clamp(46px, 2.5em, 78px);
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-height: clamp(46px, 2.5em, 78px);
+}
+
+:host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1em;
+}
 
 // iOS Button Focused
 // --------------------------------------------------

core/src/components/button/button.md.scss

@@ -113,12 +113,6 @@
   font-size: #{$button-md-small-font-size};
 }
 
-:host(.button-has-icon-only) {
-  --padding-top: 0;
-  --padding-bottom: 0;
-}
-
-
 // MD strong Button
 // --------------------------------------------------
 
@@ -126,10 +120,52 @@
   font-weight: #{$button-md-strong-font-weight};
 }
 
-::slotted(ion-icon[slot="icon-only"]) {
-  @include padding(0);
+// MD Icon Only Button
+//
+// MD does not specify a small size, these
+// styles are based on the iOS small size.
+//
+// MD does not specify a large size, these
+// styles are based on the iOS large size.
+// --------------------------------------------------
+
+:host(.button-has-icon-only) {
+  --padding-top: 0;
+  --padding-bottom: var(--padding-top);
+  --padding-end: var(--padding-top);
+  --padding-start: var(--padding-end);
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-width: clamp(30px, 2.86em, 60px);
+
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-height: clamp(30px, 2.86em, 60px);
 }
 
+::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.6em;
+}
+
+:host(.button-small.button-has-icon-only) {
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-width: clamp(23px, 2.16em, 54px);
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-height: clamp(23px, 2.16em, 54px);
+}
+
+:host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.23em;
+}
+
+:host(.button-large.button-has-icon-only) {
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-width: clamp(46px, 2.5em, 78px);
+  // TODO(FW-6053): replace em value with the min-height variable.
+  min-height: clamp(46px, 2.5em, 78px);
+}
+
+:host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.4em;
+}
 
 // Material Design Button: Hover
 // --------------------------------------------------

core/src/components/button/button.scss

@@ -235,11 +235,6 @@
   @include margin(0, -0.2em, 0, 0.3em);
 }
 
-::slotted(ion-icon[slot="icon-only"]) {
-  font-size: 1.8em;
-}
-
-
 // Button Ripple effect
 // --------------------------------------------------
 

core/src/components/button/button.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, Watch, State, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
@@ -40,6 +40,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   @Element() el!: HTMLElement;
 
+  /**
+   * If `true`, the button only has an icon.
+   */
+  @State() isCircle: boolean = false;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -297,6 +302,18 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     this.ionBlur.emit();
   };
 
+  private slotChanged = () => {
+    /**
+     * Ensures that the 'has-icon-only' class is properly added
+     * or removed from `ion-button` when manipulating the
+     * `icon-only` slot.
+     *
+     * Without this, the 'has-icon-only' class is only checked
+     * or added when `ion-button` component first renders.
+     */
+    this.isCircle = this.hasIconOnly;
+  };
+
   render() {
     const {
       buttonType,
@@ -377,7 +394,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           {...inheritedAttributes}
         >
           <span class="button-inner">
-            <slot name="icon-only"></slot>
+            <slot name="icon-only" onSlotchange={this.slotChanged}></slot>
             <slot name="start"></slot>
             <slot></slot>
             <slot name="end"></slot>

core/src/components/button/button.vars.scss

@@ -16,4 +16,4 @@ $button-round-padding-bottom:     $button-round-padding-top !default;
 $button-round-padding-start:      $button-round-padding-end !default;
 
 /// @prop - Border radius of the round button
-$button-round-border-radius:      64px !default;
+$button-round-border-radius:      999px !default;

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

@@ -6,12 +6,64 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: round'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/button/test/round`, config);
+    test.describe('default', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.goto(`/src/components/button/test/round`, config);
 
-      await page.setIonViewport();
+        await page.setIonViewport();
 
-      await expect(page).toHaveScreenshot(screenshot(`button-round`));
+        const container = page.locator('#default');
+
+        await expect(container).toHaveScreenshot(screenshot(`button-round`));
+      });
+    });
+
+    test.describe('outline', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.goto(`/src/components/button/test/round`, config);
+
+        await page.setIonViewport();
+
+        const container = page.locator('#outline');
+
+        await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
+      });
+    });
+
+    test.describe('clear', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.goto(`/src/components/button/test/round`, config);
+
+        await page.setIonViewport();
+
+        const container = page.locator('#clear');
+
+        await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
+      });
+    });
+
+    test.describe('color', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.goto(`/src/components/button/test/round`, config);
+
+        await page.setIonViewport();
+
+        const container = page.locator('#color');
+
+        await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
+      });
+    });
+
+    test.describe('expand', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.goto(`/src/components/button/test/round`, config);
+
+        await page.setIonViewport();
+
+        const container = page.locator('#expand');
+
+        await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
+      });
     });
   });
 });

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

@@ -12,6 +12,14 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 10px;
+      }
+    </style>
   </head>
 
   <body>
@@ -22,45 +30,131 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
-        <ion-button shape="round">Default</ion-button>
-        <ion-button shape="round" color="primary">Primary</ion-button>
-        <ion-button shape="round" color="secondary">Secondary</ion-button>
-        <ion-button shape="round" color="tertiary">Tertiary</ion-button>
-        <ion-button shape="round" color="success">Success</ion-button>
-        <ion-button shape="round" color="warning">Warning</ion-button>
-        <ion-button shape="round" color="danger">Danger</ion-button>
-        <ion-button shape="round" color="light">Light</ion-button>
-        <ion-button shape="round" color="medium">Medium</ion-button>
-        <ion-button shape="round" color="dark">Dark</ion-button>
+      <ion-content class="ion-padding" no-bounce>
+        <h1>Default</h1>
+        <div id="default" class="grid">
+          <div>
+            <ion-button size="small" shape="round">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="round">Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="large" shape="round">Button</ion-button>
+          </div>
 
-        <ion-button fill="outline" shape="round">Default</ion-button>
-        <ion-button fill="outline" shape="round" color="primary">Primary</ion-button>
-        <ion-button fill="outline" shape="round" color="secondary">Secondary</ion-button>
-        <ion-button fill="outline" shape="round" color="tertiary">Tertiary</ion-button>
-        <ion-button fill="outline" shape="round" color="success">Success</ion-button>
-        <ion-button fill="outline" shape="round" color="warning">Warning</ion-button>
-        <ion-button fill="outline" shape="round" color="danger">Danger</ion-button>
-        <ion-button fill="outline" shape="round" color="light">Light</ion-button>
-        <ion-button fill="outline" shape="round" color="medium">Medium</ion-button>
-        <ion-button fill="outline" shape="round" color="dark">Dark</ion-button>
+          <div>
+            <ion-button size="small" shape="round">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="round">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button size="large" shape="round">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
 
-        <ion-button shape="round" fill="clear">Clear</ion-button>
-        <ion-button shape="round" expand="block">Block</ion-button>
-        <ion-button shape="round" expand="full" color="danger">Full</ion-button>
+        <h1>Outline</h1>
+        <div id="outline" class="grid">
+          <div>
+            <ion-button size="small" shape="round" fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="round" fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="large" shape="round" fill="outline">Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="small" shape="round" fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="round" fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button size="large" shape="round" fill="outline">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
 
-        <ion-button shape="round" fill="outline" expand="block">Block - Outline</ion-button>
-        <ion-button shape="round" fill="outline" expand="full" color="danger">Full - Outline</ion-button>
+        <h1>Clear</h1>
+        <!-- The buttons have the `ion-focused` class to  highlight that they are round. Otherwise, they would be invisible. -->
+        <div id="clear" class="grid">
+          <div>
+            <ion-button size="small" shape="round" fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button shape="round" fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="large" shape="round" fill="clear" class="ion-focused">Button</ion-button>
+          </div>
+          <div>
+            <ion-button size="small" shape="round" fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button shape="round" fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+          <div>
+            <ion-button size="large" shape="round" fill="clear" class="ion-focused">
+              <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+            </ion-button>
+          </div>
+        </div>
 
-        <ion-button shape="round" strong>Strong</ion-button>
+        <h1>Color</h1>
+        <div id="color">
+          <ion-button shape="round">Default</ion-button>
+          <ion-button shape="round" color="primary">Primary</ion-button>
+          <ion-button shape="round" color="secondary">Secondary</ion-button>
+          <ion-button shape="round" color="tertiary">Tertiary</ion-button>
+          <ion-button shape="round" color="success">Success</ion-button>
+          <ion-button shape="round" color="warning">Warning</ion-button>
+          <ion-button shape="round" color="danger">Danger</ion-button>
+          <ion-button shape="round" color="light">Light</ion-button>
+          <ion-button shape="round" color="medium">Medium</ion-button>
+          <ion-button shape="round" color="dark">Dark</ion-button>
+
+          <ion-button fill="outline" shape="round">Default</ion-button>
+          <ion-button fill="outline" shape="round" color="primary">Primary</ion-button>
+          <ion-button fill="outline" shape="round" color="secondary">Secondary</ion-button>
+          <ion-button fill="outline" shape="round" color="tertiary">Tertiary</ion-button>
+          <ion-button fill="outline" shape="round" color="success">Success</ion-button>
+          <ion-button fill="outline" shape="round" color="warning">Warning</ion-button>
+          <ion-button fill="outline" shape="round" color="danger">Danger</ion-button>
+          <ion-button fill="outline" shape="round" color="light">Light</ion-button>
+          <ion-button fill="outline" shape="round" color="medium">Medium</ion-button>
+          <ion-button fill="outline" shape="round" color="dark">Dark</ion-button>
+        </div>
+
+        <h1>Expand</h1>
+        <div id="expand">
+          <ion-button shape="round" expand="block">Block</ion-button>
+          <ion-button shape="round" expand="full" color="danger">Full</ion-button>
+          <ion-button shape="round" fill="outline" expand="block">Block - Outline</ion-button>
+          <ion-button shape="round" fill="outline" expand="full" color="danger">Full - Outline</ion-button>
+        </div>
+
+        <h1>Strong</h1>
+        <div id="strong">
+          <ion-button shape="round" strong>Strong</ion-button>
+        </div>
       </ion-content>
     </ion-app>
-
-    <style>
-      ion-button {
-        display: block !important;
-        margin: 8px auto !important;
-      }
-    </style>
   </body>
 </html>