From 76b070924db9597db62f434d225b3994e4023f88 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste WATENBERG <jean-baptiste.watenberg@scality.com>
Date: Wed, 30 Dec 2020 11:04:26 +0100
Subject: [PATCH 1/2] chips: fix missing semi colon leading to missing
 background when using the component and fix warning about ignored  event
 listener

---
 src/lib/components/chips/Chips.component.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chips/Chips.component.js b/src/lib/components/chips/Chips.component.js
index e49fc4e42c..3b242d314b 100644
--- a/src/lib/components/chips/Chips.component.js
+++ b/src/lib/components/chips/Chips.component.js
@@ -77,8 +77,8 @@ const ChipsContainer = styled.div`
 ${props => {
   return css`
     ${props.variant === "warning"
-      ? `color: ${defaultTheme.blackLight}`
-      : `color: ${defaultTheme.white}`}
+      ? `color: ${defaultTheme.blackLight};`
+      : `color: ${defaultTheme.white};`}
   `;
 }}
 
@@ -116,7 +116,7 @@ export const ChipsText = styled.span`
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: ${props => (props.icon || props.onRemove ? "5px" : "5px 10px")};
+  padding: ${props => (props.icon || props.isRemovable ? "5px" : "5px 10px")};
 `;
 
 const Chips = ({
@@ -144,7 +144,7 @@ const Chips = ({
         {icon}
       </ChipsIcon>
     )}
-    <ChipsText className="sc-chips-text" icon={icon} onRemove={onRemove}>
+    <ChipsText className="sc-chips-text" icon={icon} isRemovable={!!onRemove}>
       {text}
     </ChipsText>
     {onRemove && (

From 1741ea7385366a3210fceb536948c03a032447d3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste WATENBERG <jean-baptiste.watenberg@scality.com>
Date: Wed, 30 Dec 2020 11:18:32 +0100
Subject: [PATCH 2/2] chips: update snapshot test to reflect unknown event
 handler property fix

---
 .../Chips.component.test.js.snap              | 43 ++++++++-----------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap b/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
index 563f10969c..1c7dc6b0f5 100644
--- a/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
+++ b/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
@@ -10,7 +10,7 @@ exports[`Storyshots Chips Default 1`] = `
     Basic Chip
   </h3>
   <div
-    className="sc-htoDjs oAfeq sc-chips"
+    className="sc-htoDjs iGXwyJ sc-chips"
     size="base"
   >
     <span
@@ -20,7 +20,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs kwCbVz sc-chips"
+    className="sc-htoDjs knTkHh sc-chips"
     size="base"
   >
     <span
@@ -30,7 +30,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs gktCMn sc-chips"
+    className="sc-htoDjs gKfSCM sc-chips"
     size="base"
   >
     <span
@@ -40,7 +40,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs eqomIC sc-chips"
+    className="sc-htoDjs HpTIe sc-chips"
     size="base"
   >
     <span
@@ -55,7 +55,7 @@ exports[`Storyshots Chips Default 1`] = `
     Clickable Chip
   </h3>
   <div
-    className="sc-htoDjs jherpk sc-chips"
+    className="sc-htoDjs gvzZBe sc-chips"
     onClick={[Function]}
     size="base"
   >
@@ -74,7 +74,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs jLYxwU sc-chips"
+    className="sc-htoDjs hGrNJX sc-chips"
     onClick={[Function]}
     size="base"
   >
@@ -93,7 +93,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs jgKGle sc-chips"
+    className="sc-htoDjs cDOotG sc-chips"
     onClick={[Function]}
     size="base"
   >
@@ -112,7 +112,7 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
   </div>
   <div
-    className="sc-htoDjs bWXOiM sc-chips"
+    className="sc-htoDjs jZevLT sc-chips"
     onClick={[Function]}
     size="base"
   >
@@ -136,7 +136,7 @@ exports[`Storyshots Chips Default 1`] = `
     Deletable Chip
   </h3>
   <div
-    className="sc-htoDjs oAfeq sc-chips"
+    className="sc-htoDjs iGXwyJ sc-chips"
     size="base"
   >
     <span
@@ -149,7 +149,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Deletable
     </span>
@@ -185,7 +184,7 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs kwCbVz sc-chips"
+    className="sc-htoDjs knTkHh sc-chips"
     size="base"
   >
     <span
@@ -198,7 +197,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Deletable
     </span>
@@ -234,7 +232,7 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs gktCMn sc-chips"
+    className="sc-htoDjs gKfSCM sc-chips"
     size="base"
   >
     <span
@@ -247,7 +245,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Deletable
     </span>
@@ -283,7 +280,7 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs eqomIC sc-chips"
+    className="sc-htoDjs HpTIe sc-chips"
     size="base"
   >
     <span
@@ -296,7 +293,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Deletable
     </span>
@@ -337,7 +333,7 @@ exports[`Storyshots Chips Default 1`] = `
     Different sizes
   </h3>
   <div
-    className="sc-htoDjs bZdUyG sc-chips"
+    className="sc-htoDjs fDWOsI sc-chips"
     size="smaller"
   >
     <span
@@ -350,7 +346,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Smaller
     </span>
@@ -386,7 +381,7 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs hOuyzW sc-chips"
+    className="sc-htoDjs kWxCfZ sc-chips"
     size="small"
   >
     <span
@@ -399,7 +394,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Small
     </span>
@@ -435,7 +429,7 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs gktCMn sc-chips"
+    className="sc-htoDjs gKfSCM sc-chips"
     size="base"
   >
     <span
@@ -448,7 +442,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Base
     </span>
@@ -484,7 +477,7 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs eNzVGU sc-chips"
+    className="sc-htoDjs jBLNdH sc-chips"
     size="large"
   >
     <span
@@ -497,7 +490,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Large
     </span>
@@ -533,7 +525,7 @@ exports[`Storyshots Chips Default 1`] = `
     </button>
   </div>
   <div
-    className="sc-htoDjs beIFWW sc-chips"
+    className="sc-htoDjs jcMTPC sc-chips"
     size="larger"
   >
     <span
@@ -546,7 +538,6 @@ exports[`Storyshots Chips Default 1`] = `
     </span>
     <span
       className="sc-iwsKbI jkfBoi sc-chips-text"
-      onRemove={[Function]}
     >
       Larger
     </span>