fix: add dedicated background and radius props

Author: k0ndee

docs/6.x/docs/guides/migration.md

@@ -130,6 +130,15 @@ Some components now accept explicit `testID` props for their interactable elemen
 #### New props
 
 - **`trailingIcon`** / **`onTrailingIconPress`** / **`trailingIconAccessibilityLabel`** add a trailing action (e.g. a dropdown) independent of the close button. `trailingIcon` takes precedence over `onClose`'s close icon when both are specified.
+- **`backgroundColor`** / **`borderRadius`** replace overriding the chip's background color or border radius through `style`. `style` no longer accepts `backgroundColor` or `borderRadius`.
+
+```tsx
+// Before (v5)
+<Chip onPress={() => {}} style={{ backgroundColor: 'purple', borderRadius: 16 }}>Example Chip</Chip>
+
+// After (v6)
+<Chip onPress={() => {}} backgroundColor="purple" borderRadius={16}>Example Chip</Chip>
+```
 
 ### Appbar
 

example/src/Examples/ChipExample.tsx

@@ -173,19 +173,12 @@ const ChipExample = () => {
               icon="palette"
               onPress={() => {}}
               selectedColor={customColor}
-              style={[
-                styles.chip,
-                {
-                  backgroundColor: color(customColor).alpha(0.2).rgb().string(),
-                },
-              ]}
+              backgroundColor={color(customColor).alpha(0.2).rgb().string()}
+              style={styles.chip}
             >
               Custom color
             </Chip>
-            <Chip
-              onPress={() => {}}
-              style={[styles.chip, styles.customBorderRadius]}
-            >
+            <Chip onPress={() => {}} borderRadius={16} style={styles.chip}>
               Rounded
             </Chip>
             <Chip onPress={() => {}} style={styles.fullWidthChip}>
@@ -220,9 +213,6 @@ const styles = StyleSheet.create({
     flex: 1,
     margin: 4,
   },
-  customBorderRadius: {
-    borderRadius: 16,
-  },
 });
 
 export default ChipExample;

src/components/Chip/Chip.tsx

@@ -30,13 +30,13 @@ import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-// The trailing icon's ripple is a square that stretches flush to the chip's
-// top/bottom edges, so it's sized to match the chip's height rather than a
-// fixed value of its own.
+// The trailing icon's touch target is a square flush with the chip's
+// top/bottom edges (so its ripple/state layer stays circular per MD3),
+// sized to the chip height rather than a fixed value of its own.
 const TRAILING_ICON_AREA_SIZE = ChipTokens.containerHeight;
 
-// The icon glyph is centered inside that (larger) ripple square, so its own
-// edge sits this far in from the ripple square's edge.
+// The icon glyph is centered inside that (larger) touch target, so its own
+// edge sits this far in from the touch target's edge.
 const TRAILING_ICON_INSET = (TRAILING_ICON_AREA_SIZE - ChipTokens.iconSize) / 2;
 
 // Suppresses the browser's native focus outline so only our own focus
@@ -150,11 +150,23 @@ export type Props = Omit<ViewProps, 'style'> & {
    * Whether the chip should have elevation.
    */
   elevated?: boolean;
+  /**
+   * Custom background color for the chip, overriding the default background for its mode/selected state.
+   */
+  backgroundColor?: ColorValue;
+  /**
+   * Custom border radius for the chip.
+   */
+  borderRadius?: number;
   /**
    * Style of chip's text.
    */
   textStyle?: StyleProp<TextStyle>;
-  style?: StyleProp<ViewStyle>;
+  /**
+   * Style of the chip's container. Background color and border radius should be specified via
+   * the `backgroundColor`/`borderRadius` props instead.
+   */
+  style?: StyleProp<Omit<ViewStyle, 'backgroundColor' | 'borderRadius'>>;
   /**
    * Sets additional distance outside of element in which a press can be detected.
    */
@@ -235,6 +247,8 @@ const Chip = ({
   showSelectedCheck = true,
   ellipsizeMode,
   elevated = false,
+  backgroundColor: customBackgroundColor,
+  borderRadius: borderRadiusProp,
   maxFontSizeMultiplier,
   hitSlop,
   ...rest
@@ -264,15 +278,8 @@ const Chip = ({
     []
   );
 
-  const defaultBorderRadius = theme.shapes.corner.small;
-  const {
-    backgroundColor: customBackgroundColor,
-    borderRadius = defaultBorderRadius,
-  } = StyleSheet.flatten(style) || {};
-  const focusRingBorderRadius =
-    typeof borderRadius === 'number'
-      ? borderRadius + ChipTokens.focusIndicatorOffset
-      : borderRadius;
+  const borderRadius = borderRadiusProp ?? theme.shapes.corner.small;
+  const focusRingBorderRadius = borderRadius + ChipTokens.focusIndicatorOffset;
 
   const {
     borderColor,

src/components/Chip/utils.ts

@@ -1,7 +1,7 @@
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
 import { ChipTokens } from './tokens';
-import type { InternalTheme } from '../../theme/types';
+import type { ColorRole, InternalTheme } from '../../theme/types';
 
 export type ChipAvatarProps = {
   style?: StyleProp<ViewStyle>;
@@ -80,60 +80,16 @@ const getBorderColor = ({
   return theme.colors[ChipTokens.outlineColor];
 };
 
-const getLabelColor = ({
-  theme,
-  selected,
-  disabled,
-  selectedColor,
-}: BaseProps & {
-  selectedColor?: ColorValue;
-}) => {
-  if (disabled) {
-    return theme.colors[ChipTokens.disabledColor];
-  }
-
-  if (selectedColor !== undefined) {
-    return selectedColor;
-  }
-
-  if (selected) {
-    return theme.colors[ChipTokens.selectedLabelColor];
-  }
-
-  return theme.colors[ChipTokens.labelColor];
-};
-
-const getLeadingIconColor = ({
-  theme,
-  selected,
-  disabled,
-  selectedColor,
-}: BaseProps & {
-  selectedColor?: ColorValue;
-}) => {
-  if (disabled) {
-    return theme.colors[ChipTokens.disabledColor];
-  }
-
-  if (selectedColor !== undefined) {
-    return selectedColor;
-  }
-
-  if (selected) {
-    return theme.colors[ChipTokens.selectedIconColor];
-  }
-
-  return theme.colors[ChipTokens.leadingIconColor];
-};
-
-const getTrailingIconColor = ({
-  theme,
-  selected,
-  disabled,
-  selectedColor,
-}: BaseProps & {
-  selectedColor?: ColorValue;
-}) => {
+const resolveColor = (
+  {
+    theme,
+    disabled,
+    selected,
+  }: Pick<BaseProps, 'theme' | 'disabled' | 'selected'>,
+  selectedColor: ColorValue | undefined,
+  selectedToken: ColorRole,
+  defaultToken: ColorRole
+): ColorValue => {
   if (disabled) {
     return theme.colors[ChipTokens.disabledColor];
   }
@@ -142,11 +98,7 @@ const getTrailingIconColor = ({
     return selectedColor;
   }
 
-  if (selected) {
-    return theme.colors[ChipTokens.selectedTrailingIconColor];
-  }
-
-  return theme.colors[ChipTokens.trailingIconColor];
+  return theme.colors[selected ? selectedToken : defaultToken];
 };
 
 export const getChipColors = ({
@@ -179,18 +131,24 @@ export const getChipColors = ({
       ...baseChipColorProps,
       selectedColor,
     }),
-    textColor: getLabelColor({
-      ...baseChipColorProps,
+    textColor: resolveColor(
+      baseChipColorProps,
       selectedColor,
-    }),
-    iconColor: getLeadingIconColor({
-      ...baseChipColorProps,
+      ChipTokens.selectedLabelColor,
+      ChipTokens.labelColor
+    ),
+    iconColor: resolveColor(
+      baseChipColorProps,
       selectedColor,
-    }),
-    trailingIconColor: getTrailingIconColor({
-      ...baseChipColorProps,
+      ChipTokens.selectedIconColor,
+      ChipTokens.leadingIconColor
+    ),
+    trailingIconColor: resolveColor(
+      baseChipColorProps,
       selectedColor,
-    }),
+      ChipTokens.selectedTrailingIconColor,
+      ChipTokens.trailingIconColor
+    ),
     contentOpacity,
     backgroundColor: getContainerColor({
       ...baseChipColorProps,

src/components/__tests__/Chip.test.tsx

@@ -231,7 +231,7 @@ it('overlays the close button on top of the chip so its ripple spans behind it',
 
 it('clips the ripple to custom chip border radius', async () => {
   await render(
-    <Chip onPress={() => {}} testID="rounded-chip" style={{ borderRadius: 16 }}>
+    <Chip onPress={() => {}} testID="rounded-chip" borderRadius={16}>
       Rounded chip
     </Chip>
   );