fix: Button and IconButton TouchableRipple borderRadius (#4278)

Author: jahirfiquitiva

example/src/Examples/ButtonExample.tsx

@@ -296,6 +296,14 @@ const ButtonExample = () => {
           <Button mode="contained" onPress={() => {}} style={styles.noRadius}>
             Without radius
           </Button>
+          <Button
+            mode="contained-tonal"
+            onPress={() => {}}
+            style={{ borderRadius: styles.customRadiusAndPadding.borderRadius }}
+            contentStyle={styles.customRadiusAndPadding}
+          >
+            Custom radius and padding
+          </Button>
         </View>
 
         <View style={styles.row}>
@@ -355,6 +363,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     paddingHorizontal: 12,
     alignItems: 'center',
+    gap: 12,
   },
   button: {
     margin: 4,
@@ -386,6 +395,11 @@ const styles = StyleSheet.create({
   noRadius: {
     borderRadius: 0,
   },
+  customRadiusAndPadding: {
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
 });
 
 export default ButtonExample;

example/src/Examples/IconButtonExample.tsx

@@ -157,6 +157,31 @@ const ButtonExample = () => {
             iconColor={MD3Colors.tertiary50}
             onPress={() => {}}
           />
+          <IconButton
+            icon="eye"
+            mode="contained"
+            style={styles.slightlyRounded}
+            size={24}
+            contentStyle={{ padding: 8 }}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="heart"
+            mode="contained-tonal"
+            style={styles.differentBorderRadius}
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
+          <IconButton
+            icon="heart"
+            mode="outlined"
+            style={styles.differentBorderRadius}
+            size={24}
+            iconColor={MD3Colors.tertiary50}
+            onPress={() => {}}
+          />
           <IconButton icon="camera" size={36} onPress={() => {}} />
           <IconButton
             icon="lock"
@@ -189,6 +214,17 @@ const styles = StyleSheet.create({
   square: {
     borderRadius: 0,
   },
+  slightlyRounded: {
+    borderRadius: 4,
+    width: 48,
+    height: 48,
+  },
+  differentBorderRadius: {
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 4,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 6,
+  },
 });
 
 export default ButtonExample;

src/components/Button/Button.tsx

@@ -15,7 +15,11 @@ import {
 
 import color from 'color';
 
-import { ButtonMode, getButtonColors } from './utils';
+import {
+  ButtonMode,
+  getButtonColors,
+  getButtonTouchableRippleStyle,
+} from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $Omit, ThemeProp } from '../../types';
 import { forwardRef } from '../../utils/forwardRef';
@@ -123,7 +127,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   delayLongPress?: number;
   /**
    * Style of button's inner content.
-   * Use this prop to apply custom height and width and to set the icon on the right with `flexDirection: 'row-reverse'`.
+   * Use this prop to apply custom height and width, to set a custom padding or to set the icon on the right with `flexDirection: 'row-reverse'`.
    */
   contentStyle?: StyleProp<ViewStyle>;
   /**
@@ -356,7 +360,7 @@ const Button = (
         accessible={accessible}
         disabled={disabled}
         rippleColor={rippleColor}
-        style={touchableStyle}
+        style={getButtonTouchableRippleStyle(touchableStyle, borderWidth)}
         testID={testID}
         theme={theme}
         ref={touchableRef}

src/components/Button/utils.tsx

@@ -1,9 +1,10 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, type ViewStyle } from 'react-native';
 
 import color from 'color';
 
 import { black, white } from '../../styles/themes/v2/colors';
 import type { InternalTheme } from '../../types';
+import { splitStyles } from '../../utils/splitStyles';
 
 export type ButtonMode =
   | 'text'
@@ -230,3 +231,42 @@ export const getButtonColors = ({
     borderWidth,
   };
 };
+
+type ViewStyleBorderRadiusStyles = Partial<
+  Pick<
+    ViewStyle,
+    | 'borderBottomEndRadius'
+    | 'borderBottomLeftRadius'
+    | 'borderBottomRightRadius'
+    | 'borderBottomStartRadius'
+    | 'borderTopEndRadius'
+    | 'borderTopLeftRadius'
+    | 'borderTopRightRadius'
+    | 'borderTopStartRadius'
+    | 'borderRadius'
+  >
+>;
+export const getButtonTouchableRippleStyle = (
+  style?: ViewStyle,
+  borderWidth: number = 0
+): ViewStyleBorderRadiusStyles => {
+  if (!style) return {};
+  const touchableRippleStyle: ViewStyleBorderRadiusStyles = {};
+
+  const [, borderRadiusStyles] = splitStyles(
+    style,
+    (style) => style.startsWith('border') && style.endsWith('Radius')
+  );
+
+  (
+    Object.keys(borderRadiusStyles) as Array<keyof ViewStyleBorderRadiusStyles>
+  ).forEach((key) => {
+    const value = style[key as keyof ViewStyleBorderRadiusStyles];
+    if (typeof value === 'number') {
+      // Only subtract borderWidth if value is greater than 0
+      const radius = value > 0 ? value - borderWidth : 0;
+      touchableRippleStyle[key as keyof ViewStyleBorderRadiusStyles] = radius;
+    }
+  });
+  return touchableRippleStyle;
+};

src/components/IconButton/IconButton.tsx

@@ -67,6 +67,11 @@ export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
   accessibilityLabel?: string;
+  /**
+   * Style of button's inner content.
+   * Use this prop to apply custom height and width or to set a custom padding`.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
   /**
    * Function to execute on press.
    */
@@ -127,6 +132,7 @@ const IconButton = forwardRef<View, Props>(
       theme: themeOverrides,
       testID = 'icon-button',
       loading = false,
+      contentStyle,
       ...rest
     }: Props,
     ref
@@ -183,7 +189,7 @@ const IconButton = forwardRef<View, Props>(
           onPress={onPress}
           rippleColor={rippleColor}
           accessibilityLabel={accessibilityLabel}
-          style={[styles.touchable, { borderRadius }]}
+          style={[styles.touchable, contentStyle]}
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
           accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
           accessibilityComponentType="button"

src/components/TouchableRipple/TouchableRipple.tsx

@@ -156,7 +156,7 @@ const TouchableRipple = (
         // Get the size of the button to determine how big the ripple should be
         const size = centered
           ? // If ripple is always centered, we don't need to make it too big
-            Math.min(dimensions.width, dimensions.height) * 1.25
+            Math.min(dimensions.width, dimensions.height) * 1.5
           : // Otherwise make it twice as big so clicking on one end spreads ripple to other
             Math.max(dimensions.width, dimensions.height) * 2;
 

src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap

@@ -175,9 +175,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                       "flexGrow": 1,
                       "justifyContent": "center",
                     },
-                    {
-                      "borderRadius": 20,
-                    },
+                    undefined,
                   ],
                 ]
               }
@@ -368,9 +366,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                         "flexGrow": 1,
                         "justifyContent": "center",
                       },
-                      {
-                        "borderRadius": 20,
-                      },
+                      undefined,
                     ],
                   ]
                 }
@@ -560,9 +556,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   "flexGrow": 1,
                   "justifyContent": "center",
                 },
-                {
-                  "borderRadius": 20,
-                },
+                undefined,
               ],
             ]
           }
@@ -803,9 +797,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   "flexGrow": 1,
                   "justifyContent": "center",
                 },
-                {
-                  "borderRadius": 20,
-                },
+                undefined,
               ],
             ]
           }

src/components/__tests__/Button.test.tsx

@@ -159,6 +159,28 @@ it('renders button with custom border radius', () => {
   expect(getByTestId('custom-radius')).toHaveStyle(styles.customRadius);
 });
 
+it('renders outlined button with custom border radius', () => {
+  const { getByTestId } = render(
+    <Button
+      mode={'outlined'}
+      testID="custom-radius"
+      style={styles.customRadius}
+    >
+      Custom radius
+    </Button>
+  );
+
+  expect(getByTestId('custom-radius-container')).toHaveStyle(
+    styles.customRadius
+  );
+  expect(getByTestId('custom-radius')).toHaveStyle({
+    borderTopLeftRadius: 15, // styles.customRadius - 1px outline
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 15, // styles.customRadius - 1px outline
+  });
+});
+
 it('renders button without border radius', () => {
   const { getByTestId } = render(
     <Button testID="custom-radius" style={styles.noRadius}>

src/components/__tests__/IconButton.test.tsx

@@ -13,6 +13,9 @@ const styles = StyleSheet.create({
   square: {
     borderRadius: 0,
   },
+  slightlyRounded: {
+    borderRadius: 4,
+  },
 });
 
 it('renders icon button by default', () => {
@@ -58,7 +61,21 @@ it('renders icon button with custom border radius', () => {
     />
   );
 
-  expect(getByTestId('icon-button')).toHaveStyle({ borderRadius: 0 });
+  expect(getByTestId('icon-button-container')).toHaveStyle({ borderRadius: 0 });
+});
+
+it('renders icon button with small border radius', () => {
+  const { getByTestId } = render(
+    <IconButton
+      icon="camera"
+      testID="icon-button"
+      size={36}
+      onPress={() => {}}
+      style={styles.slightlyRounded}
+    />
+  );
+
+  expect(getByTestId('icon-button-container')).toHaveStyle({ borderRadius: 4 });
 });
 
 describe('getIconButtonColor - icon color', () => {

src/components/__tests__/__snapshots__/Button.test.tsx.snap

@@ -1902,7 +1902,7 @@ exports[`renders outlined button with mode 1`] = `
             "overflow": "hidden",
           },
           {
-            "borderRadius": 20,
+            "borderRadius": 19,
           },
         ]
       }