feat: add iconPosition to FAB

example/src/Examples/FABExample.tsx

@@ -10,6 +10,7 @@ import ScreenWrapper from '../ScreenWrapper';
 type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
 type FABSize = 'small' | 'medium' | 'large';
 type FABMode = 'flat' | 'elevated';
+type FABIconPosition = 'left' | 'right';
 
 const FABExample = () => {
  const [visible, setVisible] = React.useState<boolean>(true);
@@ -21,6 +22,7 @@ const FABExample = () => {
  const variants = ['primary', 'secondary', 'tertiary', 'surface'];
  const sizes = ['small', 'medium', 'large'];
  const modes = ['flat', 'elevated'];
+ const iconPositions = ['left', 'right'];
 
  return (
  <ScreenWrapper style={styles.container}>
@@ -76,6 +78,23 @@ const FABExample = () => {
  </View>
  ))}
  </View>
+ <View style={styles.row}>
+ {iconPositions.map((position) => (
+ <View style={styles.fabVariant} key={position}>
+ <FAB
+ icon="pencil"
+ label={`icon on the ${position}`}
+ style={styles.fab}
+ onPress={() => {}}
+ visible={visible}
+ iconPosition={position as FABIconPosition}
+ />
+ {visible && (
+ <Text variant="bodyMedium">icon on the {position}</Text>
+ )}
+ </View>
+ ))}
+ </View>
  </>
  )}
  <View style={styles.column}>

src/components/FAB/FAB.tsx

@@ -147,6 +147,10 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
  * TestID used for testing purposes
  */
  testID?: string;
+ /**
+ * Specifies the position of the icon in relation to the label.
+ */
+ iconPosition?: 'left' | 'right';
  ref?: React.RefObject<View>;
 } & IconOrLabel;
 
@@ -205,6 +209,7 @@ const FAB = forwardRef<View, Props>(
  mode = 'elevated',
  variant = 'primary',
  labelMaxFontSizeMultiplier,
+ iconPosition = 'left',
  ...rest
  }: Props,
  ref
@@ -306,7 +311,11 @@ const FAB = forwardRef<View, Props>(
  {...rest}
  >
  <View
- style={[styles.content, label ? extendedStyle : fabStyle]}
+ style={[
+ styles.content,
+ label ? extendedStyle : fabStyle,
+ iconPosition === 'left' ? styles.iconLeft : styles.iconRight,
+ ]}
  testID={`${testID}-content`}
  pointerEvents="none"
  >
@@ -349,8 +358,13 @@ const styles = StyleSheet.create({
  elevated: {
  elevation: 6,
  },
- content: {
+ iconLeft: {
  flexDirection: 'row',
+ },
+ iconRight: {
+ flexDirection: 'row-reverse',
+ },
+ content: {
  alignItems: 'center',
  justifyContent: 'center',
  },

src/components/__tests__/FAB.test.tsx

@@ -186,6 +186,23 @@ it('renders FAB with uppercase styling if uppercase prop is truthy', () => {
  });
 });
 
+(['left', 'right'] as const).forEach((iconPosition) => {
+ it(`renders FAB with icon positioned to the ${iconPosition}`, () => {
+ const { getByTestId } = render(
+ <FAB
+ onPress={() => {}}
+ icon="plus"
+ iconPosition={iconPosition}
+ testID={`${iconPosition}-icon-fab`}
+ />
+ );
+
+ expect(getByTestId(`${iconPosition}-icon-fab-content`)).toHaveStyle({
+ flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',
+ });
+ });
+});
+
 describe('getFABColors - background color', () => {
  it('should return color from styles', () => {
  expect(

src/components/__tests__/__snapshots__/FAB.test.tsx.snap

@@ -92,14 +92,16 @@ exports[`renders FAB with custom size prop 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 25,
  "height": 100,
  "width": 100,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -273,14 +275,16 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 16,
  "height": 56,
  "width": 56,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -454,14 +458,16 @@ exports[`renders default FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 16,
  "height": 56,
  "width": 56,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -635,14 +641,16 @@ exports[`renders disabled FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 16,
  "height": 56,
  "width": 56,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -817,14 +825,16 @@ exports[`renders extended FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 16,
  "height": 56,
  "paddingHorizontal": 16,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -1039,13 +1049,15 @@ exports[`renders extended FAB with custom size prop 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "height": 100,
  "paddingHorizontal": 16,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -1259,14 +1271,16 @@ exports[`renders large FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 28,
  "height": 96,
  "width": 96,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -1440,14 +1454,16 @@ exports[`renders loading FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 16,
  "height": 56,
  "width": 56,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -1745,14 +1761,16 @@ exports[`renders loading FAB with custom size prop 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 25,
  "height": 100,
  "width": 100,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -2050,14 +2068,16 @@ exports[`renders not visible FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 16,
  "height": 56,
  "width": 56,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -2231,14 +2251,16 @@ exports[`renders small FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 12,
  "height": 40,
  "width": 40,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"
@@ -2412,14 +2434,16 @@ exports[`renders visible FAB 1`] = `
  [
  {
  "alignItems": "center",
- "flexDirection": "row",
  "justifyContent": "center",
  },
  {
  "borderRadius": 16,
  "height": 56,
  "width": 56,
  },
+ {
+ "flexDirection": "row",
+ },
  ]
  }
  testID="fab-content"