From ec0377e1d4c19c411308ab456424a57ec2aff555 Mon Sep 17 00:00:00 2001
From: Kamil Kedzierski <kamil.kedzierski@callstack.com>
Date: Wed, 24 Jul 2024 13:47:09 +0200
Subject: [PATCH 1/2] fix: fixed Chip "shadow" and height issue

---
 src/components/Chip/Chip.tsx                  |  8 ++------
 src/components/Chip/helpers.tsx               | 10 ++++++++++
 src/components/__tests__/Chip.test.tsx        |  9 +++------
 .../__snapshots__/Chip.test.tsx.snap          | 20 +++++++++----------
 .../__snapshots__/ListItem.test.tsx.snap      |  4 ++--
 5 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 9794fadb4b..5e75c102e4 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -294,8 +294,7 @@ const Chip = ({
     <Surface
       style={[
         styles.container,
-        isV3 &&
-          (isOutlined ? styles.md3OutlineContainer : styles.md3FlatContainer),
+        isV3 && styles.md3Container,
         !theme.isV3 && {
           elevation: elevationStyle,
         },
@@ -439,12 +438,9 @@ const styles = StyleSheet.create({
     borderStyle: 'solid',
     flexDirection: Platform.select({ default: 'column', web: 'row' }),
   },
-  md3OutlineContainer: {
+  md3Container: {
     borderWidth: 1,
   },
-  md3FlatContainer: {
-    borderWidth: 0,
-  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx
index 76ec8b4479..89cda7741a 100644
--- a/src/components/Chip/helpers.tsx
+++ b/src/components/Chip/helpers.tsx
@@ -21,6 +21,16 @@ const getBorderColor = ({
   const isSelectedColor = selectedColor !== undefined;
 
   if (theme.isV3) {
+    if (disabled && !isOutlined) {
+      // If the Chip mode is "flat", and disabled set border color to transparent
+      return 'transparent';
+    }
+
+    if (!isOutlined) {
+      // If the Chip mode is "flat", set border color to transparent
+      return 'transparent';
+    }
+
     if (disabled) {
       return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
     }
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
index 5fe5416810..acb5a395b7 100644
--- a/src/components/__tests__/Chip.test.tsx
+++ b/src/components/__tests__/Chip.test.tsx
@@ -669,10 +669,7 @@ describe('getChipColor - border color', () => {
         isOutlined: false,
       })
     ).toMatchObject({
-      borderColor: color(getTheme().colors.onSurfaceVariant)
-        .alpha(0.12)
-        .rgb()
-        .string(),
+      borderColor: 'transparent',
     });
   });
 
@@ -684,7 +681,7 @@ describe('getChipColor - border color', () => {
         isOutlined: false,
       })
     ).toMatchObject({
-      borderColor: color('purple').alpha(0.29).rgb().string(),
+      borderColor: 'transparent',
     });
   });
 
@@ -695,7 +692,7 @@ describe('getChipColor - border color', () => {
         isOutlined: false,
       })
     ).toMatchObject({
-      borderColor: getTheme().colors.outline,
+      borderColor: 'transparent',
     });
   });
 
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 492819a95c..ee554a9b8d 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -23,10 +23,10 @@ exports[`renders chip with close button 1`] = `
     style={
       {
         "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 0,
+        "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
         "shadowColor": "#000",
@@ -332,10 +332,10 @@ exports[`renders chip with custom close button 1`] = `
     style={
       {
         "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 0,
+        "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
         "shadowColor": "#000",
@@ -641,10 +641,10 @@ exports[`renders chip with icon 1`] = `
     style={
       {
         "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 0,
+        "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
         "shadowColor": "#000",
@@ -850,10 +850,10 @@ exports[`renders chip with onPress 1`] = `
     style={
       {
         "backgroundColor": "rgba(232, 222, 248, 1)",
-        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 0,
+        "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
         "shadowColor": "#000",
@@ -1164,10 +1164,10 @@ exports[`renders selected chip 1`] = `
     style={
       {
         "backgroundColor": "rgb(232, 222, 248)",
-        "borderColor": "rgba(121, 116, 126, 1)",
+        "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
-        "borderWidth": 0,
+        "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
         "shadowColor": "#000",
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index 514fc61c78..1333d5931e 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -136,10 +136,10 @@ exports[`renders list item with custom description 1`] = `
               style={
                 {
                   "backgroundColor": "rgba(232, 222, 248, 1)",
-                  "borderColor": "rgba(121, 116, 126, 1)",
+                  "borderColor": "transparent",
                   "borderRadius": 8,
                   "borderStyle": "solid",
-                  "borderWidth": 0,
+                  "borderWidth": 1,
                   "flex": undefined,
                   "flexDirection": "column",
                   "shadowColor": "#000",

From 9b172da5edd62cc43394f1c4d32693e8e08cfef7 Mon Sep 17 00:00:00 2001
From: Kamil Kedzierski <kamil.kedzierski@callstack.com>
Date: Wed, 24 Jul 2024 17:16:29 +0200
Subject: [PATCH 2/2] fix: combined conditions into one

---
 src/components/Chip/helpers.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx
index 89cda7741a..3ac222e2ad 100644
--- a/src/components/Chip/helpers.tsx
+++ b/src/components/Chip/helpers.tsx
@@ -21,11 +21,6 @@ const getBorderColor = ({
   const isSelectedColor = selectedColor !== undefined;
 
   if (theme.isV3) {
-    if (disabled && !isOutlined) {
-      // If the Chip mode is "flat", and disabled set border color to transparent
-      return 'transparent';
-    }
-
     if (!isOutlined) {
       // If the Chip mode is "flat", set border color to transparent
       return 'transparent';