fix(badge): add custom properties and make sure color works properly

references #14850
ionic-team · Aug 8, 2018 · 9beca98 · 9beca98
1 parent 8fef263
commit 9beca98
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 6 deletions.
diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.scss
@@ -4,18 +4,31 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
+  /**
+   * @prop --background: Background of the badge
+   * @prop --color: Text color of the badge
+   *
+   * @prop --padding-top: Padding top of the badge
+   * @prop --padding-end: Padding end of the badge
+   * @prop --padding-bottom: Padding bottom of the badge
+   * @prop --padding-start: Padding start of the badge
+   */
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+  --padding-top: #{$badge-padding-top};
+  --padding-end: #{$badge-padding-end};
+  --padding-bottom: #{$badge-padding-bottom};
+  --padding-start: #{$badge-padding-start};
 
   @include font-smoothing();
-  @include padding($badge-padding-top, $badge-padding-end, $badge-padding-bottom, $badge-padding-start);
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   display: inline-block;
 
   min-width: $badge-min-width;
 
-  background-color: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: var(--background);
+  color: var(--color);
 
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
@@ -30,6 +43,11 @@
   vertical-align: baseline;
 }
 
+:host(.ion-color) {
+  background: #{current-color(base)};
+  color: #{current-color(contrast)};
+}
+
 :host(:empty) {
   display: none;
 }
diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md
@@ -44,6 +44,17 @@ The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
 
 
+## CSS Custom Properties
+
+| Name               | Description                 |
+| ------------------ | --------------------------- |
+| `--background`     | Background of the badge     |
+| `--color`          | Text color of the badge     |
+| `--padding-bottom` | Padding bottom of the badge |
+| `--padding-end`    | Padding end of the badge    |
+| `--padding-start`  | Padding start of the badge  |
+| `--padding-top`    | Padding top of the badge    |
+
 
 ----------------------------------------------
 

diff --git a/core/src/components/badge/test/standalone/index.html b/core/src/components/badge/test/standalone/index.html
@@ -9,10 +9,14 @@
   <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
-<body>
+<body padding>
+  <h1>Default</h1>
+
   <!-- Default -->
   <ion-badge>99</ion-badge>
 
+  <hr>
+
   <!-- Colors -->
   <ion-badge color="primary">11</ion-badge>
   <ion-badge color="secondary">22</ion-badge>
@@ -23,5 +27,44 @@
   <ion-badge color="light">77</ion-badge>
   <ion-badge color="medium">88</ion-badge>
   <ion-badge color="dark">99</ion-badge>
+
+  <h1>Custom</h1>
+
+  <!-- Custom Font -->
+  <ion-badge class="wide">wide</ion-badge>
+  <ion-badge class="large">large</ion-badge>
+  <ion-badge class="round">round</ion-badge>
+
+  <!-- Custom Colors -->
+  <ion-badge class="custom">custom</ion-badge>
+  <ion-badge color="secondary" class="custom">custom w/ secondary</ion-badge>
+
+  <style>
+    ion-badge {
+      --background: blue;
+    }
+
+    .wide {
+      min-width: 80px;
+    }
+
+    .large {
+      font-weight: normal;
+      font-size: 24px;
+    }
+
+    .round {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      vertical-align: middle;
+      line-height: 50px;
+    }
+
+    .custom {
+      --background: lightpink;
+      --color: #222;
+    }
+  </style>
 </body>
 </html>