diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index 52b6b4768f..ed849ce33f 100644 --- a/example/src/Examples/FABExample.tsx +++ b/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(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 ( @@ -76,6 +78,23 @@ const FABExample = () => { ))} + + {iconPositions.map((position) => ( + + {}} + visible={visible} + iconPosition={position as FABIconPosition} + /> + {visible && ( + icon on the {position} + )} + + ))} + )} diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index 260da3079c..6e1409eb7e 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -147,6 +147,10 @@ export type Props = $Omit<$RemoveChildren, '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; } & IconOrLabel; @@ -205,6 +209,7 @@ const FAB = forwardRef( mode = 'elevated', variant = 'primary', labelMaxFontSizeMultiplier, + iconPosition = 'left', ...rest }: Props, ref @@ -306,7 +311,11 @@ const FAB = forwardRef( {...rest} > @@ -349,8 +358,13 @@ const styles = StyleSheet.create({ elevated: { elevation: 6, }, - content: { + iconLeft: { flexDirection: 'row', + }, + iconRight: { + flexDirection: 'row-reverse', + }, + content: { alignItems: 'center', justifyContent: 'center', }, diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index ef1dcf53f7..9852cbbcfc 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/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( + {}} + 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( diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap index c39e6e28e4..9653b0fd66 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap @@ -92,7 +92,6 @@ exports[`renders FAB with custom size prop 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -100,6 +99,9 @@ exports[`renders FAB with custom size prop 1`] = ` "height": 100, "width": 100, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -273,7 +275,6 @@ exports[`renders custom color for the icon and label of the FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -281,6 +282,9 @@ exports[`renders custom color for the icon and label of the FAB 1`] = ` "height": 56, "width": 56, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -454,7 +458,6 @@ exports[`renders default FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -462,6 +465,9 @@ exports[`renders default FAB 1`] = ` "height": 56, "width": 56, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -635,7 +641,6 @@ exports[`renders disabled FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -643,6 +648,9 @@ exports[`renders disabled FAB 1`] = ` "height": 56, "width": 56, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -817,7 +825,6 @@ exports[`renders extended FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -825,6 +832,9 @@ exports[`renders extended FAB 1`] = ` "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,7 +1271,6 @@ exports[`renders large FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -1267,6 +1278,9 @@ exports[`renders large FAB 1`] = ` "height": 96, "width": 96, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -1440,7 +1454,6 @@ exports[`renders loading FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -1448,6 +1461,9 @@ exports[`renders loading FAB 1`] = ` "height": 56, "width": 56, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -1745,7 +1761,6 @@ exports[`renders loading FAB with custom size prop 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -1753,6 +1768,9 @@ exports[`renders loading FAB with custom size prop 1`] = ` "height": 100, "width": 100, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -2050,7 +2068,6 @@ exports[`renders not visible FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -2058,6 +2075,9 @@ exports[`renders not visible FAB 1`] = ` "height": 56, "width": 56, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -2231,7 +2251,6 @@ exports[`renders small FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -2239,6 +2258,9 @@ exports[`renders small FAB 1`] = ` "height": 40, "width": 40, }, + { + "flexDirection": "row", + }, ] } testID="fab-content" @@ -2412,7 +2434,6 @@ exports[`renders visible FAB 1`] = ` [ { "alignItems": "center", - "flexDirection": "row", "justifyContent": "center", }, { @@ -2420,6 +2441,9 @@ exports[`renders visible FAB 1`] = ` "height": 56, "width": 56, }, + { + "flexDirection": "row", + }, ] } testID="fab-content"