fix: add missing rippleColor in components' nested pressables (#4003)

callstack · Aug 2, 2023 · 0000bbe · 0000bbe
1 parent 9a7f40b
commit 0000bbe
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 35 deletions.
diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import type { StyleProp, ViewStyle, View, Animated } from 'react-native';
+import type {
+  StyleProp,
+  ViewStyle,
+  View,
+  Animated,
+  ColorValue,
+} from 'react-native';
 
 import color from 'color';
 import type { ThemeProp } from 'src/types';
@@ -15,6 +21,10 @@ 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.
    */
@@ -82,6 +92,7 @@ const AppbarAction = forwardRef<View, Props>(
       accessibilityLabel,
       isLeading,
       theme: themeOverrides,
+      rippleColor,
       ...rest
     }: Props,
     ref
@@ -106,6 +117,7 @@ const AppbarAction = forwardRef<View, Props>(
         accessibilityLabel={accessibilityLabel}
         animated
         ref={ref}
+        rippleColor={rippleColor}
         {...rest}
       />
     );

diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  ColorValue,
   I18nManager,
   StyleProp,
   StyleSheet,
@@ -20,14 +21,6 @@ import Text from '../Typography/Text';
 export type Props = React.ComponentPropsWithRef<typeof View> &
   PaginationControlsProps &
   PaginationDropdownProps & {
-    /**
-     * Label text to display which indicates current pagination.
-     */
-    label?: React.ReactNode;
-    /**
-     * AccessibilityLabel for `label`.
-     */
-    accessibilityLabel?: string;
     /**
      * Label text for select page dropdown to display.
      */
@@ -36,6 +29,14 @@ export type Props = React.ComponentPropsWithRef<typeof View> &
      * AccessibilityLabel for `selectPageDropdownLabel`.
      */
     selectPageDropdownAccessibilityLabel?: string;
+    /**
+     * Label text to display which indicates current pagination.
+     */
+    label?: React.ReactNode;
+    /**
+     * AccessibilityLabel for `label`.
+     */
+    accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     /**
      * @optional
@@ -56,6 +57,14 @@ 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
    */
@@ -79,6 +88,10 @@ 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
    */
@@ -91,6 +104,7 @@ const PaginationControls = ({
   onPageChange,
   showFastPaginationControls,
   theme: themeOverrides,
+  paginationControlRippleColor,
 }: PaginationControlsProps) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -109,6 +123,7 @@ const PaginationControls = ({
             />
           )}
           iconColor={textColor}
+          rippleColor={paginationControlRippleColor}
           disabled={page === 0}
           onPress={() => onPageChange(0)}
           accessibilityLabel="page-first"
@@ -125,6 +140,7 @@ const PaginationControls = ({
           />
         )}
         iconColor={textColor}
+        rippleColor={paginationControlRippleColor}
         disabled={page === 0}
         onPress={() => onPageChange(page - 1)}
         accessibilityLabel="chevron-left"
@@ -140,6 +156,7 @@ const PaginationControls = ({
           />
         )}
         iconColor={textColor}
+        rippleColor={paginationControlRippleColor}
         disabled={numberOfPages === 0 || page === numberOfPages - 1}
         onPress={() => onPageChange(page + 1)}
         accessibilityLabel="chevron-right"
@@ -156,6 +173,7 @@ const PaginationControls = ({
             />
           )}
           iconColor={textColor}
+          rippleColor={paginationControlRippleColor}
           disabled={numberOfPages === 0 || page === numberOfPages - 1}
           onPress={() => onPageChange(numberOfPages - 1)}
           accessibilityLabel="page-last"
@@ -171,6 +189,8 @@ const PaginationDropdown = ({
   numberOfItemsPerPage,
   onItemsPerPageChange,
   theme: themeOverrides,
+  selectPageDropdownRippleColor,
+  dropdownItemRippleColor,
 }: PaginationDropdownProps) => {
   const theme = useInternalTheme(themeOverrides);
   const { colors } = theme;
@@ -189,6 +209,7 @@ const PaginationDropdown = ({
           icon="menu-down"
           contentStyle={styles.contentStyle}
           theme={theme}
+          rippleColor={selectPageDropdownRippleColor}
         >
           {`${numberOfItemsPerPage}`}
         </Button>
@@ -206,6 +227,7 @@ const PaginationDropdown = ({
             onItemsPerPageChange?.(option);
             toggleSelect(false);
           }}
+          rippleColor={dropdownItemRippleColor}
           title={option}
           theme={theme}
         />
@@ -282,6 +304,8 @@ const DataTablePagination = ({
   onItemsPerPageChange,
   selectPageDropdownLabel,
   selectPageDropdownAccessibilityLabel,
+  selectPageDropdownRippleColor,
+  dropdownItemRippleColor,
   theme: themeOverrides,
   ...rest
 }: Props) => {
@@ -320,6 +344,8 @@ const DataTablePagination = ({
               numberOfItemsPerPageList={numberOfItemsPerPageList}
               numberOfItemsPerPage={numberOfItemsPerPage}
               onItemsPerPageChange={onItemsPerPageChange}
+              selectPageDropdownRippleColor={selectPageDropdownRippleColor}
+              dropdownItemRippleColor={dropdownItemRippleColor}
               theme={theme}
             />
           </View>

diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  ColorValue,
   GestureResponderEvent,
   I18nManager,
   Platform,
@@ -55,6 +56,10 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Custom color for icon, default will be derived from theme
    */
   iconColor?: string;
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
   /**
    * Callback to execute if we want the left icon to act as button.
    */
@@ -88,6 +93,11 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Custom color for the right trailering icon, default will be derived from theme
    */
   traileringIconColor?: string;
+  /**
+   * @supported Available in v5.x with theme version 3
+   * Color of the trailering icon ripple effect.
+   */
+  traileringRippleColor?: ColorValue;
   /**
    * @supported Available in v5.x with theme version 3
    * Callback to execute on the right trailering icon button press.
@@ -173,6 +183,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
     {
       icon,
       iconColor: customIconColor,
+      rippleColor: customRippleColor,
       onIconPress,
       searchAccessibilityLabel = 'search',
       clearIcon,
@@ -181,6 +192,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
       traileringIcon,
       traileringIconColor,
       traileringIconAccessibilityLabel,
+      traileringRippleColor: customTraileringRippleColor,
       onTraileringIconPress,
       right,
       mode = 'bar',
@@ -243,7 +255,11 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
       : color(textColor).alpha(0.54).rgb().string();
     const iconColor =
       customIconColor || (isV3 ? theme.colors.onSurfaceVariant : md2IconColor);
-    const rippleColor = color(textColor).alpha(0.32).rgb().string();
+    const rippleColor =
+      customRippleColor || color(textColor).alpha(0.32).rgb().string();
+    const traileringRippleColor =
+      customTraileringRippleColor ||
+      color(textColor).alpha(0.32).rgb().string();
 
     const font = isV3
       ? {
@@ -297,6 +313,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
           }
           theme={theme}
           accessibilityLabel={searchAccessibilityLabel}
+          testID={`${testID}-icon`}
         />
         <TextInput
           style={[
@@ -356,6 +373,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
                   />
                 ))
               }
+              testID={`${testID}-clear-icon`}
               accessibilityRole="button"
               theme={theme}
             />
@@ -367,6 +385,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
             borderless
             onPress={onTraileringIconPress}
             iconColor={traileringIconColor || theme.colors.onSurfaceVariant}
+            rippleColor={traileringRippleColor}
             icon={traileringIcon}
             accessibilityLabel={traileringIconAccessibilityLabel}
             testID={`${testID}-trailering-icon`}

diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  ColorValue,
   Easing,
   I18nManager,
   StyleProp,
@@ -39,6 +40,11 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Icon to display when `onIconPress` is defined. Default will be `close` icon.
    */
   icon?: IconSource;
+  /**
+   * @supported Available in v5.x with theme version 3
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
   /**
    * @supported Available in v5.x with theme version 3
    * Function to execute on icon button press. The icon button appears only when this prop is specified.
@@ -61,21 +67,25 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Text content of the Snackbar.
    */
   children: React.ReactNode;
-  /**
-   * Style for the wrapper of the snackbar
-   */
   /**
    * @supported Available in v5.x with theme version 3
    * Changes Snackbar shadow and background on iOS and Android.
    */
   elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+  /**
+   * Style for the wrapper of the snackbar
+   */
   wrapperStyle?: StyleProp<ViewStyle>;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   ref?: React.RefObject<View>;
   /**
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
 };
 
 const DURATION_SHORT = 4000;
@@ -141,6 +151,8 @@ const Snackbar = ({
   wrapperStyle,
   style,
   theme: themeOverrides,
+  rippleColor,
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -221,6 +233,7 @@ const Snackbar = ({
     style: actionStyle,
     label: actionLabel,
     onPress: onPressAction,
+    rippleColor: actionRippleColor,
     ...actionProps
   } = action || {};
 
@@ -286,6 +299,7 @@ const Snackbar = ({
           },
           style,
         ]}
+        testID={testID}
         {...(isV3 && { elevation })}
         {...rest}
       >
@@ -303,6 +317,7 @@ const Snackbar = ({
                 compact={!isV3}
                 mode="text"
                 theme={theme}
+                rippleColor={actionRippleColor}
                 {...actionProps}
               >
                 {actionLabel}
@@ -314,6 +329,7 @@ const Snackbar = ({
                 borderless
                 onPress={onIconPress}
                 iconColor={theme.colors.inverseOnSurface}
+                rippleColor={rippleColor}
                 theme={theme}
                 icon={
                   icon ||
@@ -332,6 +348,7 @@ const Snackbar = ({
                 }
                 accessibilityLabel={iconAccessibilityLabel}
                 style={styles.icon}
+                testID={`${testID}-icon`}
               />
             ) : null}
           </View>