Merge branch 'main' into feat/adjust-overriding-theme-types

callstack · Oct 17, 2022 · 871a875 · 871a875
2 parents 0f65e03 + 6be4734
commit 871a875
Show file tree

Hide file tree

Showing 38 changed files with 916 additions and 122 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -18,7 +18,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
   /**
    * Content that will be displayed inside banner.
    */
-  children: string;
+  children: React.ReactNode;
   /**
    * Icon to display for the `Banner`. Can be an image.
    */

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -297,7 +297,6 @@ const Button = ({
     >
       <TouchableRipple
         borderless
-        delayPressIn={0}
         onPress={onPress}
         onLongPress={onLongPress}
         onPressIn={handlePressIn}

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -256,7 +256,6 @@ const Chip = ({
     >
       <TouchableRipple
         borderless
-        delayPressIn={0}
         style={[{ borderRadius }, styles.touchable]}
         onPress={onPress}
         onLongPress={onLongPress}

diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
@@ -106,7 +106,6 @@ const DrawerItem = ({
     <View {...rest}>
       <TouchableRipple
         borderless
-        delayPressIn={0}
         onPress={onPress}
         style={[
           styles.container,

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -202,7 +202,6 @@ const ListAccordion = ({
           accessibilityState={{ expanded: isExpanded }}
           accessibilityLabel={accessibilityLabel}
           testID={testID}
-          delayPressIn={0}
           borderless
         >
           <View style={styles.row} pointerEvents="none">

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -161,7 +161,6 @@ const SegmentedButtonItem = ({
     <View style={[buttonStyle, styles.button, style]}>
       <TouchableRipple
         borderless
-        delayPressIn={0}
         onPress={onPress}
         accessibilityLabel={accessibilityLabel}
         accessibilityState={{ disabled, checked }}

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -68,7 +68,7 @@ const TextInputFlat = ({
   left,
   right,
   placeholderTextColor,
-  testID = 'text-input',
+  testID = 'text-input-flat',
   ...rest
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
@@ -339,7 +339,7 @@ const TextInputFlat = ({
         )}
         <InputLabel parentState={parentState} labelProps={labelProps} />
         {render?.({
-          testID: `${testID}-flat`,
+          testID,
           ...rest,
           ref: innerRef,
           onChangeText,

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -66,7 +66,7 @@ const TextInputOutlined = ({
   left,
   right,
   placeholderTextColor,
-  testID = 'text-input',
+  testID = 'text-input-outlined',
   ...rest
 }: ChildTextInputProps) => {
   const adornmentConfig = getAdornmentConfig({ left, right });
@@ -311,7 +311,7 @@ const TextInputOutlined = ({
             maxFontSizeMultiplier={rest.maxFontSizeMultiplier}
           />
           {render?.({
-            testID: `${testID}-outlined`,
+            testID,
             ...rest,
             ref: innerRef,
             onChangeText,

diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import {
-  BackgroundPropType,
-  Platform,
+  PressableAndroidRippleConfig,
   StyleProp,
-  StyleSheet,
-  TouchableHighlight,
-  TouchableNativeFeedback,
-  TouchableWithoutFeedback,
-  View,
+  Platform,
   ViewStyle,
+  StyleSheet,
+  Pressable,
+  GestureResponderEvent,
 } from 'react-native';
 
 import { withInternalTheme } from '../../core/theming';
@@ -18,9 +16,9 @@ import { getTouchableRippleColors } from './utils';
 const ANDROID_VERSION_LOLLIPOP = 21;
 const ANDROID_VERSION_PIE = 28;
 
-type Props = React.ComponentProps<typeof TouchableWithoutFeedback> & {
+type Props = React.ComponentProps<typeof Pressable> & {
   borderless?: boolean;
-  background?: BackgroundPropType;
+  background?: PressableAndroidRippleConfig;
   disabled?: boolean;
   onPress?: () => void | null;
   rippleColor?: string;
@@ -41,6 +39,8 @@ const TouchableRipple = ({
   theme,
   ...rest
 }: Props) => {
+  const [showUnderlay, setShowUnderlay] = React.useState<boolean>(false);
+
   const disabled = disabledProp || !rest.onPress;
   const { calculatedRippleColor, calculatedUnderlayColor } =
     getTouchableRippleColors({
@@ -56,34 +56,51 @@ const TouchableRipple = ({
     Platform.Version >= ANDROID_VERSION_PIE &&
     borderless;
 
+  const handlePressIn = (e: GestureResponderEvent) => {
+    setShowUnderlay(true);
+    rest.onPressIn?.(e);
+  };
+
+  const handlePressOut = (e: GestureResponderEvent) => {
+    setShowUnderlay(false);
+    rest.onPressOut?.(e);
+  };
+
   if (TouchableRipple.supported) {
     return (
-      <TouchableNativeFeedback
+      <Pressable
         {...rest}
         disabled={disabled}
-        useForeground={useForeground}
-        background={
+        style={[borderless && styles.overflowHidden, style]}
+        android_ripple={
           background != null
             ? background
-            : TouchableNativeFeedback.Ripple(calculatedRippleColor, borderless)
+            : {
+                color: calculatedRippleColor,
+                borderless,
+                foreground: useForeground,
+              }
         }
       >
-        <View style={[borderless && styles.overflowHidden, style]}>
-          {React.Children.only(children)}
-        </View>
-      </TouchableNativeFeedback>
+        {React.Children.only(children)}
+      </Pressable>
     );
   }
 
   return (
-    <TouchableHighlight
+    <Pressable
       {...rest}
       disabled={disabled}
-      style={[borderless && styles.overflowHidden, style]}
-      underlayColor={calculatedUnderlayColor}
+      style={[
+        borderless && styles.overflowHidden,
+        showUnderlay && { backgroundColor: calculatedUnderlayColor },
+        style,
+      ]}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
     >
       {React.Children.only(children)}
-    </TouchableHighlight>
+    </Pressable>
   );
 };
 

diff --git a/src/components/TouchableRipple/TouchableRipple.tsx b/src/components/TouchableRipple/TouchableRipple.tsx
@@ -2,27 +2,24 @@ import * as React from 'react';
 import {
   GestureResponderEvent,
   Platform,
+  Pressable,
   StyleProp,
   StyleSheet,
-  TouchableWithoutFeedback,
-  View,
   ViewStyle,
 } from 'react-native';
 
 import { withInternalTheme } from '../../core/theming';
 import type { InternalTheme } from '../../types';
 import { getTouchableRippleColors } from './utils';
 
-export type Props = React.ComponentPropsWithRef<
-  typeof TouchableWithoutFeedback
-> & {
+export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
   /**
    * Whether to render the ripple outside the view bounds.
    */
   borderless?: boolean;
   /**
    * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/touchablenativefeedback#background
+   * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: Object;
   /**
@@ -89,7 +86,7 @@ export type Props = React.ComponentPropsWithRef<
  * export default MyComponent;
  * ```
  *
- * @extends TouchableWithoutFeedback props https://reactnative.dev/docs/touchablewithoutfeedback#props
+ * @extends Pressable props https://reactnative.dev/docs/Pressable#props
  */
 const TouchableRipple = ({
   style,
@@ -233,16 +230,15 @@ const TouchableRipple = ({
   const disabled = disabledProp || !rest.onPress;
 
   return (
-    <TouchableWithoutFeedback
+    <Pressable
       {...rest}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       disabled={disabled}
+      style={[styles.touchable, borderless && styles.borderless, style]}
     >
-      <View style={[styles.touchable, borderless && styles.borderless, style]}>
-        {React.Children.only(children)}
-      </View>
-    </TouchableWithoutFeedback>
+      {React.Children.only(children)}
+    </Pressable>
   );
 };
 

diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
+import { tokens } from '../../styles/themes/v3/tokens';
 import { Font, MD3TypescaleKey, ThemeProp } from '../../types';
 
 export type Props = React.ComponentProps<typeof NativeText> & {
@@ -128,7 +129,13 @@ const Text: React.ForwardRefRenderFunction<{}, Props> = (
       />
     );
   } else {
-    const font = !theme.isV3 ? theme.fonts?.regular : {};
+    const { brandRegular, weightRegular } = tokens.md.ref.typeface;
+    const font = theme.isV3
+      ? {
+          fontFamily: brandRegular,
+          fontWeight: weightRegular,
+        }
+      : theme.fonts?.regular;
     const textStyle = {
       ...font,
       color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,