feat: remove customRippleColor from components

* fixes #4894

Author: adrcotfas

src/components/Appbar/AppbarAction.tsx

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import type {
-  Animated,
-  ColorValue,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
+import type { Animated, StyleProp, View, ViewStyle } from 'react-native';
 
 import type { ThemeProp } from 'src/types';
 
@@ -20,10 +14,6 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
    *  Custom color for action icon.
    */
   color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Name of the icon to show.
    */
@@ -91,7 +81,6 @@ const AppbarAction = forwardRef<View, Props>(
       accessibilityLabel,
       isLeading,
       theme: themeOverrides,
-      rippleColor,
       ...rest
     }: Props,
     ref
@@ -115,7 +104,6 @@ const AppbarAction = forwardRef<View, Props>(
         accessibilityLabel={accessibilityLabel}
         animated
         ref={ref}
-        rippleColor={rippleColor}
         {...rest}
       />
     );

src/components/Button/Button.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   AccessibilityRole,
   Animated,
-  ColorValue,
   GestureResponderEvent,
   Platform,
   PressableAndroidRippleConfig,
@@ -13,8 +12,6 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
-
 import {
   ButtonMode,
   getButtonColors,
@@ -66,10 +63,6 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Custom button's text color.
    */
   textColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Whether to show a loading indicator.
    */
@@ -186,7 +179,6 @@ const Button = (
     icon,
     buttonColor: customButtonColor,
     textColor: customTextColor,
-    rippleColor: customRippleColor,
     children,
     accessibilityLabel,
     accessibilityHint,
@@ -292,9 +284,6 @@ const Button = (
       dark,
     });
 
-  const rippleColor =
-    customRippleColor || color(textColor).alpha(0.12).rgb().string();
-
   const touchableStyle = {
     ...borderRadiusStyles,
     borderRadius: borderRadiusStyles.borderRadius ?? borderRadius,
@@ -363,7 +352,6 @@ const Button = (
         accessible={accessible}
         hitSlop={hitSlop}
         disabled={disabled}
-        rippleColor={rippleColor}
         style={getButtonTouchableRippleStyle(touchableStyle, borderWidth)}
         testID={testID}
         theme={theme}

src/components/Checkbox/CheckboxItem.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
@@ -58,10 +57,6 @@ export type Props = {
    * Custom color for checkbox.
    */
   color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Additional styles for container View.
    */
@@ -148,7 +143,6 @@ const CheckboxItem = ({
   disabled,
   labelVariant = 'bodyLarge',
   labelMaxFontSizeMultiplier = 1.5,
-  rippleColor,
   background,
   hitSlop,
   ...props
@@ -187,7 +181,6 @@ const CheckboxItem = ({
       onLongPress={onLongPress}
       testID={testID}
       disabled={disabled}
-      rippleColor={rippleColor}
       theme={theme}
       background={background}
       hitSlop={hitSlop}

src/components/Chip/Chip.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   AccessibilityState,
   Animated,
-  ColorValue,
   GestureResponderEvent,
   Platform,
   PressableAndroidRippleConfig,
@@ -73,10 +72,6 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`.
    */
   showSelectedCheck?: boolean;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
   /**
    * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
    */
@@ -201,7 +196,6 @@ const Chip = ({
   theme: themeOverrides,
   testID = 'chip',
   selectedColor,
-  rippleColor: customRippleColor,
   showSelectedOverlay = false,
   showSelectedCheck = true,
   ellipsizeMode,
@@ -263,7 +257,6 @@ const Chip = ({
     borderColor,
     textColor,
     iconColor,
-    rippleColor,
     selectedBackgroundColor,
     backgroundColor,
   } = getChipColors({
@@ -273,7 +266,6 @@ const Chip = ({
     showSelectedOverlay,
     customBackgroundColor,
     disabled,
-    customRippleColor,
   });
 
   const accessibilityState: AccessibilityState = {
@@ -324,7 +316,6 @@ const Chip = ({
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
-        rippleColor={rippleColor}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
         accessibilityRole={accessibilityRole}

src/components/Chip/helpers.tsx

@@ -171,51 +171,18 @@ const getIconColor = ({
   return colors.onSecondaryContainer;
 };
 
-const getRippleColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  selectedColor,
-  selectedBackgroundColor: _selectedBackgroundColor,
-  customRippleColor,
-}: BaseProps & {
-  selectedBackgroundColor: string;
-  selectedColor?: string;
-  customRippleColor?: ColorValue;
-}) => {
-  if (customRippleColor) {
-    return customRippleColor;
-  }
-
-  const isSelectedColor = selectedColor !== undefined;
-  const textColor = getTextColor({
-    theme,
-    disabled,
-    selectedColor,
-    isOutlined,
-  });
-
-  if (isSelectedColor) {
-    return color(selectedColor).alpha(0.12).rgb().string();
-  }
-
-  return color(textColor).alpha(0.12).rgb().string();
-};
-
 export const getChipColors = ({
   isOutlined,
   theme,
   selectedColor,
   showSelectedOverlay,
   customBackgroundColor,
   disabled,
-  customRippleColor,
 }: BaseProps & {
   customBackgroundColor?: ColorValue;
   disabled?: boolean;
   showSelectedOverlay?: boolean;
   selectedColor?: string;
-  customRippleColor?: ColorValue;
 }) => {
   const baseChipColorProps = { theme, isOutlined, disabled };
 
@@ -244,12 +211,6 @@ export const getChipColors = ({
       ...baseChipColorProps,
       selectedColor,
     }),
-    rippleColor: getRippleColor({
-      ...baseChipColorProps,
-      selectedColor,
-      selectedBackgroundColor,
-      customRippleColor,
-    }),
     backgroundColor,
     selectedBackgroundColor,
   };

src/components/DataTable/DataTablePagination.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  ColorValue,
   I18nManager,
   StyleProp,
   StyleSheet,
@@ -57,14 +56,6 @@ type PaginationDropdownProps = {
    * The function to set the number of rows per page.
    */
   onItemsPerPageChange?: (numberOfItemsPerPage: number) => void;
-  /**
-   * Color of the dropdown item ripple effect.
-   */
-  dropdownItemRippleColor?: ColorValue;
-  /**
-   * Color of the select page dropdown ripple effect.
-   */
-  selectPageDropdownRippleColor?: ColorValue;
   /**
    * @optional
    */
@@ -88,10 +79,6 @@ type PaginationControlsProps = {
    * Whether to show fast forward and fast rewind buttons in pagination. False by default.
    */
   showFastPaginationControls?: boolean;
-  /**
-   * Color of the pagination control ripple effect.
-   */
-  paginationControlRippleColor?: ColorValue;
   /**
    * @optional
    */
@@ -104,7 +91,6 @@ const PaginationControls = ({
   onPageChange,
   showFastPaginationControls,
   theme: themeOverrides,
-  paginationControlRippleColor,
 }: PaginationControlsProps) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -123,7 +109,6 @@ const PaginationControls = ({
             />
           )}
           iconColor={textColor}
-          rippleColor={paginationControlRippleColor}
           disabled={page === 0}
           onPress={() => onPageChange(0)}
           accessibilityLabel="page-first"
@@ -140,7 +125,6 @@ const PaginationControls = ({
           />
         )}
         iconColor={textColor}
-        rippleColor={paginationControlRippleColor}
         disabled={page === 0}
         onPress={() => onPageChange(page - 1)}
         accessibilityLabel="chevron-left"
@@ -156,7 +140,6 @@ const PaginationControls = ({
           />
         )}
         iconColor={textColor}
-        rippleColor={paginationControlRippleColor}
         disabled={numberOfPages === 0 || page === numberOfPages - 1}
         onPress={() => onPageChange(page + 1)}
         accessibilityLabel="chevron-right"
@@ -173,7 +156,6 @@ const PaginationControls = ({
             />
           )}
           iconColor={textColor}
-          rippleColor={paginationControlRippleColor}
           disabled={numberOfPages === 0 || page === numberOfPages - 1}
           onPress={() => onPageChange(numberOfPages - 1)}
           accessibilityLabel="page-last"
@@ -189,8 +171,6 @@ const PaginationDropdown = ({
   numberOfItemsPerPage,
   onItemsPerPageChange,
   theme: themeOverrides,
-  selectPageDropdownRippleColor,
-  dropdownItemRippleColor,
 }: PaginationDropdownProps) => {
   const theme = useInternalTheme(themeOverrides);
   const { colors } = theme;
@@ -209,7 +189,6 @@ const PaginationDropdown = ({
           icon="menu-down"
           contentStyle={styles.contentStyle}
           theme={theme}
-          rippleColor={selectPageDropdownRippleColor}
         >
           {`${numberOfItemsPerPage}`}
         </Button>
@@ -227,7 +206,6 @@ const PaginationDropdown = ({
             onItemsPerPageChange?.(option);
             toggleSelect(false);
           }}
-          rippleColor={dropdownItemRippleColor}
           title={option}
           theme={theme}
         />
@@ -304,8 +282,6 @@ const DataTablePagination = ({
   onItemsPerPageChange,
   selectPageDropdownLabel,
   selectPageDropdownAccessibilityLabel,
-  selectPageDropdownRippleColor,
-  dropdownItemRippleColor,
   theme: themeOverrides,
   ...rest
 }: Props) => {
@@ -339,8 +315,6 @@ const DataTablePagination = ({
               numberOfItemsPerPageList={numberOfItemsPerPageList}
               numberOfItemsPerPage={numberOfItemsPerPage}
               onItemsPerPageChange={onItemsPerPageChange}
-              selectPageDropdownRippleColor={selectPageDropdownRippleColor}
-              dropdownItemRippleColor={dropdownItemRippleColor}
               theme={theme}
             />
           </View>