feat(icon): add badge attribute to limel-icon, and only add extra p…

…adding when true Partially revert changes from fd006f8 BREAKING CHANGE: Reverts breaking change to limel-icon from v17.0.0 (fd006f8).
Lundalogik · Sep 10, 2019 · 90b0f6c · 90b0f6c
1 parent 2cadb8f
commit 90b0f6c
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"
+            />,
         ];
     }
 }