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={