fix: correct Chip layout

callstack · Sep 22, 2022 · 39b91a1 · 39b91a1
1 parent 2e9fdcc
commit 39b91a1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -326,7 +326,12 @@ const Chip = ({
             variant="labelLarge"
             selectable={false}
             numberOfLines={1}
-            style={[styles.text, labelTextStyle, labelSpacings, textStyle]}
+            style={[
+              isV3 ? styles.md3LabelText : styles.labelText,
+              labelTextStyle,
+              labelSpacings,
+              textStyle,
+            ]}
             ellipsizeMode={ellipsizeMode}
           >
             {children}
@@ -402,12 +407,16 @@ const styles = StyleSheet.create({
     marginRight: 8,
     padding: 0,
   },
-  text: {
+  labelText: {
     minHeight: 24,
     lineHeight: 24,
     textAlignVertical: 'center',
     marginVertical: 4,
   },
+  md3LabelText: {
+    textAlignVertical: 'center',
+    marginVertical: 6,
+  },
   avatar: {
     width: 24,
     height: 24,

diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -156,9 +156,7 @@ exports[`renders chip with close button 1`] = `
                 },
                 Array [
                   Object {
-                    "lineHeight": 24,
-                    "marginVertical": 4,
-                    "minHeight": 24,
+                    "marginVertical": 6,
                     "textAlignVertical": "center",
                   },
                   Object {
@@ -403,9 +401,7 @@ exports[`renders chip with custom close button 1`] = `
                 },
                 Array [
                   Object {
-                    "lineHeight": 24,
-                    "marginVertical": 4,
-                    "minHeight": 24,
+                    "marginVertical": 6,
                     "textAlignVertical": "center",
                   },
                   Object {
@@ -650,9 +646,7 @@ exports[`renders chip with icon 1`] = `
                 },
                 Array [
                   Object {
-                    "lineHeight": 24,
-                    "marginVertical": 4,
-                    "minHeight": 24,
+                    "marginVertical": 6,
                     "textAlignVertical": "center",
                   },
                   Object {
@@ -802,9 +796,7 @@ exports[`renders chip with onPress 1`] = `
                 },
                 Array [
                   Object {
-                    "lineHeight": 24,
-                    "marginVertical": 4,
-                    "minHeight": 24,
+                    "marginVertical": 6,
                     "textAlignVertical": "center",
                   },
                   Object {
@@ -954,9 +946,7 @@ exports[`renders outlined disabled chip 1`] = `
                 },
                 Array [
                   Object {
-                    "lineHeight": 24,
-                    "marginVertical": 4,
-                    "minHeight": 24,
+                    "marginVertical": 6,
                     "textAlignVertical": "center",
                   },
                   Object {
@@ -1141,9 +1131,7 @@ exports[`renders selected chip 1`] = `
                 },
                 Array [
                   Object {
-                    "lineHeight": 24,
-                    "marginVertical": 4,
-                    "minHeight": 24,
+                    "marginVertical": 6,
                     "textAlignVertical": "center",
                   },
                   Object {

diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -242,9 +242,7 @@ exports[`renders list item with custom description 1`] = `
                           },
                           Array [
                             Object {
-                              "lineHeight": 24,
-                              "marginVertical": 4,
-                              "minHeight": 24,
+                              "marginVertical": 6,
                               "textAlignVertical": "center",
                             },
                             Object {