From 859ff45bb7906a5cd7d79589e892ed57f67b654f Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Fri, 11 May 2018 17:50:53 +0200
Subject: [PATCH] refactor(button): adds shape prop

---
 core/src/components.d.ts                      | 16 +++----
 core/src/components/button/button.tsx         |  9 ++--
 core/src/components/button/readme.md          | 30 ++++++------
 .../components/button/test/expand/index.html  |  4 +-
 .../components/button/test/round/index.html   | 48 +++++++++----------
 .../components/button/test/strong/index.html  |  2 +-
 6 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index b65b235063..59ef8a3dde 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -836,14 +836,14 @@ declare global {
        * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
        */
       'mode': Mode;
-      /**
-       * If true, activates a button with rounded corners.
-       */
-      'round': boolean;
       /**
        * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection': 'forward' | 'back';
+      /**
+       * The button shape. Possible values are: `"round"`.
+       */
+      'shape': 'round';
       /**
        * The button size. Possible values are: `"small"`, `"default"`, `"large"`.
        */
@@ -914,14 +914,14 @@ declare global {
        * Emitted when the button has focus.
        */
       'onIonFocus'?: (event: CustomEvent<void>) => void;
-      /**
-       * If true, activates a button with rounded corners.
-       */
-      'round'?: boolean;
       /**
        * When using a router, it specifies the transition direction when navigating to another page using `href`.
        */
       'routerDirection'?: 'forward' | 'back';
+      /**
+       * The button shape. Possible values are: `"round"`.
+       */
+      'shape'?: 'round';
       /**
        * The button size. Possible values are: `"small"`, `"default"`, `"large"`.
        */
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 0749630a23..e800a9ec6a 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -68,9 +68,10 @@ export class Button {
   @Prop() href?: string;
 
   /**
-   * If true, activates a button with rounded corners.
+   * The button shape.
+   * Possible values are: `"round"`.
    */
-  @Prop() round = false;
+  @Prop() shape?: 'round';
 
   /**
    * The button size.
@@ -120,14 +121,14 @@ export class Button {
   }
 
   protected render() {
-    const { buttonType, color, expand, fill, mode, round, size, strong } = this;
+    const { buttonType, color, expand, fill, mode, shape, size, strong } = this;
 
     const TagType = this.href ? 'a' : 'button';
     const buttonClasses = {
       ...getButtonClassMap(buttonType, mode),
       ...getButtonTypeClassMap(buttonType, expand, mode),
       ...getButtonTypeClassMap(buttonType, size, mode),
-      ...getButtonTypeClassMap(buttonType, round ? 'round' : undefined, mode),
+      ...getButtonTypeClassMap(buttonType, shape, mode),
       ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
       ...getColorClassMap(buttonType, color, fill, mode),
       ...getElementClassMap(this.el.classList),
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index 837b817543..9c2fa2b93d 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -95,13 +95,6 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
-#### round
-
-boolean
-
-If true, activates a button with rounded corners.
-
-
 #### routerDirection
 
 string
@@ -110,6 +103,14 @@ When using a router, it specifies the transition direction when navigating to
 another page using `href`.
 
 
+#### shape
+
+string
+
+The button shape.
+Possible values are: `"round"`.
+
+
 #### size
 
 string
@@ -194,13 +195,6 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
-#### round
-
-boolean
-
-If true, activates a button with rounded corners.
-
-
 #### router-direction
 
 string
@@ -209,6 +203,14 @@ When using a router, it specifies the transition direction when navigating to
 another page using `href`.
 
 
+#### shape
+
+string
+
+The button shape.
+Possible values are: `"round"`.
+
+
 #### size
 
 string
diff --git a/core/src/components/button/test/expand/index.html b/core/src/components/button/test/expand/index.html
index c3176d198d..166adc1a19 100644
--- a/core/src/components/button/test/expand/index.html
+++ b/core/src/components/button/test/expand/index.html
@@ -37,8 +37,8 @@
             <ion-button expand="full" color="secondary" size="large">Full + Large</ion-button>
           </p>
           <p>
-            <ion-button expand="block" round>Block + Round</ion-button>
-            <ion-button expand="full" round>Full + Round</ion-button>
+            <ion-button expand="block" shape="round">Block + Round</ion-button>
+            <ion-button expand="full" shape="round">Full + Round</ion-button>
           </p>
         </ion-content>
 
diff --git a/core/src/components/button/test/round/index.html b/core/src/components/button/test/round/index.html
index f17835b034..f332be3786 100644
--- a/core/src/components/button/test/round/index.html
+++ b/core/src/components/button/test/round/index.html
@@ -16,32 +16,32 @@
       </ion-header>
 
       <ion-content id="content" padding text-center no-bounce>
-        <ion-button round>Default</ion-button>
-        <ion-button round color="primary">Primary</ion-button>
-        <ion-button round color="secondary">Secondary</ion-button>
-        <ion-button round color="tertiary">Tertiary</ion-button>
-        <ion-button round color="success">Success</ion-button>
-        <ion-button round color="warning">Warning</ion-button>
-        <ion-button round color="danger">Danger</ion-button>
-        <ion-button round color="light">Light</ion-button>
-        <ion-button round color="medium">Medium</ion-button>
-        <ion-button round color="dark">Dark</ion-button>
+        <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" round>Default</ion-button>
-        <ion-button fill="outline" round color="primary">Primary</ion-button>
-        <ion-button fill="outline" round color="secondary">Secondary</ion-button>
-        <ion-button fill="outline" round color="tertiary">Tertiary</ion-button>
-        <ion-button fill="outline" round color="success">Success</ion-button>
-        <ion-button fill="outline" round color="warning">Warning</ion-button>
-        <ion-button fill="outline" round color="danger">Danger</ion-button>
-        <ion-button fill="outline" round color="light">Light</ion-button>
-        <ion-button fill="outline" round color="medium">Medium</ion-button>
-        <ion-button fill="outline" 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>
 
-        <ion-button round fill="clear">Clear</ion-button>
-        <ion-button round expand="block" color="danger">Block</ion-button>
-        <ion-button round expand="full" color="dark">Full</ion-button>
-        <ion-button round strong>Strong</ion-button>
+        <ion-button shape="round" fill="clear">Clear</ion-button>
+        <ion-button shape="round" expand="block" color="danger">Block</ion-button>
+        <ion-button shape="round" expand="full" color="dark">Full</ion-button>
+        <ion-button shape="round" strong>Strong</ion-button>
       </ion-content>
 
   </ion-app>
diff --git a/core/src/components/button/test/strong/index.html b/core/src/components/button/test/strong/index.html
index 1e3a4774f4..2300deef21 100644
--- a/core/src/components/button/test/strong/index.html
+++ b/core/src/components/button/test/strong/index.html
@@ -21,7 +21,7 @@
           <p><ion-button strong fill="clear">Clear</ion-button></p>
           <p><ion-button strong expand="block" color="danger">Block</ion-button></p>
           <p><ion-button strong expand="full" color="dark">Full</ion-button></p>
-          <p><ion-button strong round>Strong</ion-button></p>
+          <p><ion-button strong shape="round">Strong</ion-button></p>
         </ion-content>
 
   </ion-app>