From a9f156faa8032cdef58b068001651fe5745e542b Mon Sep 17 00:00:00 2001 From: Caio Tracera Date: Mon, 17 Jun 2024 14:57:27 +0100 Subject: [PATCH 1/5] feat(fab): add iconPosition as an optional prop --- src/components/FAB/FAB.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index 260da3079c..eff88bd94c 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; + /** + * Direction that the content will be displayed + */ + 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', }, From 4e8413e1a697303bba86902d89b302246259d418 Mon Sep 17 00:00:00 2001 From: Caio Tracera Date: Mon, 17 Jun 2024 14:59:17 +0100 Subject: [PATCH 2/5] docs(fab): add examples with different iconPosition --- example/src/Examples/FABExample.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index 52b6b4768f..7f71c74209 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,21 @@ const FABExample = () => { ))} + + {iconPositions.map((position) => ( + + {}} + visible={visible} + iconPosition={position as FABIconPosition} + /> + {visible && icon {position}} + + ))} + )} From d880f1808f34bd8f08652f6c396ffa6678df8f57 Mon Sep 17 00:00:00 2001 From: Caio Tracera Date: Mon, 17 Jun 2024 15:00:23 +0100 Subject: [PATCH 3/5] test(fab): add test to validate iconPosition --- src/components/__tests__/FAB.test.tsx | 17 +++++++ .../__tests__/__snapshots__/FAB.test.tsx.snap | 48 ++++++++++++++----- 2 files changed, 53 insertions(+), 12 deletions(-) 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" From 26966016870277a17e0ec6126fbe7f82495735ea Mon Sep 17 00:00:00 2001 From: Caio Tracera Date: Mon, 17 Jun 2024 15:43:21 +0100 Subject: [PATCH 4/5] docs(fab): change text on the example --- example/src/Examples/FABExample.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index 7f71c74209..ed849ce33f 100644 --- a/example/src/Examples/FABExample.tsx +++ b/example/src/Examples/FABExample.tsx @@ -83,13 +83,15 @@ const FABExample = () => { {}} visible={visible} iconPosition={position as FABIconPosition} /> - {visible && icon {position}} + {visible && ( + icon on the {position} + )} ))} From 0c6336bc66e87de1cedee3531a2e3c5e3ef977b6 Mon Sep 17 00:00:00 2001 From: Caio Tracera Date: Mon, 17 Jun 2024 15:46:01 +0100 Subject: [PATCH 5/5] feat(fab): change the type specification --- src/components/FAB/FAB.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index eff88bd94c..6e1409eb7e 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -148,7 +148,7 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { */ testID?: string; /** - * Direction that the content will be displayed + * Specifies the position of the icon in relation to the label. */ iconPosition?: 'left' | 'right'; ref?: React.RefObject;