From ae0ecccd2e7131ea69bdc43ca528c668e48478f1 Mon Sep 17 00:00:00 2001
From: Abdelaziz Bennouna <tellibus@gmail.com>
Date: Thu, 25 Apr 2019 16:32:23 +0100
Subject: [PATCH] fix(button): apply round property to button sizes in iOS
 (#18125)

fixes #18108
---
 core/src/components/button/button.ios.scss    | 24 +++++++++----------
 .../button/test/standalone/index.html         |  7 ++++++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 19d5876fa4..139c3bd68f 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -71,18 +71,6 @@
 }
 
 
-// iOS Round Button
-// --------------------------------------------------
-
-:host(.button-round) {
-  --border-radius: #{$button-ios-round-border-radius};
-  --padding-top: #{$button-ios-round-padding-top};
-  --padding-start: #{$button-ios-round-padding-start};
-  --padding-end: #{$button-ios-round-padding-end};
-  --padding-bottom: #{$button-ios-round-padding-bottom};
-}
-
-
 // iOS Button Sizes
 // --------------------------------------------------
 
@@ -111,6 +99,18 @@
 }
 
 
+// iOS Round Button
+// --------------------------------------------------
+
+:host(.button-round) {
+  --border-radius: #{$button-ios-round-border-radius};
+  --padding-top: #{$button-ios-round-padding-top};
+  --padding-start: #{$button-ios-round-padding-start};
+  --padding-end: #{$button-ios-round-padding-end};
+  --padding-bottom: #{$button-ios-round-padding-bottom};
+}
+
+
 // iOS strong Button
 // --------------------------------------------------
 
diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html
index ab15a70cd0..faf12bf832 100644
--- a/core/src/components/button/test/standalone/index.html
+++ b/core/src/components/button/test/standalone/index.html
@@ -24,6 +24,13 @@
     <ion-button fill="clear" expand="block">Block Clear</ion-button>
   </p>
 
+  <h3>Round button combinations</h3>
+  <p>
+    <ion-button shape="round" size="small">Round & Small</ion-button>
+    <ion-button shape="round" size="large">Round & Large</ion-button>
+    <ion-button shape="round" fill="outline">Round & Outline</ion-button>
+  </p>
+
   <h3>Colors</h3>
   <p>
     <ion-button color="primary">Primary</ion-button>