Skip to content

Commit 4efbbaf

Browse files
PeterTorkiPeterTorki
committed
feat(ListIcon): add iconSize prop to allow custom sizing
1 parent ff0df54 commit 4efbbaf

File tree

7 files changed

+46
-35
lines changed

7 files changed

+46
-35
lines changed

‎example/src/Examples/ListAccordionExample.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ const ListAccordionExample = () => {
1515
<ScreenWrapper>
1616
<List.Section title="Expandable list item">
1717
<List.Accordion
18-
left={(props) => <List.Icon {...props} icon="folder" />}
18+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
1919
title="Expandable list item"
2020
>
2121
<List.Item title="List item 1" />
2222
<List.Item title="List item 2" />
2323
</List.Accordion>
2424
<List.Accordion
25-
left={(props) => <List.Icon {...props} icon="folder" />}
25+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
2626
title="Start expanded"
2727
expanded={expanded}
2828
onPress={_handlePress}
@@ -43,15 +43,15 @@ const ListAccordionExample = () => {
4343
<Divider />
4444
<List.Section title="Expandable list with icons">
4545
<List.Accordion
46-
left={(props) => <List.Icon {...props} icon="star" />}
46+
left={(props) => <List.Icon size={32} {...props} icon="star" />}
4747
title="Accordion item 1"
4848
>
4949
<List.Item
50-
left={(props) => <List.Icon {...props} icon="thumb-up" />}
50+
left={(props) => <List.Icon size={32} {...props} icon="thumb-up" />}
5151
title="List item 1"
5252
/>
5353
<List.Item
54-
left={(props) => <List.Icon {...props} icon="thumb-down" />}
54+
left={(props) => <List.Icon size={32} {...props} icon="thumb-down" />}
5555
title="List item 2"
5656
/>
5757
</List.Accordion>

‎example/src/Examples/ListAccordionGroupExample.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,22 @@ const ListAccordionGroupExample = () => {
1919
<List.AccordionGroup>
2020
<List.Section title="Uncontrolled Accordion Group example">
2121
<List.Accordion
22-
left={(props) => <List.Icon {...props} icon="folder" />}
22+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
2323
title="Expandable list item"
2424
id="1"
2525
>
2626
<List.Item title="List item 1" />
2727
<List.Item title="List item 2" />
2828
</List.Accordion>
2929
<List.Accordion
30-
left={(props) => <List.Icon {...props} icon="folder" />}
30+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
3131
title="Expandable list item 2"
3232
id="2"
3333
>
3434
<List.Item title="List item 1" />
3535
</List.Accordion>
3636
<List.Accordion
37-
left={(props) => <List.Icon {...props} icon="folder" />}
37+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
3838
title="Expandable list item 2"
3939
id="3"
4040
>
@@ -48,22 +48,22 @@ const ListAccordionGroupExample = () => {
4848
>
4949
<List.Section title="Controlled Accordion Group example">
5050
<List.Accordion
51-
left={(props) => <List.Icon {...props} icon="folder" />}
51+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
5252
title="Expandable list item"
5353
id="1"
5454
>
5555
<List.Item title="List item 1" />
5656
<List.Item title="List item 2" />
5757
</List.Accordion>
5858
<List.Accordion
59-
left={(props) => <List.Icon {...props} icon="folder" />}
59+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
6060
title="Expandable list item 2"
6161
id="2"
6262
>
6363
<List.Item title="List item 1" />
6464
</List.Accordion>
6565
<List.Accordion
66-
left={(props) => <List.Icon {...props} icon="folder" />}
66+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
6767
title="Expandable list item 2"
6868
id="3"
6969
>

‎example/src/Examples/ListItemExample.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,34 +39,34 @@ const ListItemExample = () => {
3939
<List.Section title="With icon">
4040
<List.Item
4141
title="Headline"
42-
left={(props) => <List.Icon {...props} icon="account-outline" />}
42+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
4343
/>
4444
<List.Item
4545
title="Headline"
4646
description="Supporting text"
47-
left={(props) => <List.Icon {...props} icon="account-outline" />}
47+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
4848
/>
4949
<List.Item
5050
title="Headline"
5151
description="Supporting text that is long enough to fill up multiple lines in the item"
52-
left={(props) => <List.Icon {...props} icon="account-outline" />}
52+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
5353
/>
5454
<Divider />
5555
<List.Item
5656
title="Headline"
57-
left={(props) => <List.Icon {...props} icon="account-outline" />}
57+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
5858
right={() => <CenteredCheckbox />}
5959
/>
6060
<List.Item
6161
title="Headline"
6262
description="Supporting text"
63-
left={(props) => <List.Icon {...props} icon="account-outline" />}
63+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
6464
right={() => <CenteredCheckbox />}
6565
/>
6666
<List.Item
6767
title="Headline"
6868
description="Supporting text that is long enough to fill up multiple lines in the item"
69-
left={(props) => <List.Icon {...props} icon="account-outline" />}
69+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
7070
right={() => <Checkbox status="checked" />}
7171
/>
7272
<Divider />
@@ -276,19 +276,19 @@ const ListItemExample = () => {
276276
<Divider />
277277
<List.Item
278278
title="Headline"
279-
left={(props) => <List.Icon {...props} icon="account-outline" />}
279+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
280280
right={() => <Switch disabled style={styles.centered} />}
281281
/>
282282
<List.Item
283283
title="Headline"
284284
description="Supporting text"
285-
left={(props) => <List.Icon {...props} icon="account-outline" />}
285+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
286286
right={() => <Switch disabled style={styles.centered} />}
287287
/>
288288
<List.Item
289289
title="Headline"
290290
description="Supporting text that is long enough to fill up multiple lines in the item"
291-
left={(props) => <List.Icon {...props} icon="account-outline" />}
291+
left={(props) => <List.Icon size={32} {...props} icon="account-outline" />}
292292
right={() => <Switch disabled />}
293293
/>
294294
<Divider />

‎example/src/Examples/ListSectionExample.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ const ListSectionExample = () => {
1010
<List.Section>
1111
<List.Subheader>Single line</List.Subheader>
1212
<List.Item
13-
left={(props) => <List.Icon {...props} icon="calendar" />}
13+
left={(props) => <List.Icon size={32} {...props} icon="calendar" />}
1414
title="List item 1"
1515
/>
1616
<List.Item
17-
left={(props) => <List.Icon {...props} icon="wallet-giftcard" />}
17+
left={(props) => <List.Icon size={32} {...props} icon="wallet-giftcard" />}
1818
title="List item 2"
1919
/>
2020
<List.Item
2121
title="List item 3"
22-
left={(props) => <List.Icon {...props} icon="folder" />}
23-
right={(props) => <List.Icon {...props} icon="equal" />}
22+
left={(props) => <List.Icon size={32} {...props} icon="folder" />}
23+
right={(props) => <List.Icon size={32} {...props} icon="equal" />}
2424
/>
2525
</List.Section>
2626
<Divider />
@@ -45,7 +45,7 @@ const ListSectionExample = () => {
4545
accessibilityIgnoresInvertColors
4646
/>
4747
)}
48-
right={(props) => <List.Icon {...props} icon="information" />}
48+
right={(props) => <List.Icon size={32} {...props} icon="information" />}
4949
title="List item 2"
5050
description="Describes item 2"
5151
/>
@@ -72,7 +72,7 @@ const ListSectionExample = () => {
7272
accessibilityIgnoresInvertColors
7373
/>
7474
)}
75-
right={(props) => <List.Icon {...props} icon="star-outline" />}
75+
right={(props) => <List.Icon size={32} {...props} icon="star-outline" />}
7676
title="List item 2"
7777
description="Describes item 2. Example of a very very long description."
7878
/>
@@ -88,7 +88,7 @@ const ListSectionExample = () => {
8888
accessibilityIgnoresInvertColors
8989
/>
9090
)}
91-
right={(props) => <List.Icon {...props} icon="star-outline" />}
91+
right={(props) => <List.Icon size={32} {...props} icon="star-outline" />}
9292
title={({ ellipsizeMode, color: titleColor, fontSize }) => (
9393
<View style={[styles.container, styles.row, styles.customTitle]}>
9494
<Text

‎example/src/Examples/SegmentedButtonsExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ const SegmentedButtonExample = ({ navigation }: Props) => {
2828
title="Single select"
2929
description="Go to the example"
3030
onPress={() => navigation.navigate('segmentedButtonRealCase')}
31-
right={(props) => <List.Icon {...props} icon="arrow-right" />}
31+
right={(props) => <List.Icon size={32} {...props} icon="arrow-right" />}
3232
/>
3333
<List.Item
3434
title="Multiselect select"
3535
description="Go to the example"
3636
onPress={() =>
3737
navigation.navigate('segmentedButtonMultiselectRealCase')
3838
}
39-
right={(props) => <List.Icon {...props} icon="arrow-right" />}
39+
right={(props) => <List.Icon size={32} {...props} icon="arrow-right" />}
4040
/>
4141
</List.Section>
4242
<SegmentedButtonDefault />

‎example/src/Examples/ThemeExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ThemeExample = ({ navigation }: Props) => {
2424
title="Themed Sport App"
2525
description="Go to the example"
2626
onPress={() => navigation.navigate('teamsList')}
27-
right={(props) => <List.Icon {...props} icon="arrow-right" />}
27+
right={(props) => <List.Icon size={32} {...props} icon="arrow-right" />}
2828
/>
2929
</List.Section>
3030
</ScreenWrapper>

‎src/components/List/ListIcon.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ export type Props = {
1919
* @optional
2020
*/
2121
theme?: ThemeProp;
22+
/**
23+
* Size of the icon.
24+
*/
25+
iconSize?: number;
2226
};
2327

2428
const ICON_SIZE = 24;
@@ -34,19 +38,21 @@ const ICON_SIZE = 24;
3438
* const MyComponent = () => (
3539
* <>
3640
* <List.Icon color={MD3Colors.tertiary70} icon="folder" />
37-
* <List.Icon color={MD3Colors.tertiary70} icon="equal" />
38-
* <List.Icon color={MD3Colors.tertiary70} icon="calendar" />
41+
* <List.Icon color={MD3Colors.tertiary70} icon="equal" iconSize={32} /> // 👈 NEW EXAMPLE
42+
* <List.Icon color={MD3Colors.tertiary70} icon="calendar" iconSize={18} />
3943
* </>
4044
* );
41-
*
42-
* export default MyComponent;
4345
* ```
46+
*
47+
* @property iconSize Size of the icon.
4448
*/
49+
4550
const ListIcon = ({
4651
icon,
4752
color: iconColor,
4853
style,
4954
theme: themeOverrides,
55+
iconSize,
5056
}: Props) => {
5157
const theme = useInternalTheme(themeOverrides);
5258

@@ -55,7 +61,12 @@ const ListIcon = ({
5561
style={[theme.isV3 ? styles.itemV3 : styles.item, style]}
5662
pointerEvents="box-none"
5763
>
58-
<Icon source={icon} size={ICON_SIZE} color={iconColor} theme={theme} />
64+
<Icon
65+
source={icon}
66+
size={iconSize || ICON_SIZE}
67+
color={iconColor}
68+
theme={theme}
69+
/>
5970
</View>
6071
);
6172
};

0 commit comments

Comments
 (0)