Skip to content

Commit 0000bbe

Browse files
lukewalczaklukewalczak
authored
fix: add missing rippleColor in components' nested pressables (#4003)
1 parent 9a7f40b commit 0000bbe

File tree

13 files changed

+207
-35
lines changed

13 files changed

+207
-35
lines changed

‎src/components/Appbar/AppbarAction.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import * as React from 'react';
2-
import type { StyleProp, ViewStyle, View, Animated } from 'react-native';
2+
import type {
3+
StyleProp,
4+
ViewStyle,
5+
View,
6+
Animated,
7+
ColorValue,
8+
} from 'react-native';
39

410
import color from 'color';
511
import type { ThemeProp } from 'src/types';
@@ -15,6 +21,10 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
1521
* Custom color for action icon.
1622
*/
1723
color?: string;
24+
/**
25+
* Color of the ripple effect.
26+
*/
27+
rippleColor?: ColorValue;
1828
/**
1929
* Name of the icon to show.
2030
*/
@@ -82,6 +92,7 @@ const AppbarAction = forwardRef<View, Props>(
8292
accessibilityLabel,
8393
isLeading,
8494
theme: themeOverrides,
95+
rippleColor,
8596
...rest
8697
}: Props,
8798
ref
@@ -106,6 +117,7 @@ const AppbarAction = forwardRef<View, Props>(
106117
accessibilityLabel={accessibilityLabel}
107118
animated
108119
ref={ref}
120+
rippleColor={rippleColor}
109121
{...rest}
110122
/>
111123
);

‎src/components/DataTable/DataTablePagination.tsx‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import {
3+
ColorValue,
34
I18nManager,
45
StyleProp,
56
StyleSheet,
@@ -20,14 +21,6 @@ import Text from '../Typography/Text';
2021
export type Props = React.ComponentPropsWithRef<typeof View> &
2122
PaginationControlsProps &
2223
PaginationDropdownProps & {
23-
/**
24-
* Label text to display which indicates current pagination.
25-
*/
26-
label?: React.ReactNode;
27-
/**
28-
* AccessibilityLabel for `label`.
29-
*/
30-
accessibilityLabel?: string;
3124
/**
3225
* Label text for select page dropdown to display.
3326
*/
@@ -36,6 +29,14 @@ export type Props = React.ComponentPropsWithRef<typeof View> &
3629
* AccessibilityLabel for `selectPageDropdownLabel`.
3730
*/
3831
selectPageDropdownAccessibilityLabel?: string;
32+
/**
33+
* Label text to display which indicates current pagination.
34+
*/
35+
label?: React.ReactNode;
36+
/**
37+
* AccessibilityLabel for `label`.
38+
*/
39+
accessibilityLabel?: string;
3940
style?: StyleProp<ViewStyle>;
4041
/**
4142
* @optional
@@ -56,6 +57,14 @@ type PaginationDropdownProps = {
5657
* The function to set the number of rows per page.
5758
*/
5859
onItemsPerPageChange?: (numberOfItemsPerPage: number) => void;
60+
/**
61+
* Color of the dropdown item ripple effect.
62+
*/
63+
dropdownItemRippleColor?: ColorValue;
64+
/**
65+
* Color of the select page dropdown ripple effect.
66+
*/
67+
selectPageDropdownRippleColor?: ColorValue;
5968
/**
6069
* @optional
6170
*/
@@ -79,6 +88,10 @@ type PaginationControlsProps = {
7988
* Whether to show fast forward and fast rewind buttons in pagination. False by default.
8089
*/
8190
showFastPaginationControls?: boolean;
91+
/**
92+
* Color of the pagination control ripple effect.
93+
*/
94+
paginationControlRippleColor?: ColorValue;
8295
/**
8396
* @optional
8497
*/
@@ -91,6 +104,7 @@ const PaginationControls = ({
91104
onPageChange,
92105
showFastPaginationControls,
93106
theme: themeOverrides,
107+
paginationControlRippleColor,
94108
}: PaginationControlsProps) => {
95109
const theme = useInternalTheme(themeOverrides);
96110

@@ -109,6 +123,7 @@ const PaginationControls = ({
109123
/>
110124
)}
111125
iconColor={textColor}
126+
rippleColor={paginationControlRippleColor}
112127
disabled={page === 0}
113128
onPress={() => onPageChange(0)}
114129
accessibilityLabel="page-first"
@@ -125,6 +140,7 @@ const PaginationControls = ({
125140
/>
126141
)}
127142
iconColor={textColor}
143+
rippleColor={paginationControlRippleColor}
128144
disabled={page === 0}
129145
onPress={() => onPageChange(page - 1)}
130146
accessibilityLabel="chevron-left"
@@ -140,6 +156,7 @@ const PaginationControls = ({
140156
/>
141157
)}
142158
iconColor={textColor}
159+
rippleColor={paginationControlRippleColor}
143160
disabled={numberOfPages === 0 || page === numberOfPages - 1}
144161
onPress={() => onPageChange(page + 1)}
145162
accessibilityLabel="chevron-right"
@@ -156,6 +173,7 @@ const PaginationControls = ({
156173
/>
157174
)}
158175
iconColor={textColor}
176+
rippleColor={paginationControlRippleColor}
159177
disabled={numberOfPages === 0 || page === numberOfPages - 1}
160178
onPress={() => onPageChange(numberOfPages - 1)}
161179
accessibilityLabel="page-last"
@@ -171,6 +189,8 @@ const PaginationDropdown = ({
171189
numberOfItemsPerPage,
172190
onItemsPerPageChange,
173191
theme: themeOverrides,
192+
selectPageDropdownRippleColor,
193+
dropdownItemRippleColor,
174194
}: PaginationDropdownProps) => {
175195
const theme = useInternalTheme(themeOverrides);
176196
const { colors } = theme;
@@ -189,6 +209,7 @@ const PaginationDropdown = ({
189209
icon="menu-down"
190210
contentStyle={styles.contentStyle}
191211
theme={theme}
212+
rippleColor={selectPageDropdownRippleColor}
192213
>
193214
{`${numberOfItemsPerPage}`}
194215
</Button>
@@ -206,6 +227,7 @@ const PaginationDropdown = ({
206227
onItemsPerPageChange?.(option);
207228
toggleSelect(false);
208229
}}
230+
rippleColor={dropdownItemRippleColor}
209231
title={option}
210232
theme={theme}
211233
/>
@@ -282,6 +304,8 @@ const DataTablePagination = ({
282304
onItemsPerPageChange,
283305
selectPageDropdownLabel,
284306
selectPageDropdownAccessibilityLabel,
307+
selectPageDropdownRippleColor,
308+
dropdownItemRippleColor,
285309
theme: themeOverrides,
286310
...rest
287311
}: Props) => {
@@ -320,6 +344,8 @@ const DataTablePagination = ({
320344
numberOfItemsPerPageList={numberOfItemsPerPageList}
321345
numberOfItemsPerPage={numberOfItemsPerPage}
322346
onItemsPerPageChange={onItemsPerPageChange}
347+
selectPageDropdownRippleColor={selectPageDropdownRippleColor}
348+
dropdownItemRippleColor={dropdownItemRippleColor}
323349
theme={theme}
324350
/>
325351
</View>

‎src/components/Searchbar.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import {
33
Animated,
4+
ColorValue,
45
GestureResponderEvent,
56
I18nManager,
67
Platform,
@@ -55,6 +56,10 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
5556
* Custom color for icon, default will be derived from theme
5657
*/
5758
iconColor?: string;
59+
/**
60+
* Color of the ripple effect.
61+
*/
62+
rippleColor?: ColorValue;
5863
/**
5964
* Callback to execute if we want the left icon to act as button.
6065
*/
@@ -88,6 +93,11 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
8893
* Custom color for the right trailering icon, default will be derived from theme
8994
*/
9095
traileringIconColor?: string;
96+
/**
97+
* @supported Available in v5.x with theme version 3
98+
* Color of the trailering icon ripple effect.
99+
*/
100+
traileringRippleColor?: ColorValue;
91101
/**
92102
* @supported Available in v5.x with theme version 3
93103
* Callback to execute on the right trailering icon button press.
@@ -173,6 +183,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
173183
{
174184
icon,
175185
iconColor: customIconColor,
186+
rippleColor: customRippleColor,
176187
onIconPress,
177188
searchAccessibilityLabel = 'search',
178189
clearIcon,
@@ -181,6 +192,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
181192
traileringIcon,
182193
traileringIconColor,
183194
traileringIconAccessibilityLabel,
195+
traileringRippleColor: customTraileringRippleColor,
184196
onTraileringIconPress,
185197
right,
186198
mode = 'bar',
@@ -243,7 +255,11 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
243255
: color(textColor).alpha(0.54).rgb().string();
244256
const iconColor =
245257
customIconColor || (isV3 ? theme.colors.onSurfaceVariant : md2IconColor);
246-
const rippleColor = color(textColor).alpha(0.32).rgb().string();
258+
const rippleColor =
259+
customRippleColor || color(textColor).alpha(0.32).rgb().string();
260+
const traileringRippleColor =
261+
customTraileringRippleColor ||
262+
color(textColor).alpha(0.32).rgb().string();
247263

248264
const font = isV3
249265
? {
@@ -297,6 +313,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
297313
}
298314
theme={theme}
299315
accessibilityLabel={searchAccessibilityLabel}
316+
testID={`${testID}-icon`}
300317
/>
301318
<TextInput
302319
style={[
@@ -356,6 +373,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
356373
/>
357374
))
358375
}
376+
testID={`${testID}-clear-icon`}
359377
accessibilityRole="button"
360378
theme={theme}
361379
/>
@@ -367,6 +385,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
367385
borderless
368386
onPress={onTraileringIconPress}
369387
iconColor={traileringIconColor || theme.colors.onSurfaceVariant}
388+
rippleColor={traileringRippleColor}
370389
icon={traileringIcon}
371390
accessibilityLabel={traileringIconAccessibilityLabel}
372391
testID={`${testID}-trailering-icon`}

‎src/components/Snackbar.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import {
33
Animated,
4+
ColorValue,
45
Easing,
56
I18nManager,
67
StyleProp,
@@ -39,6 +40,11 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
3940
* Icon to display when `onIconPress` is defined. Default will be `close` icon.
4041
*/
4142
icon?: IconSource;
43+
/**
44+
* @supported Available in v5.x with theme version 3
45+
* Color of the ripple effect.
46+
*/
47+
rippleColor?: ColorValue;
4248
/**
4349
* @supported Available in v5.x with theme version 3
4450
* 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'> & {
6167
* Text content of the Snackbar.
6268
*/
6369
children: React.ReactNode;
64-
/**
65-
* Style for the wrapper of the snackbar
66-
*/
6770
/**
6871
* @supported Available in v5.x with theme version 3
6972
* Changes Snackbar shadow and background on iOS and Android.
7073
*/
7174
elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
75+
/**
76+
* Style for the wrapper of the snackbar
77+
*/
7278
wrapperStyle?: StyleProp<ViewStyle>;
7379
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
7480
ref?: React.RefObject<View>;
7581
/**
7682
* @optional
7783
*/
7884
theme?: ThemeProp;
85+
/**
86+
* TestID used for testing purposes
87+
*/
88+
testID?: string;
7989
};
8090

8191
const DURATION_SHORT = 4000;
@@ -141,6 +151,8 @@ const Snackbar = ({
141151
wrapperStyle,
142152
style,
143153
theme: themeOverrides,
154+
rippleColor,
155+
testID,
144156
...rest
145157
}: Props) => {
146158
const theme = useInternalTheme(themeOverrides);
@@ -221,6 +233,7 @@ const Snackbar = ({
221233
style: actionStyle,
222234
label: actionLabel,
223235
onPress: onPressAction,
236+
rippleColor: actionRippleColor,
224237
...actionProps
225238
} = action || {};
226239

@@ -286,6 +299,7 @@ const Snackbar = ({
286299
},
287300
style,
288301
]}
302+
testID={testID}
289303
{...(isV3 && { elevation })}
290304
{...rest}
291305
>
@@ -303,6 +317,7 @@ const Snackbar = ({
303317
compact={!isV3}
304318
mode="text"
305319
theme={theme}
320+
rippleColor={actionRippleColor}
306321
{...actionProps}
307322
>
308323
{actionLabel}
@@ -314,6 +329,7 @@ const Snackbar = ({
314329
borderless
315330
onPress={onIconPress}
316331
iconColor={theme.colors.inverseOnSurface}
332+
rippleColor={rippleColor}
317333
theme={theme}
318334
icon={
319335
icon ||
@@ -332,6 +348,7 @@ const Snackbar = ({
332348
}
333349
accessibilityLabel={iconAccessibilityLabel}
334350
style={styles.icon}
351+
testID={`${testID}-icon`}
335352
/>
336353
) : null}
337354
</View>

0 commit comments

Comments
 (0)