From f27303cf5af87616eb982f066ade656918b3f4e1 Mon Sep 17 00:00:00 2001
From: rishichawda <chawda.rishii@gmail.com>
Date: Fri, 28 Dec 2018 18:59:19 +0530
Subject: [PATCH 1/3] fix(chip): fix chip component design

287
---
 lib/chip/index.js          |   6 +-
 lib/chip/theme.module.scss | 279 ++++++++++++++++++++-----------------
 2 files changed, 157 insertions(+), 128 deletions(-)

diff --git a/lib/chip/index.js b/lib/chip/index.js
index c461f5c4..654c15bc 100644
--- a/lib/chip/index.js
+++ b/lib/chip/index.js
@@ -65,7 +65,11 @@ const Chip = ({
 
   return (
     <Element href="#" className={classes} {...props} onClick={Element === 'a' ? handleChipClick : () => {}}>
-      { avatar }
+      { avatar !== null ? (
+        <div className={theme['chip-avatar']}>
+          { avatar }
+        </div>
+      ) : null }
       <span className={theme.label}>{ label }</span>
       { deleteIcon }
     </Element>
diff --git a/lib/chip/theme.module.scss b/lib/chip/theme.module.scss
index cbfee38c..77b59da2 100644
--- a/lib/chip/theme.module.scss
+++ b/lib/chip/theme.module.scss
@@ -1,210 +1,235 @@
 @import '../globals/theme.scss';
-
 :local(.chip) {
-  display:  inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  height: auto;
-  border: 1px solid $secondary-white;
-  box-sizing: border-box;
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-  &.avatarMarginLeft {
-    margin-left: 0.5%;
-  }
-  .icon-cross {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    height: auto;
+    padding: 2% 0%;
+    border: 1px solid $secondary-white;
+    box-sizing: border-box;
+    overflow: none;
+    &[disabled] {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+    .icon-cross {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+:local(.chip-avatar) {
     height: 100%;
-    width: 100%;
-  }
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    * {
+      height: 100%;
+    }
+    img {
+        height: 100%;
+        width: auto;
+    }
 }
 
 :local(.clickable) {
-  cursor: pointer;
-  text-decoration: none;
+    cursor: pointer;
+    text-decoration: none;
 }
+
 :local(.label) {
-  text-transform: capitalize;
-  padding: 6px 12px;
+    text-transform: capitalize;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0.5em;
+    margin: auto;
 }
 
 :local(.smallAvatar) {
-  overflow: hidden;
-  border-radius: 50%;
-  max-height: 28px;
-  max-width: 28px;
-  object-fit: contain;
-  margin-left: -2%;
+    overflow: hidden;
+    border-radius: 50%;
+    max-height: 28px;
+    max-width: 28px;
+    object-fit: contain;
+    margin-left: -2%;
 }
+
 :local(.mediumAvatar) {
-  overflow: hidden;
-  border-radius: 50%;
-  max-height: 36px;
-  max-width: 36px;
-  object-fit: contain;
-  margin-left: -2%;
+    overflow: hidden;
+    border-radius: 50%;
+    max-height: 36px;
+    max-width: 36px;
+    object-fit: contain;
+    margin-left: -2%;
 }
+
 :local(.largeAvatar) {
-  overflow: hidden;
-  border-radius: 50%;
-  max-height: 52px;
-  max-width: 52px;
-  object-fit: contain;
-  margin-left: -2%;
+    overflow: hidden;
+    border-radius: 50%;
+    max-height: 52px;
+    max-width: 52px;
+    object-fit: contain;
+    margin-left: -2%;
 }
 
 :local(.deleteIcon) {
-  font-weight: bold;
-  padding: 2px;
-  border-radius: 50%;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  overflow: hidden;
+    font-weight: bold;
+    padding: 2px;
+    border-radius: 50%;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    overflow: hidden;
 }
 
 :local(.smallDelete) {
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  margin: 0 4px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    margin: 0 4px;
 }
+
 :local(.mediumDelete) {
-  width: 19px;
-  height: 19px;
-  font-size: 12px;
-  line-height: 16px;
-  margin: 0 6px;
+    width: 19px;
+    height: 19px;
+    font-size: 12px;
+    line-height: 16px;
+    margin: 0 6px;
 }
+
 :local(.largeDelete) {
-  width: 25px;
-  height: 25px;
-  font-size: 16px;
-  line-height: 20px;
-  margin: 0 8px;
+    width: 25px;
+    height: 25px;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0 8px;
 }
 
 :local(.small) {
-  font-size: 10px;
-  line-height: 11px;
-  border-radius: 34px;
-  padding: 0;
-  min-width: 55px;
-  height: 22px;
+    font-size: 10px;
+    line-height: 11px;
+    border-radius: 34px;
+    padding: 0;
+    min-width: 55px;
+    height: 1.8rem;
 }
 
 :local(.medium) {
-  font-size: 16px;
-  line-height: 19px;
-  border-radius: 34px;
-  padding: 0;
-  min-width: 90px;
-  height: 30px;
+    font-size: 16px;
+    line-height: 19px;
+    border-radius: 34px;
+    padding: 0;
+    min-width: 90px;
+    height: 2.2rem;
 }
 
 :local(.large) {
-  font-size: 18px;
-  line-height: 20px;
-  border-radius: 34px;
-  padding: 0;
-  min-width: 105px;
-  height: 45px;
+    font-size: 18px;
+    line-height: 20px;
+    border-radius: 34px;
+    padding: 0;
+    min-width: 105px;
+    height: 2.5rem;
 }
 
 :local(.primary) {
-  color: $original-white;
-  background-color: $secondary-violet;
-  border-color: $secondary-violet;
+    color: $original-white;
+    background-color: $secondary-violet;
+    border-color: $secondary-violet;
 }
 
 :local(.secondary) {
-  color: $original-white;
-  background-color: $secondary-grey;
-  border-color: $secondary-grey;
+    color: $original-white;
+    background-color: $secondary-grey;
+    border-color: $secondary-grey;
 }
 
 :local(.success) {
-  color: $original-white;
-  background-color: $secondary-green;
-  border-color: $secondary-green;
+    color: $original-white;
+    background-color: $secondary-green;
+    border-color: $secondary-green;
 }
 
 :local(.danger) {
-  color: $original-white;
-  background-color: $secondary-red;
-  border-color: $secondary-red;
+    color: $original-white;
+    background-color: $secondary-red;
+    border-color: $secondary-red;
 }
 
 :local(.warning) {
-  color: $secondary-black;
-  background-color: $secondary-yellow;
-  border-color: $secondary-yellow;
+    color: $secondary-black;
+    background-color: $secondary-yellow;
+    border-color: $secondary-yellow;
 }
 
 :local(.info) {
-  color: $original-white;
-  background-color: $secondary-blue;
-  border-color: $secondary-blue;
+    color: $original-white;
+    background-color: $secondary-blue;
+    border-color: $secondary-blue;
 }
 
 :local(.light) {
-  color: $secondary-black;
-  background-color: $secondary-white;
-  border-color: $secondary-white;
+    color: $secondary-black;
+    background-color: $secondary-white;
+    border-color: $secondary-white;
 }
 
 :local(.dark) {
-  color: $original-white;
-  background-color: $secondary-black;
-  border-color: $secondary-black;
+    color: $original-white;
+    background-color: $secondary-black;
+    border-color: $secondary-black;
 }
 
 /* Outlined */
+
 :local(.primaryOutlined) {
-  color: $secondary-violet;
-  background-color: $original-white;
-  border-color: $secondary-violet;
+    color: $secondary-violet;
+    background-color: $original-white;
+    border-color: $secondary-violet;
 }
 
 :local(.secondaryOutlined) {
-  color: $secondary-grey;
-  background-color: $original-white;
-  border-color: $secondary-grey;
+    color: $secondary-grey;
+    background-color: $original-white;
+    border-color: $secondary-grey;
 }
 
 :local(.successOutlined) {
-  color: $secondary-green;
-  background-color: $original-white;
-  border-color: $secondary-green;
+    color: $secondary-green;
+    background-color: $original-white;
+    border-color: $secondary-green;
 }
 
 :local(.dangerOutlined) {
-  color: $secondary-red;
-  background-color: $original-white;
-  border-color: $secondary-red;
+    color: $secondary-red;
+    background-color: $original-white;
+    border-color: $secondary-red;
 }
 
 :local(.warningOutlined) {
-  color: $secondary-yellow;
-  background-color: $secondary-black;
-  border-color: $secondary-yellow;
+    color: $secondary-yellow;
+    background-color: $secondary-black;
+    border-color: $secondary-yellow;
 }
 
 :local(.infoOutlined) {
-  color: $secondary-blue;
-  background-color: $original-white;
-  border-color: $secondary-blue;
+    color: $secondary-blue;
+    background-color: $original-white;
+    border-color: $secondary-blue;
 }
 
 :local(.lightOutlined) {
-  color: $secondary-white;
-  background-color: transparent;
-  border-color: $secondary-white;
+    color: $secondary-white;
+    background-color: transparent;
+    border-color: $secondary-white;
 }
 
 :local(.darkOutlined) {
-  color: $secondary-black;
-  background-color: $original-white;
-  border-color: $secondary-black;
-}
+    color: $secondary-black;
+    background-color: $original-white;
+    border-color: $secondary-black;
+}
\ No newline at end of file

From 679cbe7f2660f389e687b9f6065cbad8618b2be0 Mon Sep 17 00:00:00 2001
From: rishichawda <chawda.rishii@gmail.com>
Date: Wed, 2 Jan 2019 15:13:39 +0530
Subject: [PATCH 2/3] fix(chip): fix chip avatar size

---
 lib/chip/theme.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/chip/theme.module.scss b/lib/chip/theme.module.scss
index 77b59da2..6918f410 100644
--- a/lib/chip/theme.module.scss
+++ b/lib/chip/theme.module.scss
@@ -4,7 +4,6 @@
     align-items: center;
     justify-content: space-between;
     height: auto;
-    padding: 2% 0%;
     border: 1px solid $secondary-white;
     box-sizing: border-box;
     overflow: none;
@@ -20,6 +19,7 @@
 
 :local(.chip-avatar) {
     height: 100%;
+    width: 35px;
     display: flex;
     box-sizing: border-box;
     align-items: center;

From 098dba3a4fc81613020da2a49711d0e4909a5063 Mon Sep 17 00:00:00 2001
From: rishichawda <chawda.rishii@gmail.com>
Date: Wed, 2 Jan 2019 15:23:19 +0530
Subject: [PATCH 3/3] fix(chip): fix chip avatar for all sizes

---
 lib/avatar/theme.module.scss |  2 +-
 lib/chip/index.js            |  5 +++--
 lib/chip/theme.module.scss   | 12 ++----------
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/lib/avatar/theme.module.scss b/lib/avatar/theme.module.scss
index f823363c..d19e1ffe 100644
--- a/lib/avatar/theme.module.scss
+++ b/lib/avatar/theme.module.scss
@@ -21,7 +21,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
+  font-size: 150%;
   font-weight: bold;
   color: $secondary-white;
   fill: $secondary-white; // if element provided is SVG
diff --git a/lib/chip/index.js b/lib/chip/index.js
index 654c15bc..cd5a24e3 100644
--- a/lib/chip/index.js
+++ b/lib/chip/index.js
@@ -46,10 +46,11 @@ const Chip = ({
       className: classnames(
         avatarElement.props.className,
         theme[`${size}Avatar`],
+        theme['chip-avatar'],
       ),
     });
   } else if (typeof avatarElement === 'string') {
-    avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`])} />;
+    avatar = <img src={avatarElement} alt="A" className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])} />;
   }
 
   /* DeleteIcon related block */
@@ -66,7 +67,7 @@ const Chip = ({
   return (
     <Element href="#" className={classes} {...props} onClick={Element === 'a' ? handleChipClick : () => {}}>
       { avatar !== null ? (
-        <div className={theme['chip-avatar']}>
+        <div className={classnames(theme[`${size}Avatar`], theme['chip-avatar'])}>
           { avatar }
         </div>
       ) : null }
diff --git a/lib/chip/theme.module.scss b/lib/chip/theme.module.scss
index 6918f410..221c1ef5 100644
--- a/lib/chip/theme.module.scss
+++ b/lib/chip/theme.module.scss
@@ -19,7 +19,7 @@
 
 :local(.chip-avatar) {
     height: 100%;
-    width: 35px;
+    max-width: 2em;
     display: flex;
     box-sizing: border-box;
     align-items: center;
@@ -52,28 +52,20 @@
 :local(.smallAvatar) {
     overflow: hidden;
     border-radius: 50%;
-    max-height: 28px;
-    max-width: 28px;
+    max-width: 2.5em;
     object-fit: contain;
-    margin-left: -2%;
 }
 
 :local(.mediumAvatar) {
     overflow: hidden;
     border-radius: 50%;
-    max-height: 36px;
-    max-width: 36px;
     object-fit: contain;
-    margin-left: -2%;
 }
 
 :local(.largeAvatar) {
     overflow: hidden;
     border-radius: 50%;
-    max-height: 52px;
-    max-width: 52px;
     object-fit: contain;
-    margin-left: -2%;
 }
 
 :local(.deleteIcon) {