feat(button): add circular shape as round

Author: thetaPC

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,14 +126,44 @@
   --padding-bottom: #{$button-ios-round-padding-bottom};
 }
 
-
 // iOS Strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {
   font-weight: #{$button-ios-strong-font-weight};
 }
 
+// iOS Icon Only Button
+//
+// These styles must be after the .button-round styles
+// in order to take priority. The styles are not applied
+// only when the .button-round class exists because the
+// size changes will also improve the look of the Rectangular
+// and Soft buttons containing only an icon.
+// --------------------------------------------------
+
+::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.1em;
+}
+
+:host(.button-has-icon-only) {
+  --padding-top: 0;
+  --padding-bottom: var(--padding-top);
+  --padding-end: 15px;
+  --padding-start: var(--padding-end);
+}
+
+:host(.button-small.button-has-icon-only) {
+  --padding-end: 6px;
+}
+
+:host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
+  font-size: 1.2em;
+}
+
+:host(.button-large.button-has-icon-only) {
+  --padding-end: 19px;
+}
 
 // iOS Button Focused
 // --------------------------------------------------

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

@@ -113,23 +113,42 @@
   font-size: #{$button-md-small-font-size};
 }
 
-:host(.button-has-icon-only) {
-  --padding-top: 0;
-  --padding-bottom: 0;
-}
-
-
 // MD strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {
   font-weight: #{$button-md-strong-font-weight};
 }
 
+// MD Icon Only Button
+//
+// These styles must be after the .button-round styles
+// in order to take priority. The styles are not applied
+// only when the .button-round class exists because the
+// size changes will also improve the look of the Rectangular
+// and Soft buttons containing only an icon.
+// --------------------------------------------------
+
 ::slotted(ion-icon[slot="icon-only"]) {
   @include padding(0);
+
+  font-size: 1.4em;
 }
 
+:host(.button-has-icon-only) {
+  --padding-top: 0;
+  --padding-bottom: var(--padding-top);
+  --padding-end: 8px;
+  --padding-start: var(--padding-end);
+}
+
+:host(.button-small.button-has-icon-only) {
+  --padding-end: 4px;
+}
+
+:host(.button-large.button-has-icon-only) {
+  --padding-end: 14px;
+}
 
 // Material Design Button: Hover
 // --------------------------------------------------

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';
@@ -38,6 +38,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   @Element() el!: HTMLElement;
 
+  /**
+   * Tracks whether the button is a full
+   * circle shape.
+   */
+  @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"`.
@@ -295,6 +301,10 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     this.ionBlur.emit();
   };
 
+  private slotChanged = () => {
+    this.isCircle = this.hasIconOnly;
+  };
+
   render() {
     const mode = getIonMode(this);
     const {
@@ -374,7 +384,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`));
+      });
     });
   });
 });