fix: review findings

Author: adrcotfas

docs/docusaurus.config.js

@@ -122,9 +122,9 @@ const config = {
             DrawerSection: 'Drawer/DrawerSection',
           },
           FAB: {
-            FloatingActionButton: 'FAB/FloatingActionButton',
-            ExtendedFloatingActionButton: 'FAB/ExtendedFloatingActionButton',
-            FloatingActionButtonMenu: 'FAB/FloatingActionButtonMenu',
+            FAB: 'FAB/FAB',
+            FABExtended: 'FAB/Extended',
+            FABMenu: 'FAB/Menu',
           },
           IconButton: {
             IconButton: 'IconButton/IconButton',

docs/src/components/BannerExample.tsx

@@ -8,7 +8,7 @@ import { useColorMode } from '@docusaurus/theme-common';
 import {
   Avatar,
   Button,
-  FloatingActionButton,
+  FAB,
   DarkTheme,
   LightTheme,
   ProgressBar,
@@ -83,9 +83,9 @@ const BannerExample = () => {
           <Button icon="camera" mode="contained" onPress={() => {}}>
             Press me
           </Button>
-          <FloatingActionButton icon="plus" size="default" onPress={() => {}} />
-          <FloatingActionButton icon="plus" size="medium" onPress={() => {}} />
-          <FloatingActionButton icon="plus" size="large" onPress={() => {}} />
+          <FAB icon="plus" size="default" onPress={() => {}} />
+          <FAB icon="plus" size="medium" onPress={() => {}} />
+          <FAB icon="plus" size="large" onPress={() => {}} />
           <Avatar.Text label="MD" />
           <Avatar.Icon icon="folder" />
         </Stack>

example/src/Examples/ActivityIndicatorExample.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import {
-  ActivityIndicator,
-  FloatingActionButton,
-  List,
-  Palette,
-} from 'react-native-paper';
+import { ActivityIndicator, FAB, List, Palette } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -16,7 +11,7 @@ const ActivityIndicatorExample = () => {
   return (
     <ScreenWrapper style={styles.container}>
       <View style={styles.row}>
-        <FloatingActionButton
+        <FAB
           icon={animating ? 'pause' : 'play'}
           onPress={() => setAnimating(!animating)}
         />

example/src/Examples/AppbarExample.tsx

@@ -4,7 +4,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import {
   Appbar,
-  FloatingActionButton,
+  FAB,
   List,
   Palette,
   RadioButton,
@@ -23,7 +23,6 @@ const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 const MEDIUM_FAB_HEIGHT = 56;
 
 const AppbarExample = () => {
-  // @ts-ignore
   const navigation = useNavigation('Appbar');
 
   const [showLeftIcon, setShowLeftIcon] = React.useState(true);
@@ -83,7 +82,7 @@ const AppbarExample = () => {
 
   const renderFAB = () => {
     return (
-      <FloatingActionButton
+      <FAB
         icon="plus"
         onPress={() => {}}
         style={[styles.fab, { top: (height - MEDIUM_FAB_HEIGHT) / 2 }]}

example/src/Examples/BannerExample.tsx

@@ -8,12 +8,7 @@ import {
   View,
 } from 'react-native';
 
-import {
-  Banner,
-  FloatingActionButton,
-  Palette,
-  useTheme,
-} from 'react-native-paper';
+import { Banner, FAB, Palette, useTheme } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -62,11 +57,7 @@ const BannerExample = () => {
           ))}
         </View>
       </ScreenWrapper>
-      <FloatingActionButton
-        icon="eye"
-        style={styles.fab}
-        onPress={() => setVisible(!visible)}
-      />
+      <FAB icon="eye" style={styles.fab} onPress={() => setVisible(!visible)} />
       <Banner
         onLayout={handleLayout}
         actions={[

example/src/Examples/FABExample.tsx

@@ -11,11 +11,9 @@ import {
 import {
   Chip,
   Divider,
-  ExtendedFloatingActionButton,
-  FloatingActionButton,
-  FloatingActionButtonMenu,
-  FloatingActionButtonSize,
-  FloatingActionButtonVariant,
+  FAB,
+  FABSize,
+  FABVariant,
   List,
   Switch,
   Text,
@@ -25,27 +23,31 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type FabType = 'icon' | 'extended' | 'extendedTransforming' | 'menu';
 type FabPosition = 'start' | 'center' | 'end';
+type FabColor = FABVariant | 'custom';
 
 // Pixels of scroll change required to flip the transforming FAB. Avoids
 // flicker from sub-pixel scroll jitter at the top of the list.
 const SCROLL_DELTA_THRESHOLD = 4;
 
+const CUSTOM_CONTAINER_COLOR = '#E91E63';
+
 const justifyContentByPosition = {
   start: 'flex-start',
   center: 'center',
   end: 'flex-end',
 } as const satisfies Record<FabPosition, 'flex-start' | 'center' | 'flex-end'>;
 
-const variants: FloatingActionButtonVariant[] = [
+const variants: FabColor[] = [
   'primary',
   'secondary',
   'tertiary',
   'tonalPrimary',
   'tonalSecondary',
   'tonalTertiary',
+  'custom',
 ];
 
-const sizes: FloatingActionButtonSize[] = ['default', 'medium', 'large'];
+const sizes: FABSize[] = ['default', 'medium', 'large'];
 
 const types: FabType[] = ['icon', 'extended', 'extendedTransforming', 'menu'];
 
@@ -96,9 +98,11 @@ const FABExample = () => {
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
 
-  const [variant, setVariant] =
-    React.useState<FloatingActionButtonVariant>('tonalPrimary');
-  const [size, setSize] = React.useState<FloatingActionButtonSize>('medium');
+  const [variant, setVariant] = React.useState<FabColor>('tonalPrimary');
+  const activeVariant = variant === 'custom' ? undefined : variant;
+  const activeContainerColor =
+    variant === 'custom' ? CUSTOM_CONTAINER_COLOR : undefined;
+  const [size, setSize] = React.useState<FABSize>('medium');
   const [type, setType] = React.useState<FabType>('icon');
   const [position, setPosition] = React.useState<FabPosition>('end');
   const [showFab, setShowFab] = React.useState<boolean>(true);
@@ -188,19 +192,21 @@ const FABExample = () => {
         ]}
       >
         {type === 'icon' && (
-          <FloatingActionButton
+          <FAB
             icon="pencil"
-            variant={variant}
+            variant={activeVariant}
+            containerColor={activeContainerColor}
             size={size}
             visible={showFab}
             onPress={() => {}}
           />
         )}
         {(type === 'extended' || type === 'extendedTransforming') && (
-          <ExtendedFloatingActionButton
+          <FAB.Extended
             icon="pencil"
             label="Compose"
-            variant={variant}
+            variant={activeVariant}
+            containerColor={activeContainerColor}
             size={size}
             expanded={type === 'extended' ? true : transformingExpanded}
             visible={showFab}
@@ -209,36 +215,24 @@ const FABExample = () => {
         )}
       </View>
       {type === 'menu' ? (
-        <FloatingActionButtonMenu
+        <FAB.Menu
           expanded={menuExpanded}
           onDismiss={() => setMenuExpanded(false)}
-          horizontalAlignment={position}
-          button={
-            <FloatingActionButton
-              icon="pencil"
-              variant={variant}
-              size={size}
-              visible={showFab}
-              onPress={() => setMenuExpanded(true)}
-            />
-          }
-        >
-          <FloatingActionButtonMenu.Item
-            icon="email"
-            label="Send"
-            onPress={() => {}}
-          />
-          <FloatingActionButtonMenu.Item
-            icon="bell"
-            label="Remind me"
-            onPress={() => {}}
-          />
-          <FloatingActionButtonMenu.Item
-            icon="star"
-            label="Favorite"
-            onPress={() => {}}
-          />
-        </FloatingActionButtonMenu>
+          alignment={position}
+          trigger={{
+            icon: 'pencil',
+            variant: activeVariant,
+            containerColor: activeContainerColor,
+            size,
+            visible: showFab,
+            onPress: () => setMenuExpanded(true),
+          }}
+          items={[
+            { icon: 'email', label: 'Send', onPress: () => {} },
+            { icon: 'bell', label: 'Remind me', onPress: () => {} },
+            { icon: 'star', label: 'Favorite', onPress: () => {} },
+          ]}
+        />
       ) : null}
     </View>
   );

example/src/Examples/TeamDetails.tsx

@@ -18,7 +18,7 @@ import {
   Chip,
   Divider,
   IconButton,
-  FloatingActionButton,
+  FAB,
   PaperProvider,
 } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -116,12 +116,7 @@ const News = () => {
           </Card>
         </View>
       </ScreenWrapper>
-      <FloatingActionButton
-        icon="magnify"
-        onPress={() => {}}
-        visible
-        style={styles.fab}
-      />
+      <FAB icon="magnify" onPress={() => {}} visible style={styles.fab} />
     </>
   );
 };

example/src/Examples/TooltipExample.tsx

@@ -7,7 +7,7 @@ import {
   Avatar,
   Banner,
   Chip,
-  FloatingActionButton,
+  FAB,
   IconButton,
   List,
   ToggleButton,
@@ -149,7 +149,7 @@ const TooltipExample = () => {
       </ScreenWrapper>
       <View style={styles.fabContainer}>
         <Tooltip title="Press Me">
-          <FloatingActionButton icon="plus" onPress={() => {}} />
+          <FAB icon="plus" onPress={() => {}} />
         </Tooltip>
       </View>
     </>

src/babel/__fixtures__/rewrite-imports/code.js

@@ -3,7 +3,7 @@ import {
   PaperProvider,
   BottomNavigation,
   Button,
-  FloatingActionButton,
+  FAB,
   Appbar,
   Palette,
   NonExistent,

src/babel/__fixtures__/rewrite-imports/output.js

@@ -2,7 +2,7 @@
 import PaperProvider from "react-native-paper/lib/module/core/PaperProvider";
 import BottomNavigation from "react-native-paper/lib/module/components/BottomNavigation/BottomNavigation";
 import Button from "react-native-paper/lib/module/components/Button/Button";
-import FloatingActionButton from "react-native-paper/lib/module/components/FAB/FloatingActionButton";
+import FAB from "react-native-paper/lib/module/components/FAB";
 import Appbar from "react-native-paper/lib/module/components/Appbar";
 import { Palette } from "react-native-paper/lib/module/theme/tokens";
 import { NonExistent, NonExistentSecond as Stuff, LightTheme } from "react-native-paper/lib/module/index.js";