From 224553012f6bb20714ebda4e9dfbc37d30eef1d2 Mon Sep 17 00:00:00 2001
From: Gustav Bylund <maistho@gmail.com>
Date: Mon, 10 Dec 2018 14:21:04 +0100
Subject: [PATCH 1/3] fix(fab-button): allow styling border with css custom
 properties

fixes #16652
---
 core/src/components/fab-button/fab-button.scss      | 7 +++++--
 core/src/components/fab-button/fab-button.vars.scss | 3 +++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index e7214a0ec5a..ba3f8664310 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -45,6 +45,7 @@
   --margin-bottom: calc((#{$fab-size} - var(--height)) / 2);
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
+  --border-radius: #{$fab-border-radius};
 
   display: block;
 
@@ -76,7 +77,7 @@
 }
 
 .button-native {
-  @include border-radius(50%);
+  @include border-radius(var(--border-radius));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include text-inherit();
@@ -91,7 +92,9 @@
 
   transition: var(--transition);
 
-  border: 0;
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
 
   outline: none;
 
diff --git a/core/src/components/fab-button/fab-button.vars.scss b/core/src/components/fab-button/fab-button.vars.scss
index 7f8286dd916..a8482b834f0 100755
--- a/core/src/components/fab-button/fab-button.vars.scss
+++ b/core/src/components/fab-button/fab-button.vars.scss
@@ -8,3 +8,6 @@ $fab-size:                              56px !default;
 
 /// @prop - Width and height of the mini FAB button
 $fab-mini-size:                         40px !default;
+
+/// @prop - Border radius of the FAB button
+$fab-border-radius:                     50% !default;

From 7261c34e7e59265f46ee7c4d900da63d0efbd48a Mon Sep 17 00:00:00 2001
From: Gustav Bylund <maistho@gmail.com>
Date: Mon, 10 Dec 2018 14:21:38 +0100
Subject: [PATCH 2/3] test(fab-button): add tests for border custom properties

---
 .../components/fab-button/test/standalone/index.html  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/core/src/components/fab-button/test/standalone/index.html b/core/src/components/fab-button/test/standalone/index.html
index 4a9d103c80e..dbfcb6f93a4 100644
--- a/core/src/components/fab-button/test/standalone/index.html
+++ b/core/src/components/fab-button/test/standalone/index.html
@@ -65,6 +65,10 @@ <h3>Custom</h3>
   <ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border activated">Border</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border activated"><ion-icon name="star"></ion-icon></ion-fab-button>
 
   <style>
     ion-fab-button {
@@ -92,6 +96,13 @@ <h3>Custom</h3>
       --background: #add8e6;
       --background-activated: #7cb2c4;
     }
+
+    .custom-border {
+      --border-radius: 10px;
+      --border-width: 2px;
+      --border-style: dashed;
+      --border-color: red;
+    }
   </style>
 </body>
 </html>

From fc26969ef13e782c4417be0785d1a37578ac57f9 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.valladolid@gmail.com>
Date: Mon, 10 Dec 2018 21:08:25 +0100
Subject: [PATCH 3/3] Update core/src/components/fab-button/fab-button.scss

Co-Authored-By: Maistho <maistho@gmail.com>
---
 core/src/components/fab-button/fab-button.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index ba3f8664310..4ded1226c8c 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -46,7 +46,9 @@
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
   --border-radius: #{$fab-border-radius};
-
+  --border-width: 0;
+  --border-style: none;
+  --border-color: initial;
   display: block;
 
   font-size: 14px;