feat(fab-button): add css border properties (#16656)

allow styling border with css custom properties fixes #16652
ionic-team · Dec 10, 2018 · 64557a7 · 64557a7
1 parent 2f63049
commit 64557a7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
@@ -45,7 +45,10 @@
   --margin-bottom: calc((#{$fab-size} - var(--height)) / 2);
   --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;
@@ -76,7 +79,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 +94,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
@@ -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;
diff --git 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>