fix: fixed Chip "shadow" and height issue (#4461)

Author: kamilkedzierski

src/components/Chip/Chip.tsx

@@ -295,8 +295,7 @@ const Chip = ({
     <Surface
       style={[
         styles.container,
-        isV3 &&
-          (isOutlined ? styles.md3OutlineContainer : styles.md3FlatContainer),
+        isV3 && styles.md3Container,
         !theme.isV3 && {
           elevation: elevationStyle,
         },
@@ -440,12 +439,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',

src/components/Chip/helpers.tsx

@@ -21,6 +21,11 @@ const getBorderColor = ({
   const isSelectedColor = selectedColor !== undefined;
 
   if (theme.isV3) {
+    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();
     }

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',
     });
   });
 

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",

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",