fix: correct border radius in icon button and card components (#3565)

Author: lukewalczak

example/src/Examples/IconButtonExample.tsx

@@ -123,6 +123,14 @@ const ButtonExample = () => {
             iconColor={MD3Colors.tertiary50}
             onPress={() => {}}
           />
+          <IconButton
+            icon="eye"
+            mode="contained"
+            style={styles.square}
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
           <IconButton icon="camera" size={36} onPress={() => {}} />
           <IconButton
             icon="lock"
@@ -151,6 +159,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     paddingHorizontal: 12,
   },
+  square: {
+    borderRadius: 0,
+  },
 });
 
 export default ButtonExample;

src/components/Card/Card.tsx

@@ -134,7 +134,7 @@ const Card = ({
   children,
   style,
   theme,
-  testID,
+  testID = 'card',
   accessible,
   ...rest
 }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => {
@@ -224,7 +224,9 @@ const Card = ({
     mode: cardMode,
   });
 
-  const borderRadius = (isV3 ? 3 : 1) * roundness;
+  const { borderRadius = (isV3 ? 3 : 1) * roundness } = (StyleSheet.flatten(
+    style
+  ) || {}) as ViewStyle;
 
   return (
     <Surface
@@ -249,6 +251,7 @@ const Card = ({
       {isMode('outlined') && (
         <View
           pointerEvents="none"
+          testID={`${testID}-outline`}
           style={[
             {
               borderRadius,

src/components/IconButton/IconButton.tsx

@@ -147,9 +147,14 @@ const IconButton = React.forwardRef<View, Props>(
 
     const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
 
+    const {
+      borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0,
+      borderRadius = buttonSize / 2,
+    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+
     const borderStyles = {
-      borderWidth: isV3 && mode === 'outlined' && !selected ? 1 : 0,
-      borderRadius: buttonSize / 2,
+      borderWidth,
+      borderRadius,
       borderColor,
     };
 
@@ -177,10 +182,7 @@ const IconButton = React.forwardRef<View, Props>(
           onPress={onPress}
           rippleColor={rippleColor}
           accessibilityLabel={accessibilityLabel}
-          style={[
-            styles.touchable,
-            { borderRadius: borderStyles.borderRadius },
-          ]}
+          style={[styles.touchable, { borderRadius }]}
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
           accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
           accessibilityComponentType="button"

src/components/__tests__/Card/Card.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 import color from 'color';
@@ -10,13 +11,34 @@ import Button from '../../Button/Button';
 import Card from '../../Card/Card';
 import { getCardColors, getCardCoverStyle } from '../../Card/utils';
 
+const styles = StyleSheet.create({
+  customBorderRadius: {
+    borderRadius: 32,
+  },
+});
+
 describe('Card', () => {
   it('renders an outlined card', () => {
     const tree = renderer.create(<Card mode="outlined" />).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders an outlined card with custom border radius and color', () => {
+    const { getByTestId } = render(
+      <Card
+        mode="outlined"
+        theme={{ colors: { outline: 'purple' } }}
+        style={styles.customBorderRadius}
+      />
+    );
+
+    expect(getByTestId('card-outline')).toHaveStyle({
+      borderRadius: 32,
+      borderColor: 'purple',
+    });
+  });
+
   it('renders with a custom theme', () => {
     const { getByLabelText } = render(
       <Card

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

@@ -62,6 +62,7 @@ exports[`Card renders an outlined card 1`] = `
             },
           ]
         }
+        testID="card-outline"
       />
       <View
         accessibilityState={
@@ -83,6 +84,7 @@ exports[`Card renders an outlined card 1`] = `
             "flexShrink": 1,
           }
         }
+        testID="card"
       />
     </View>
   </View>

src/components/__tests__/IconButton.test.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { StyleSheet } from 'react-native';
 
+import { render } from '@testing-library/react-native';
 import color from 'color';
 import renderer from 'react-test-renderer';
 
@@ -8,6 +10,12 @@ import { pink500 } from '../../styles/themes/v2/colors';
 import IconButton from '../IconButton/IconButton.tsx';
 import { getIconButtonColor } from '../IconButton/utils';
 
+const styles = StyleSheet.create({
+  square: {
+    borderRadius: 0,
+  },
+});
+
 it('renders icon button by default', () => {
   const tree = renderer.create(<IconButton icon="camera" />).toJSON();
 
@@ -40,6 +48,20 @@ it('renders icon change animated', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders icon button with custom border radius', () => {
+  const { getByTestId } = render(
+    <IconButton
+      icon="camera"
+      testID="icon-button"
+      size={36}
+      onPress={() => {}}
+      style={styles.square}
+    />
+  );
+
+  expect(getByTestId('icon-button')).toHaveStyle({ borderRadius: 0 });
+});
+
 describe('getIconButtonColor - icon color', () => {
   it('should return custom icon color', () => {
     expect(

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

@@ -99,7 +99,7 @@ exports[`renders disabled toggle button 1`] = `
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 20,
+                "borderRadius": 4,
               },
             ],
           ]
@@ -240,7 +240,7 @@ exports[`renders toggle button 1`] = `
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 20,
+                "borderRadius": 4,
               },
             ],
           ]
@@ -387,7 +387,7 @@ exports[`renders unchecked toggle button 1`] = `
                 "justifyContent": "center",
               },
               Object {
-                "borderRadius": 20,
+                "borderRadius": 4,
               },
             ],
           ]