feat: add FAB size prop (#3156)

example/src/Examples/FABExample.tsx

@@ -89,6 +89,21 @@ const FABExample = () => {
             />
           </>
         )}
+        <FAB
+          icon="map"
+          style={styles.fab}
+          customSize={64}
+          onPress={() => {}}
+          visible={visible}
+        />
+        <FAB
+          icon="map"
+          label="Extended FAB with custom size"
+          style={styles.fab}
+          customSize={64}
+          onPress={() => {}}
+          visible={visible}
+        />
         <FAB
           icon="check"
           label="Extended FAB"

src/components/FAB/FAB.tsx

@@ -14,7 +14,7 @@ import Icon, { IconSource } from '../Icon';
 import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { withTheme } from '../../core/theming';
-import { getFABColors, getFabStyle } from './utils';
+import { getExtendedFabStyle, getFABColors, getFabStyle } from './utils';
 import type { $RemoveChildren, Theme } from '../../types';
 
 type FABSize = 'small' | 'medium' | 'large';
@@ -86,6 +86,12 @@ type Props = $RemoveChildren<typeof Surface> & {
    * - `large` - FAB with large height (96).
    */
   size?: FABSize;
+  /**
+   * @supported Available in v5.x
+   *
+   * Custom size for the `FAB`. This prop takes precedence over size prop
+   */
+  customSize?: number;
   /**
    * @supported Available in v5.x with theme version 3
    *
@@ -160,6 +166,7 @@ const FAB = ({
   loading,
   testID,
   size = 'medium',
+  customSize,
   mode = 'elevated',
   variant = 'primary',
   ...rest
@@ -201,20 +208,19 @@ const FAB = ({
   const iconSize = isLargeSize ? 36 : 24;
   const loadingIndicatorSize = isLargeSize ? 24 : 18;
 
-  const fabStyle = getFabStyle({ size, theme });
-
-  const shapeStyle = { borderRadius: fabStyle.borderRadius };
+  const fabStyle = getFabStyle({ customSize, size, theme });
+  const extendedStyle = getExtendedFabStyle({ customSize, theme });
   const textStyle = {
     color: foregroundColor,
     ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
   };
+  const shapeStyle = { borderRadius: fabStyle.borderRadius };
 
   const containerStyles = [
     !isV3 && styles.elevated,
     !isV3 && disabled && styles.disabled,
     shapeStyle,
   ];
-  const extendedStyle = isV3 ? styles.v3Extended : styles.extended;
   const md3Elevation = isFlatMode || disabled ? 0 : 3;
 
   return (
@@ -257,13 +263,13 @@ const FAB = ({
           {icon && loading !== true ? (
             <IconComponent
               source={icon}
-              size={iconSize}
+              size={customSize ? customSize / 2 : iconSize}
               color={foregroundColor}
             />
           ) : null}
           {loading ? (
             <ActivityIndicator
-              size={loadingIndicatorSize}
+              size={customSize ? customSize / 2 : loadingIndicatorSize}
               color={foregroundColor}
             />
           ) : null}
@@ -290,10 +296,6 @@ const styles = StyleSheet.create({
   elevated: {
     elevation: 6,
   },
-  extended: {
-    height: 48,
-    paddingHorizontal: 16,
-  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -308,11 +310,6 @@ const styles = StyleSheet.create({
   disabled: {
     elevation: 0,
   },
-  v3Extended: {
-    height: 56,
-    borderRadius: 16,
-    paddingHorizontal: 16,
-  },
 });
 
 export default withTheme(FAB);

src/components/FAB/utils.ts

@@ -350,14 +350,25 @@ const v3LargeSize = {
   width: 96,
 };
 
+const getCustomFabSize = (customSize: number, roundness: number) => ({
+  height: customSize,
+  width: customSize,
+  borderRadius: customSize / roundness,
+});
+
 export const getFabStyle = ({
   size,
   theme,
+  customSize,
 }: {
+  customSize?: number;
   size: 'small' | 'medium' | 'large';
   theme: Theme;
 }) => {
   const { isV3, roundness } = theme;
+
+  if (customSize) return getCustomFabSize(customSize, roundness);
+
   if (isV3) {
     switch (size) {
       case 'small':
@@ -374,3 +385,33 @@ export const getFabStyle = ({
   }
   return standardSize;
 };
+
+const extended = {
+  height: 48,
+  paddingHorizontal: 16,
+};
+
+const v3Extended = {
+  height: 56,
+  borderRadius: 16,
+  paddingHorizontal: 16,
+};
+
+const getExtendedFabDimensions = (customSize: number) => ({
+  height: customSize,
+  paddingHorizontal: 16,
+});
+
+export const getExtendedFabStyle = ({
+  customSize,
+  theme,
+}: {
+  customSize?: number;
+  theme: Theme;
+}) => {
+  if (customSize) return getExtendedFabDimensions(customSize);
+
+  const { isV3 } = theme;
+
+  return isV3 ? v3Extended : extended;
+};

src/components/__tests__/FAB.test.js

@@ -21,6 +21,14 @@ it('renders small FAB', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders FAB with custom size prop', () => {
+  const tree = renderer
+    .create(<FAB customSize={100} onPress={() => {}} icon="plus" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders extended FAB', () => {
   const tree = renderer
     .create(<FAB onPress={() => {}} icon="plus" label="Add items" />)
@@ -29,6 +37,16 @@ it('renders extended FAB', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders extended FAB with custom size prop', () => {
+  const tree = renderer
+    .create(
+      <FAB customSize={100} onPress={() => {}} icon="plus" label="Add items" />
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders loading FAB', () => {
   const tree = renderer
     .create(<FAB onPress={() => {}} icon="plus" loading={true} />)
@@ -37,6 +55,16 @@ it('renders loading FAB', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders loading FAB with custom size prop', () => {
+  const tree = renderer
+    .create(
+      <FAB customSize={100} onPress={() => {}} icon="plus" loading={true} />
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders disabled FAB', () => {
   const tree = renderer
     .create(<FAB onPress={() => {}} icon="plus" disabled />)