From 90b0f6c2546f38fa9513566dc297adf4ca1ebcb8 Mon Sep 17 00:00:00 2001
From: Adrian Schmidt <adrian.schmidt@lime.tech>
Date: Wed, 27 Mar 2019 21:43:09 +0100
Subject: [PATCH] feat(icon): add `badge` attribute to limel-icon, and only add
 extra padding when true

Partially revert changes from fd006f8c6aa3df75bb7edd73c640ec0e3b614bee

BREAKING CHANGE: Reverts breaking change to limel-icon from v17.0.0 (fd006f8).
---
 src/components/icon/icon.scss         | 39 +++++++++++++++++++--------
 src/components/icon/icon.tsx          |  7 +++++
 src/components/list/list-renderer.tsx |  1 +
 src/components/list/list.scss         |  2 --
 src/examples/icon/icon-background.tsx | 17 +++++++++---
 5 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index b78aed18b8..537bf9a26d 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -20,32 +20,49 @@
 }
 
 :host([size="x-small"]) {
-    height: pxToRem(23);
-    width: pxToRem(23);
+    height: pxToRem(15) !important;
+    width: pxToRem(15) !important;
+}
+:host([size="small"]) {
+    height: pxToRem(20) !important;
+    width: pxToRem(20) !important;
+}
+:host([size="medium"]) {
+    height: pxToRem(25) !important;
+    width: pxToRem(25) !important;
+}
+:host([size="large"]) {
+    height: pxToRem(30) !important;
+    width: pxToRem(30) !important;
+}
+
+:host([badge][size="x-small"]) {
+    height: pxToRem(23) !important;
+    width: pxToRem(23) !important;
 
     > div {
         margin: pxToRem(4);
     }
 }
-:host([size="small"]) {
-    height: pxToRem(30);
-    width: pxToRem(30);
+:host([badge][size="small"]) {
+    height: pxToRem(30) !important;
+    width: pxToRem(30) !important;
 
     > div {
         margin: pxToRem(5);
     }
 }
-:host([size="medium"]) {
-    height: pxToRem(41);
-    width: pxToRem(41);
+:host([badge][size="medium"]) {
+    height: pxToRem(41) !important;
+    width: pxToRem(41) !important;
 
     > div {
         margin: pxToRem(8);
     }
 }
-:host([size="large"]) {
-    height: pxToRem(46);
-    width: pxToRem(46);
+:host([badge][size="large"]) {
+    height: pxToRem(46) !important;
+    width: pxToRem(46) !important;
 
     > div {
         margin: pxToRem(8);
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 0d8554dc2d..68e7775d69 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -21,6 +21,13 @@ export class Icon {
     @Prop({ reflectToAttr: true })
     public name: string;
 
+    /**
+     * Set to `true` to give the icon a round background with some padding.
+     * Only works when the `size` attribute is also set.
+     */
+    @Prop({ reflectToAttr: true })
+    public badge: boolean;
+
     @Prop({ context: 'config' })
     public config: Config;
 
diff --git a/src/components/list/list-renderer.tsx b/src/components/list/list-renderer.tsx
index 150a6335f5..1434bb0a98 100644
--- a/src/components/list/list-renderer.tsx
+++ b/src/components/list/list-renderer.tsx
@@ -121,6 +121,7 @@ export class ListRenderer {
 
         return (
             <limel-icon
+                badge={config.badgeIcons}
                 class="mdc-list-item__graphic"
                 name={item.icon}
                 style={style}
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index 89b03ec45d..d6b5c9608a 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -21,8 +21,6 @@
         limel-icon {
             background-color: var(--icon-background-color, var(--lime-light-grey));
             color: white;
-            height: pxToRem(30);
-            width: pxToRem(30);
         }
     }
 }
diff --git a/src/examples/icon/icon-background.tsx b/src/examples/icon/icon-background.tsx
index f0548536a0..38d509567c 100644
--- a/src/examples/icon/icon-background.tsx
+++ b/src/examples/icon/icon-background.tsx
@@ -8,14 +8,25 @@ import { Component } from '@stencil/core';
 export class IconBackgroundExample {
     public render() {
         return [
-            <limel-icon class="company" name="organization" size="x-small" />,
             <limel-icon
+                badge={true}
+                class="company"
+                name="organization"
+                size="x-small"
+            />,
+            <limel-icon
+                badge={true}
                 class="person"
                 name="user_group_man_man"
                 size="small"
             />,
-            <limel-icon class="deal" name="money" size="medium" />,
-            <limel-icon class="campaign" name="megaphone" size="large" />,
+            <limel-icon badge={true} class="deal" name="money" size="medium" />,
+            <limel-icon
+                badge={true}
+                class="campaign"
+                name="megaphone"
+                size="large"
+            />,
         ];
     }
 }