feat: add prop textStyle to Chip (callstack#954)

example/src/Examples/ChipExample.tsx

@@ -174,6 +174,13 @@ class ChipExample extends React.Component<Props> {
  >
  Outlined unselected chip with custom color
  </Chip>
+ <Chip
+ onPress={() => {}}
+ style={styles.chip}
+ textStyle={styles.tiny}
+ >
+ With custom size
+ </Chip>
  </View>
  </List.Section>
  </ScrollView>
@@ -193,6 +200,13 @@ const styles = StyleSheet.create({
  chip: {
  margin: 4,
  },
+ tiny: {
+ marginVertical: 2,
+ marginRight: 2,
+ marginLeft: 2,
+ minHeight: 19,
+ lineHeight: 19,
+ },
 });
 
 export default withTheme(ChipExample);

src/components/Chip.tsx

@@ -62,7 +62,12 @@ type Props = React.ComponentProps<typeof Surface> & {
  * Function to execute on close button press. The close button appears only when this prop is specified.
  */
  onClose?: () => void;
+ /**
+ * Style of chip's text
+ */
+ textStyle?: any;
  style?: StyleProp<ViewStyle>;
+
  /**
  * @optional
  */
@@ -139,6 +144,7 @@ class Chip extends React.Component<Props, State> {
  accessibilityLabel,
  onPress,
  onClose,
+ textStyle,
  style,
  theme,
  testID,
@@ -277,6 +283,7 @@ class Chip extends React.Component<Props, State> {
  marginRight: onClose ? 4 : 8,
  marginLeft: avatar || icon || selected ? 4 : 8,
  },
+ textStyle,
  ]}
  >
  {children}

src/components/__tests__/__snapshots__/Chip.test.js.snap

@@ -112,6 +112,7 @@ exports[`renders chip with close button 1`] = `
  "marginLeft": 4,
  "marginRight": 4,
  },
+ undefined,
  ],
  ]
  }
@@ -286,6 +287,7 @@ exports[`renders chip with icon 1`] = `
  "marginLeft": 4,
  "marginRight": 8,
  },
+ undefined,
  ],
  ]
  }
@@ -364,6 +366,7 @@ exports[`renders chip with onPress 1`] = `
  "marginLeft": 8,
  "marginRight": 8,
  },
+ undefined,
  ],
  ]
  }
@@ -446,6 +449,7 @@ exports[`renders outlined disabled chip 1`] = `
  "marginLeft": 8,
  "marginRight": 8,
  },
+ undefined,
  ],
  ]
  }
@@ -573,6 +577,7 @@ exports[`renders selected chip 1`] = `
  "marginLeft": 4,
  "marginRight": 8,
  },
+ undefined,
  ],
  ]
  }