feat(tooltip): modernize Tooltip to Material Design 3

docs/docusaurus.config.js

@@ -180,6 +180,7 @@ const config = {
           },
           Tooltip: {
             Tooltip: 'Tooltip/Tooltip',
+            RichTooltip: 'Tooltip/RichTooltip',
           },
           TouchableRipple: {
             TouchableRipple: 'TouchableRipple/TouchableRipple',

example/src/Examples/TooltipExample.tsx

@@ -6,6 +6,7 @@ import {
   Appbar,
   Avatar,
   Banner,
+  Button,
   Chip,
   FAB,
   IconButton,
@@ -46,17 +47,28 @@ const TooltipExample = () => {
       header: () => (
         <Appbar.Header elevated>
           <Tooltip title="Go back">
-            <Appbar.BackAction onPress={() => navigation.goBack()} />
+            {(props) => (
+              <Appbar.BackAction
+                {...props}
+                onPress={() => navigation.goBack()}
+              />
+            )}
           </Tooltip>
           <Appbar.Content title="Tooltips" />
           <Tooltip title="Print ⌘ + P">
-            <Appbar.Action icon="printer" onPress={() => {}} />
+            {(props) => (
+              <Appbar.Action {...props} icon="printer" onPress={() => {}} />
+            )}
           </Tooltip>
           <Tooltip title="Search">
-            <Appbar.Action icon="magnify" onPress={() => {}} />
+            {(props) => (
+              <Appbar.Action {...props} icon="magnify" onPress={() => {}} />
+            )}
           </Tooltip>
           <Tooltip title="More options">
-            <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
+            {(props) => (
+              <Appbar.Action {...props} icon={MORE_ICON} onPress={() => {}} />
+            )}
           </Tooltip>
         </Appbar.Header>
       ),
@@ -83,11 +95,14 @@ const TooltipExample = () => {
                 enterTouchDelay={transport.enterTouchDelay}
                 leaveTouchDelay={transport.leaveTouchDelay}
               >
-                <IconButton
-                  icon={transport.title.split(' ')[0].toLowerCase()}
-                  size={24}
-                  onPress={() => {}}
-                />
+                {(props) => (
+                  <IconButton
+                    {...props}
+                    icon={transport.title.split(' ')[0].toLowerCase()}
+                    size={24}
+                    onPress={() => {}}
+                  />
+                )}
               </Tooltip>
             ))}
           </View>
@@ -99,57 +114,106 @@ const TooltipExample = () => {
             onValueChange={setTextAlign}
           >
             <Tooltip title="Align left">
-              <ToggleButton icon="format-align-left" value="left" />
+              {(props) => (
+                <ToggleButton
+                  {...props}
+                  icon="format-align-left"
+                  value="left"
+                />
+              )}
             </Tooltip>
             <Tooltip title="Align center">
-              <ToggleButton icon="format-align-center" value="center" />
+              {(props) => (
+                <ToggleButton
+                  {...props}
+                  icon="format-align-center"
+                  value="center"
+                />
+              )}
             </Tooltip>
             <Tooltip title="Align right">
-              <ToggleButton icon="format-align-right" value="right" disabled />
+              {(props) => (
+                <ToggleButton
+                  {...props}
+                  icon="format-align-right"
+                  value="right"
+                  disabled
+                />
+              )}
             </Tooltip>
           </ToggleButton.Row>
         </List.Section>
         <List.Section title="Avatar">
           <View style={styles.avatarContainer}>
             <Tooltip title="Username">
-              <Avatar.Text label="U" />
+              {(props) => <Avatar.Text {...props} label="U" />}
             </Tooltip>
           </View>
         </List.Section>
         <List.Section title="Chip">
           <View style={styles.chipContainer}>
             <Tooltip title="Copied">
-              <Chip
-                mode="outlined"
-                avatar={
-                  <Image
-                    source={require('../../assets/images/avatar.png')}
-                    accessibilityIgnoresInvertColors
-                  />
-                }
-              >
-                John Doe
-              </Chip>
+              {(props) => (
+                <Chip
+                  {...props}
+                  mode="outlined"
+                  avatar={
+                    <Image
+                      source={require('../../assets/images/avatar.png')}
+                      accessibilityIgnoresInvertColors
+                    />
+                  }
+                >
+                  John Doe
+                </Chip>
+              )}
             </Tooltip>
           </View>
         </List.Section>
         <List.Section title="Card">
           <Tooltip title="Cafeteria, 1st floor">
-            <Card style={styles.cardContainer}>
-              <Card.Title
-                title="Lunch break"
-                subtitle="1:00-2:00 PM"
-                left={(props) => (
-                  <Avatar.Icon {...props} icon="food-fork-drink" />
-                )}
-              />
-            </Card>
+            {(props) => (
+              <Card {...props} style={styles.cardContainer}>
+                <Card.Title
+                  title="Lunch break"
+                  subtitle="1:00-2:00 PM"
+                  left={(leftProps) => (
+                    <Avatar.Icon {...leftProps} icon="food-fork-drink" />
+                  )}
+                />
+              </Card>
+            )}
           </Tooltip>
         </List.Section>
+        <List.Section title="Rich tooltips">
+          <View style={styles.iconButtonContainer}>
+            <Tooltip.Rich
+              title="Add to library"
+              content="Save this item to read it later from any of your devices."
+              actions={({ dismiss }) => (
+                <>
+                  <Button compact onPress={dismiss}>
+                    Learn more
+                  </Button>
+                  <Button compact mode="contained" onPress={dismiss}>
+                    Add
+                  </Button>
+                </>
+              )}
+            >
+              {(props) => <IconButton {...props} icon="plus" size={24} />}
+            </Tooltip.Rich>
+            <Tooltip.Rich content="A rich tooltip with body text only — no title or actions.">
+              {(props) => (
+                <IconButton {...props} icon="information" size={24} />
+              )}
+            </Tooltip.Rich>
+          </View>
+        </List.Section>
       </ScreenWrapper>
       <View style={styles.fabContainer}>
         <Tooltip title="Press Me">
-          <FAB icon="plus" onPress={() => {}} />
+          {(props) => <FAB {...props} icon="plus" onPress={() => {}} />}
         </Tooltip>
       </View>
     </>

jest/testSetup.js

@@ -8,9 +8,15 @@ jest.mock('react-native-worklets', () =>
   require('react-native-worklets/lib/module/mock')
 );
 
-jest.mock('react-native-reanimated', () =>
-  require('react-native-reanimated/mock')
-);
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+
+  // The mock doesn't ship the CSS easing helpers; stub the ones we use.
+  return {
+    ...Reanimated,
+    cubicBezier: (...points) => `cubic-bezier(${points.join(', ')})`,
+  };
+});
 
 jest.mock('@react-native-vector-icons/material-design-icons', () => {
   const React = require('react');