From 5137d7a0b2306703b58a7bb82aba1b86973063b3 Mon Sep 17 00:00:00 2001 From: Gabriel <gabrielmrtss@gmail.com> Date: Wed, 8 May 2024 21:33:33 -0300 Subject: [PATCH] feat: add size prop to List.Icon component --- src/components/List/ListIcon.tsx | 10 +- src/components/__tests__/ListItem.test.tsx | 27 ++ .../__snapshots__/ListItem.test.tsx.snap | 381 ++++++++++++++++++ 3 files changed, 416 insertions(+), 2 deletions(-) diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx index f1c7194c43..3d14e4a01b 100644 --- a/src/components/List/ListIcon.tsx +++ b/src/components/List/ListIcon.tsx @@ -19,6 +19,10 @@ export type Props = { * @optional */ theme?: ThemeProp; + /** + * Size of the icon. + */ + size?: number; }; const ICON_SIZE = 24; @@ -34,7 +38,7 @@ const ICON_SIZE = 24; * const MyComponent = () => ( * <> * <List.Icon color={MD3Colors.tertiary70} icon="folder" /> - * <List.Icon color={MD3Colors.tertiary70} icon="equal" /> + * <List.Icon color={MD3Colors.tertiary70} size={20} icon="equal" /> * <List.Icon color={MD3Colors.tertiary70} icon="calendar" /> * </> * ); @@ -47,15 +51,17 @@ const ListIcon = ({ color: iconColor, style, theme: themeOverrides, + size, }: Props) => { const theme = useInternalTheme(themeOverrides); + const iconSize = size ? size : ICON_SIZE; return ( <View style={[theme.isV3 ? styles.itemV3 : styles.item, style]} pointerEvents="box-none" > - <Icon source={icon} size={ICON_SIZE} color={iconColor} theme={theme} /> + <Icon source={icon} size={iconSize} color={iconColor} theme={theme} /> </View> ); }; diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index 036697f9ec..1b427355d0 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -159,3 +159,30 @@ it('renders list item with custom content style', () => { expect(getByTestId('list-item-content')).toHaveStyle(styles.content); }); + +it('renders list item with custom icon size with left and right items', () => { + const tree = render( + <ListItem + title="First Item" + description="Item description" + testID={testID} + left={() => <Text>GG</Text>} + right={() => <ListIcon size={10} icon="folder" />} + /> + ).toJSON(); + + expect(tree).toMatchSnapshot(); +}); + +it('renders list item on left with a icon that has a custom size', () => { + const tree = render( + <ListItem + title="First Item" + description="Item description" + testID={testID} + left={() => <ListIcon size={10} icon="folder" />} + /> + ).toJSON(); + + expect(tree).toMatchSnapshot(); +}); diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index 514fc61c78..f31e4e65f0 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -1,5 +1,194 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders list item on left with a icon that has a custom size 1`] = ` +<View + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": true, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + [ + false, + [ + { + "paddingRight": 24, + "paddingVertical": 8, + }, + undefined, + ], + ] + } + testID="list-item" +> + <View + style={ + { + "flexDirection": "row", + "marginVertical": 6, + "width": "100%", + } + } + > + <View + pointerEvents="box-none" + style={ + [ + { + "alignItems": "center", + "justifyContent": "center", + }, + undefined, + ] + } + > + <Text + accessibilityElementsHidden={true} + allowFontScaling={false} + importantForAccessibility="no-hide-descendants" + pointerEvents="none" + selectable={false} + style={ + [ + { + "color": "rgba(28, 27, 31, 1)", + "fontSize": 10, + }, + [ + { + "lineHeight": 10, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + { + "fontFamily": "Material Design Icons", + "fontStyle": "normal", + "fontWeight": "normal", + }, + {}, + ] + } + > + + </Text> + </View> + <View + style={ + [ + { + "paddingLeft": 16, + }, + { + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + }, + undefined, + ] + } + testID="list-item-content" + > + <Text + numberOfLines={1} + selectable={false} + style={ + [ + { + "textAlign": "left", + }, + { + "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", + "letterSpacing": 0, + }, + { + "writingDirection": "ltr", + }, + [ + { + "fontSize": 16, + }, + { + "color": "rgba(28, 27, 31, 1)", + }, + undefined, + ], + ] + } + > + First Item + </Text> + <Text + numberOfLines={2} + onTextLayout={[Function]} + selectable={false} + style={ + [ + { + "textAlign": "left", + }, + { + "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", + "letterSpacing": 0, + }, + { + "writingDirection": "ltr", + }, + [ + { + "fontSize": 14, + }, + { + "color": "rgba(73, 69, 79, 1)", + }, + undefined, + ], + ] + } + > + Item description + </Text> + </View> + </View> +</View> +`; + exports[`renders list item with custom description 1`] = ` <View accessibilityState={ @@ -327,6 +516,198 @@ exports[`renders list item with custom description 1`] = ` </View> `; +exports[`renders list item with custom icon size with left and right items 1`] = ` +<View + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": true, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + [ + false, + [ + { + "paddingRight": 24, + "paddingVertical": 8, + }, + undefined, + ], + ] + } + testID="list-item" +> + <View + style={ + { + "flexDirection": "row", + "marginVertical": 6, + "width": "100%", + } + } + > + <Text> + GG + </Text> + <View + style={ + [ + { + "paddingLeft": 16, + }, + { + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + }, + undefined, + ] + } + testID="list-item-content" + > + <Text + numberOfLines={1} + selectable={false} + style={ + [ + { + "textAlign": "left", + }, + { + "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", + "letterSpacing": 0, + }, + { + "writingDirection": "ltr", + }, + [ + { + "fontSize": 16, + }, + { + "color": "rgba(28, 27, 31, 1)", + }, + undefined, + ], + ] + } + > + First Item + </Text> + <Text + numberOfLines={2} + onTextLayout={[Function]} + selectable={false} + style={ + [ + { + "textAlign": "left", + }, + { + "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", + "letterSpacing": 0, + }, + { + "writingDirection": "ltr", + }, + [ + { + "fontSize": 14, + }, + { + "color": "rgba(73, 69, 79, 1)", + }, + undefined, + ], + ] + } + > + Item description + </Text> + </View> + <View + pointerEvents="box-none" + style={ + [ + { + "alignItems": "center", + "justifyContent": "center", + }, + undefined, + ] + } + > + <Text + accessibilityElementsHidden={true} + allowFontScaling={false} + importantForAccessibility="no-hide-descendants" + pointerEvents="none" + selectable={false} + style={ + [ + { + "color": "rgba(28, 27, 31, 1)", + "fontSize": 10, + }, + [ + { + "lineHeight": 10, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + { + "fontFamily": "Material Design Icons", + "fontStyle": "normal", + "fontWeight": "normal", + }, + {}, + ] + } + > + + </Text> + </View> + </View> +</View> +`; + exports[`renders list item with custom title and description styles 1`] = ` <View accessibilityState={