From 4c3e7d1874e1007f979432f894cd1855291d7d29 Mon Sep 17 00:00:00 2001
From: Nana Mochihara <nana.mochihara@axis.com>
Date: Thu, 11 Mar 2021 10:29:59 +0100
Subject: [PATCH] fix(chip): prevent to shrink icon in Chip

Icon in Chip component shouldn't shrink even if there is not enough space.
Also change icon color to darker color.
---
 .../src/Chip/__snapshots__/index.test.tsx.snap  | 10 +++++++---
 packages/core/src/Chip/index.tsx                | 17 +++++++++--------
 .../__snapshots__/MultiSelect.test.tsx.snap     |  7 +++++++
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/Chip/__snapshots__/index.test.tsx.snap b/packages/core/src/Chip/__snapshots__/index.test.tsx.snap
index ba3ad1d5..006ec499 100644
--- a/packages/core/src/Chip/__snapshots__/index.test.tsx.snap
+++ b/packages/core/src/Chip/__snapshots__/index.test.tsx.snap
@@ -416,9 +416,13 @@ exports[`Chips with icon 1`] = `
 }
 
 .c4 {
-  width: 24px;
-  color: rgb(122,122,122);
-  margin-left: -8px;
+  -webkit-flex: 0 0 min-content;
+  -ms-flex: 0 0 min-content;
+  flex: 0 0 min-content;
+  overflow: visible;
+  margin-left: -4px;
+  margin-right: 4px;
+  color: rgb(82,82,82);
 }
 
 .c7 {
diff --git a/packages/core/src/Chip/index.tsx b/packages/core/src/Chip/index.tsx
index ed28b3ca..663129d9 100644
--- a/packages/core/src/Chip/index.tsx
+++ b/packages/core/src/Chip/index.tsx
@@ -5,15 +5,17 @@ import styled from 'styled-components'
 
 import { CloseIcon } from 'practical-react-components-icons'
 
-import { spacing, componentSize } from '../designparams'
+import { spacing } from '../designparams'
 import { ClickableIcon, Icon, IconType } from '../Icon'
 import { Typography } from '../Typography'
 import { BaseChip, BaseChipProps } from './BaseChip'
 
-const ChipIcon = styled(Icon)`
-  width: ${componentSize.mini};
-  color: ${({ theme }) => theme.color.text05()};
-  margin-left: -${spacing.medium};
+const ChipIcon = styled(Icon).attrs({ size: 'small' })`
+  flex: 0 0 min-content;
+  overflow: visible;
+  margin-left: -${spacing.small};
+  margin-right: ${spacing.small};
+  color: ${({ theme }) => theme.color.text03()};
 `
 
 const ChipRemoveIcon = styled(ClickableIcon).attrs({
@@ -22,6 +24,7 @@ const ChipRemoveIcon = styled(ClickableIcon).attrs({
   icon: CloseIcon,
 })`
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: ${spacing.small};
 `
 
@@ -47,9 +50,7 @@ export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
     const component = useMemo(() => {
       return (
         <>
-          {!error && icon !== undefined ? (
-            <ChipIcon icon={icon} size="small" />
-          ) : null}
+          {!error && icon !== undefined ? <ChipIcon icon={icon} /> : null}
           <Typography variant="chip-tag-text">{text}</Typography>
           {onRemove ? <ChipRemoveIcon onClick={onRemove} /> : null}
         </>
diff --git a/packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap b/packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap
index 1f62b423..ee4e290c 100644
--- a/packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap
+++ b/packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap
@@ -204,6 +204,7 @@ exports[`Select Direction 1`] = `
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: 4px;
 }
 
@@ -603,6 +604,7 @@ exports[`Select Direction 2`] = `
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: 4px;
 }
 
@@ -1009,6 +1011,7 @@ exports[`Select Other 1`] = `
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: 4px;
 }
 
@@ -1422,6 +1425,7 @@ exports[`Select Other 2`] = `
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: 4px;
 }
 
@@ -1821,6 +1825,7 @@ exports[`Select Width 1`] = `
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: 4px;
 }
 
@@ -2220,6 +2225,7 @@ exports[`Select Width 2`] = `
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: 4px;
 }
 
@@ -2651,6 +2657,7 @@ exports[`Select Width 3`] = `
   -webkit-flex: 0 0 min-content;
   -ms-flex: 0 0 min-content;
   flex: 0 0 min-content;
+  overflow: visible;
   margin-left: 4px;
 }