From da8be56896a6620a3ebbcfa9bca797df5aa32527 Mon Sep 17 00:00:00 2001 From: Adam Sajko Date: Fri, 7 Aug 2026 12:24:00 +0200 Subject: [PATCH 1/5] refactor: align List tokens, spacing and typography with MD3 --- src/components/List/ListAccordion.tsx | 59 ++-- src/components/List/ListItem.tsx | 43 +-- src/components/List/tokens.ts | 18 ++ src/components/List/utils.ts | 85 +----- .../__tests__/ListAccordion.test.tsx | 48 ++-- .../__snapshots__/ListAccordion.test.tsx.snap | 253 ++++++++--------- .../__snapshots__/ListItem.test.tsx.snap | 260 ++++++++++-------- .../__snapshots__/ListSection.test.tsx.snap | 144 +++++----- 8 files changed, 435 insertions(+), 475 deletions(-) create mode 100644 src/components/List/tokens.ts diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 97730d58e6..4d8c09bf5b 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -13,8 +13,9 @@ import type { } from 'react-native'; import { ListAccordionGroupContext } from './ListAccordionGroup'; +import { ListTokens } from './tokens'; import type { ListChildProps, Style } from './utils'; -import { getAccordionColors, getLeftStyles } from './utils'; +import { getLeftStyles } from './utils'; import { useLocale } from '../../core/locale'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; @@ -232,10 +233,8 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const { descriptionColor, titleTextColor } = getAccordionColors({ - theme, - isExpanded, - }); + const titleTextColor = theme.colors[ListTokens.headlineColor]; + const descriptionColor = theme.colors[ListTokens.supportingTextColor]; const handlePress = groupContext && id !== undefined @@ -243,9 +242,15 @@ const ListAccordion = ({ : handlePressAction; return ( - + {left ? left({ - color: isExpanded ? theme.colors?.primary : descriptionColor, + color: theme.colors[ListTokens.leadingIconColor], style: getLeftStyles(alignToTop, description), }) : null} {description ? ( ) : null} - + {right ? ( right({ isExpanded: isExpanded, @@ -314,7 +314,7 @@ const ListAccordion = ({ ) : ( @@ -349,29 +349,22 @@ ListAccordion.displayName = 'List.Accordion'; const styles = StyleSheet.create({ container: { - paddingVertical: 8, - paddingRight: 24, + paddingRight: ListTokens.trailingSpace, }, - row: { - flexDirection: 'row', - marginVertical: 6, - }, - multiline: { - height: 40, - alignItems: 'center', - justifyContent: 'center', + containerOneLine: { + paddingVertical: ListTokens.oneLineVerticalPadding, }, - title: { - fontSize: 16, + containerTwoLine: { + paddingVertical: ListTokens.twoLineVerticalPadding, }, - description: { - fontSize: 14, + row: { + flexDirection: 'row', }, contentItem: { - paddingLeft: 16, + paddingLeft: ListTokens.leadingSpace, }, trailingItem: { - marginVertical: 6, + alignSelf: 'center', paddingLeft: 8, }, child: { diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index a6f0181f02..5332148591 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,6 +10,7 @@ import type { ViewStyle, } from 'react-native'; +import { ListTokens } from './tokens'; import { getLeftStyles, getRightStyles } from './utils'; import type { Style } from './utils'; import { useInternalTheme } from '../../core/theming'; @@ -179,18 +180,15 @@ const ListItem = ({ selectable: false, ellipsizeMode: descriptionEllipsizeMode, color: descriptionColor, - fontSize: styles.description.fontSize, + fontSize: theme.fonts.bodyMedium.fontSize, }) ) : ( @@ -200,21 +198,22 @@ const ListItem = ({ }; const renderTitle = () => { - const titleColor = theme.colors.onSurface; + const titleColor = theme.colors[ListTokens.headlineColor]; return typeof title === 'function' ? ( title({ selectable: false, ellipsizeMode: titleEllipsizeMode, color: titleColor, - fontSize: styles.title.fontSize, + fontSize: theme.fonts.bodyLarge.fontSize, }) ) : ( {title} @@ -222,13 +221,17 @@ const ListItem = ({ ); }; - const descriptionColor = theme.colors.onSurfaceVariant; + const descriptionColor = theme.colors[ListTokens.supportingTextColor]; return ( ; + +export const ListTokens = { ...sizes, ...colors }; diff --git a/src/components/List/utils.ts b/src/components/List/utils.ts index 7b7a868de0..2eb124f2c3 100644 --- a/src/components/List/utils.ts +++ b/src/components/List/utils.ts @@ -1,7 +1,7 @@ -import { StyleSheet } from 'react-native'; import type { StyleProp, ViewStyle } from 'react-native'; -import type { EllipsizeProp, InternalTheme, ThemeProp } from '../../types'; +import { ListTokens } from './tokens'; +import type { EllipsizeProp, ThemeProp } from '../../types'; type Description = | React.ReactNode @@ -26,82 +26,21 @@ export type Style = { alignSelf?: 'flex-start' | 'center'; }; -const stylesV3Left = { - marginRight: 0, - marginLeft: 16, -}; - -const stylesV3Right = { - marginLeft: 16, -}; - -export const getLeftStyles = ( - alignToTop: boolean, - description: Description -) => { - const stylesV3: Style = { - ...stylesV3Left, - alignSelf: alignToTop ? 'flex-start' : 'center', - }; - - if (!description) { - return { - ...styles.iconMarginLeft, - ...styles.marginVerticalNone, - ...stylesV3, - }; - } - - return { - ...styles.iconMarginLeft, - ...stylesV3, - }; -}; - -export const getRightStyles = ( +const getAccessoryStyles = ( alignToTop: boolean, description: Description -) => { - const stylesV3: Style = { - ...stylesV3Right, +): Style => { + const style: Style = { + marginLeft: ListTokens.leadingSpace, + marginRight: 0, alignSelf: alignToTop ? 'flex-start' : 'center', }; - if (!description) { - return { - ...styles.iconMarginRight, - ...styles.marginVerticalNone, - ...stylesV3, - }; - } - - return { - ...styles.iconMarginRight, - ...stylesV3, - }; + return description ? style : { ...style, marginVertical: 0 }; }; -const styles = StyleSheet.create({ - marginVerticalNone: { marginVertical: 0 }, - iconMarginLeft: { marginLeft: 0, marginRight: 16 }, - iconMarginRight: { marginRight: 0 }, -}); +export const getLeftStyles = (alignToTop: boolean, description: Description) => + getAccessoryStyles(alignToTop, description); -export const getAccordionColors = ({ - theme, - isExpanded, -}: { - theme: InternalTheme; - isExpanded?: boolean; -}) => { - const titleColor = theme.colors.onSurface; - - const descriptionColor = theme.colors.onSurfaceVariant; - - const titleTextColor = isExpanded ? theme.colors?.primary : titleColor; - - return { - descriptionColor, - titleTextColor, - }; -}; +export const getRightStyles = (alignToTop: boolean, description: Description) => + getAccessoryStyles(alignToTop, description); diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index ad1783ec52..f17f49345e 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -3,13 +3,12 @@ import { StyleSheet, View } from 'react-native'; import { describe, expect, it } from '@jest/globals'; import { getTheme } from '../../core/theming'; -import { render } from '../../test-utils'; +import { render, screen } from '../../test-utils'; import { red500 } from '../../theme/colors'; import ListAccordion from '../List/ListAccordion'; import ListAccordionGroup from '../List/ListAccordionGroup'; import ListIcon from '../List/ListIcon'; import ListItem from '../List/ListItem'; -import { getAccordionColors } from '../List/utils'; const styles = StyleSheet.create({ coloring: { @@ -120,39 +119,28 @@ describe('ListAccordion', () => { 'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.' ); }); -}); -describe('getAccordionColors - description color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getAccordionColors({ - theme: getTheme(), - }) - ).toMatchObject({ - descriptionColor: getTheme().colors.onSurfaceVariant, - }); - }); -}); + it('keeps the title on onSurface when collapsed', async () => { + await render( + + + + ); -describe('getAccordionColors - title text color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getAccordionColors({ - theme: getTheme(), - }) - ).toMatchObject({ - titleTextColor: getTheme().colors.onSurface, + expect(screen.getByText('Accordion item 1')).toHaveStyle({ + color: getTheme().colors.onSurface, }); }); - it('should return primary color if it is expanded', () => { - expect( - getAccordionColors({ - theme: getTheme(), - isExpanded: true, - }) - ).toMatchObject({ - titleTextColor: getTheme().colors?.primary, + it('keeps the title on onSurface when expanded', async () => { + await render( + + + + ); + + expect(screen.getByText('Accordion item 1')).toHaveStyle({ + color: getTheme().colors.onSurface, }); }); }); diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 66fa6d11e8..8a3626c1bf 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -48,7 +48,9 @@ exports[`renders expanded accordion 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, }, undefined, ], @@ -61,7 +63,6 @@ exports[`renders expanded accordion 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -91,21 +92,22 @@ exports[`renders expanded accordion 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { + "fontFamily": "System", "fontSize": 16, + "fontWeight": "400", + "letterSpacing": 0.5, + "lineHeight": 24, }, - { - "color": "rgba(103, 80, 164, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -115,13 +117,10 @@ exports[`renders expanded accordion 1`] = ` Date: Fri, 7 Aug 2026 12:29:52 +0200 Subject: [PATCH 2/5] feat: add selected state to List.Item and List.Accordion --- example/src/Examples/ListItemExample.tsx | 23 +++++++++++ src/components/List/ListAccordion.tsx | 31 ++++++++++++--- src/components/List/ListItem.tsx | 20 ++++++++-- src/components/List/tokens.ts | 2 + .../__tests__/ListAccordion.test.tsx | 15 +++++++ src/components/__tests__/ListItem.test.tsx | 39 +++++++++++++++++++ .../__snapshots__/ListAccordion.test.tsx.snap | 3 ++ .../__snapshots__/ListItem.test.tsx.snap | 21 ++++++++++ .../__snapshots__/ListSection.test.tsx.snap | 18 +++++++++ 9 files changed, 164 insertions(+), 8 deletions(-) diff --git a/example/src/Examples/ListItemExample.tsx b/example/src/Examples/ListItemExample.tsx index 4d5a69b400..c7a8475bf2 100644 --- a/example/src/Examples/ListItemExample.tsx +++ b/example/src/Examples/ListItemExample.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { List, Divider, Checkbox, Avatar, Switch } from 'react-native-paper'; @@ -10,9 +11,31 @@ const CenteredCheckbox = () => ( ); +const SelectableSection = () => { + const [selected, setSelected] = useState(0); + + return ( + + {[0, 1, 2].map((index) => ( + setSelected(index)} + left={(props) => } + /> + ))} + + + ); +}; + const ListItemExample = () => { return ( + + diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 4d8c09bf5b..87b0702bf3 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -47,6 +47,10 @@ export type Props = { * You'll need to update this prop when you want to toggle the component or on `onPress`. */ expanded?: boolean; + /** + * Whether to highlight the accordion as selected. + */ + selected?: boolean; /** * Function to execute on press. */ @@ -191,6 +195,7 @@ const ListAccordion = ({ onLongPress, delayLongPress, expanded: expandedProp, + selected, 'aria-label': ariaLabel, pointerEvents = 'none', titleMaxFontSizeMultiplier, @@ -233,8 +238,19 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const titleTextColor = theme.colors[ListTokens.headlineColor]; - const descriptionColor = theme.colors[ListTokens.supportingTextColor]; + const selectedContentColor = theme.colors[ListTokens.selectedContentColor]; + const titleTextColor = selected + ? selectedContentColor + : theme.colors[ListTokens.headlineColor]; + const descriptionColor = selected + ? selectedContentColor + : theme.colors[ListTokens.supportingTextColor]; + const leadingIconColor = selected + ? selectedContentColor + : theme.colors[ListTokens.leadingIconColor]; + const trailingIconColor = selected + ? selectedContentColor + : theme.colors[ListTokens.trailingIconColor]; const handlePress = groupContext && id !== undefined @@ -243,7 +259,11 @@ const ListAccordion = ({ return ( {left ? left({ - color: theme.colors[ListTokens.leadingIconColor], + color: leadingIconColor, style: getLeftStyles(alignToTop, description), }) : null} @@ -314,7 +335,7 @@ const ListAccordion = ({ ) : ( diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 5332148591..8e280f09b9 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -53,6 +53,10 @@ export type Props = $RemoveChildren & { * Callback which returns a React element to display on the right side. */ right?: (props: { color: ColorValue; style?: Style }) => React.ReactNode; + /** + * Whether to highlight the list item as selected. + */ + selected?: boolean; /** * Function to execute on press. */ @@ -144,6 +148,7 @@ const ListItem = ({ right, title, description, + selected, onPress, theme: themeOverrides, style, @@ -171,6 +176,13 @@ const ListItem = ({ setAlignToTop(nativeEvent.lines.length >= 2); }; + const backgroundColor = selected + ? theme.colors[ListTokens.selectedContainerColor] + : undefined; + const titleColor = selected + ? theme.colors[ListTokens.selectedContentColor] + : theme.colors[ListTokens.headlineColor]; + const renderDescription = ( descriptionColor: ColorValue, description?: Description | null @@ -198,8 +210,6 @@ const ListItem = ({ }; const renderTitle = () => { - const titleColor = theme.colors[ListTokens.headlineColor]; - return typeof title === 'function' ? ( title({ selectable: false, @@ -221,7 +231,9 @@ const ListItem = ({ ); }; - const descriptionColor = theme.colors[ListTokens.supportingTextColor]; + const descriptionColor = selected + ? theme.colors[ListTokens.selectedContentColor] + : theme.colors[ListTokens.supportingTextColor]; return ( diff --git a/src/components/List/tokens.ts b/src/components/List/tokens.ts index 329060c127..7d17f278b0 100644 --- a/src/components/List/tokens.ts +++ b/src/components/List/tokens.ts @@ -13,6 +13,8 @@ const colors = { supportingTextColor: 'onSurfaceVariant', leadingIconColor: 'onSurfaceVariant', trailingIconColor: 'onSurfaceVariant', + selectedContainerColor: 'primaryContainer', + selectedContentColor: 'onPrimaryContainer', } as const satisfies Record; export const ListTokens = { ...sizes, ...colors }; diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index f17f49345e..afbf2c06d8 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -143,4 +143,19 @@ describe('ListAccordion', () => { color: getTheme().colors.onSurface, }); }); + + it('renders a selected accordion on the primary container', async () => { + await render( + + + + ); + + expect(screen.getByText('Accordion item 1')).toHaveStyle({ + color: getTheme().colors.onPrimaryContainer, + }); + expect(screen.getByText('Supporting')).toHaveStyle({ + color: getTheme().colors.onPrimaryContainer, + }); + }); }); diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index b50f4e7d3f..b581430fb1 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -5,6 +5,7 @@ import { Text, View } from 'react-native'; import { expect, it, jest } from '@jest/globals'; import { userEvent } from '@testing-library/react-native'; +import { getTheme } from '../../core/theming'; import { render, screen } from '../../test-utils'; import { red500 } from '../../theme/colors'; import Chip from '../Chip/Chip'; @@ -175,3 +176,41 @@ it('renders list item with custom content style', async () => { expect(screen.getByTestId('list-item-content')).toHaveStyle(styles.content); }); + +it('renders an unselected list item on surface colors', async () => { + await render( + + ); + + expect(screen.getByText('First Item')).toHaveStyle({ + color: getTheme().colors.onSurface, + }); + expect(screen.getByText('Item description')).toHaveStyle({ + color: getTheme().colors.onSurfaceVariant, + }); +}); + +it('renders a selected list item on the primary container', async () => { + await render( + + ); + + expect(screen.getByTestId(testID)).toHaveStyle({ + backgroundColor: getTheme().colors.primaryContainer, + }); + expect(screen.getByText('First Item')).toHaveStyle({ + color: getTheme().colors.onPrimaryContainer, + }); + expect(screen.getByText('Item description')).toHaveStyle({ + color: getTheme().colors.onPrimaryContainer, + }); +}); diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 8a3626c1bf..157f9a2753 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -196,6 +196,9 @@ exports[`renders expanded accordion 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index f4e24d6b3a..eeafbb4242 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -41,6 +41,9 @@ exports[`renders list item with custom description 1`] = ` { "paddingVertical": 14, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -369,6 +372,9 @@ exports[`renders list item with custom title and description styles 1`] = ` { "paddingVertical": 14, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -517,6 +523,9 @@ exports[`renders list item with left and right items 1`] = ` { "paddingVertical": 14, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -710,6 +719,9 @@ exports[`renders list item with left item 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -868,6 +880,9 @@ exports[`renders list item with right item 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -982,6 +997,9 @@ exports[`renders list item with title and description 1`] = ` { "paddingVertical": 14, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -1126,6 +1144,9 @@ exports[`renders with a description with typeof number 1`] = ` { "paddingVertical": 14, }, + { + "backgroundColor": undefined, + }, undefined, ], ] diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index 8bb42ff5d9..a8d430edca 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -493,6 +493,9 @@ exports[`renders list section with custom title style 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -648,6 +651,9 @@ exports[`renders list section with custom title style 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -1257,6 +1263,9 @@ exports[`renders list section with subheader 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -1412,6 +1421,9 @@ exports[`renders list section with subheader 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -1981,6 +1993,9 @@ exports[`renders list section without subheader 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] @@ -2136,6 +2151,9 @@ exports[`renders list section without subheader 1`] = ` { "paddingVertical": 16, }, + { + "backgroundColor": undefined, + }, undefined, ], ] From 2d629a9c782273633ee76f9956f3a79b3a3101b8 Mon Sep 17 00:00:00 2001 From: Adam Sajko Date: Fri, 7 Aug 2026 12:33:36 +0200 Subject: [PATCH 3/5] feat: animate List.Accordion expand and collapse --- src/components/List/ListAccordion.tsx | 100 +++- .../__snapshots__/ListAccordion.test.tsx.snap | 448 ++++++++++-------- 2 files changed, 349 insertions(+), 199 deletions(-) diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 87b0702bf3..d6abb0f878 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -12,12 +12,25 @@ import type { ViewStyle, } from 'react-native'; +import Animated, { + Easing, + ReduceMotion, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; +import type { + EntryAnimationsValues, + ExitAnimationsValues, +} from 'react-native-reanimated'; + import { ListAccordionGroupContext } from './ListAccordionGroup'; import { ListTokens } from './tokens'; import type { ListChildProps, Style } from './utils'; import { getLeftStyles } from './utils'; import { useLocale } from '../../core/locale'; import { useInternalTheme } from '../../core/theming'; +import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext'; import type { ThemeProp } from '../../types'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; import TouchableRipple from '../TouchableRipple/TouchableRipple'; @@ -238,6 +251,62 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; + const reduceMotion = useReduceMotion(); + const reanimatedReduceMotion = reduceMotion + ? ReduceMotion.Always + : ReduceMotion.Never; + + const timingConfig = React.useMemo( + () => ({ + duration: theme.motion.duration.medium2, + easing: Easing.bezier(...theme.motion.easing.emphasized), + reduceMotion: reanimatedReduceMotion, + }), + [ + theme.motion.duration.medium2, + theme.motion.easing.emphasized, + reanimatedReduceMotion, + ] + ); + + const chevronProgress = useSharedValue(isExpanded ? 1 : 0); + + React.useEffect(() => { + chevronProgress.value = withTiming(isExpanded ? 1 : 0, timingConfig); + }, [isExpanded, chevronProgress, timingConfig]); + + const chevronStyle = useAnimatedStyle(() => ({ + transform: [{ rotate: `${chevronProgress.value * 180}deg` }], + })); + + const expandAnimation = React.useCallback( + (values: EntryAnimationsValues) => { + 'worklet'; + return { + initialValues: { height: 0, opacity: 0 }, + animations: { + height: withTiming(values.targetHeight, timingConfig), + opacity: withTiming(1, timingConfig), + }, + }; + }, + [timingConfig] + ); + + const collapseAnimation = React.useCallback( + (values: ExitAnimationsValues) => { + 'worklet'; + return { + initialValues: { height: values.currentHeight, opacity: 1 }, + animations: { + height: withTiming(0, timingConfig), + opacity: withTiming(0, timingConfig), + }, + }; + }, + [timingConfig] + ); + const selectedContentColor = theme.colors[ListTokens.selectedContentColor]; const titleTextColor = selected ? selectedContentColor @@ -333,20 +402,27 @@ const ListAccordion = ({ isExpanded: isExpanded, }) ) : ( - + + + )} - {isExpanded - ? React.Children.map(children, (child) => { + {isExpanded ? ( + + {React.Children.map(children, (child) => { if ( left && React.isValidElement(child) && @@ -360,8 +436,9 @@ const ListAccordion = ({ } return child; - }) - : null} + })} + + ) : null} ); }; @@ -391,6 +468,9 @@ const styles = StyleSheet.create({ child: { paddingLeft: 40, }, + expandedContent: { + overflow: 'hidden', + }, content: { flex: 1, justifyContent: 'center', diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 157f9a2753..0757e3e0e9 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -123,95 +123,105 @@ exports[`renders expanded accordion 1`] = ` } } > - - chevron-up - + + chevron-down + + @@ -219,50 +229,62 @@ exports[`renders expanded accordion 1`] = ` style={ [ { - "paddingLeft": 16, - }, - { - "flexGrow": 1, - "flexShrink": 1, - "justifyContent": "center", + "flexDirection": "row", + "width": "100%", }, undefined, ] } - testID="undefined-content" > - + - List item 1 - + ] + } + > + List item 1 + + @@ -439,35 +461,47 @@ exports[`renders list accordion with children 1`] = ` } } > - - chevron-down - + + chevron-down + + @@ -635,35 +669,47 @@ exports[`renders list accordion with custom title and description styles 1`] = ` } } > - - chevron-down - + + chevron-down + + @@ -841,35 +887,47 @@ exports[`renders list accordion with left items 1`] = ` } } > - - chevron-down - + + chevron-down + + @@ -1033,35 +1091,47 @@ exports[`renders multiline list accordion 1`] = ` } } > - - chevron-down - + + chevron-down + + From 9130baa369a0433438dbfe72beae202f9ed866a1 Mon Sep 17 00:00:00 2001 From: Adam Sajko Date: Fri, 7 Aug 2026 13:20:15 +0200 Subject: [PATCH 4/5] feat: use 12dp padding for three-line List items --- src/components/List/ListAccordion.tsx | 26 +++++++++++++++------- src/components/List/ListItem.tsx | 24 +++++++++++++++----- src/components/List/tokens.ts | 1 + src/components/__tests__/ListItem.test.tsx | 20 ++++++++++++++++- 4 files changed, 57 insertions(+), 14 deletions(-) diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index d6abb0f878..30a917bd13 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -220,13 +220,24 @@ const ListAccordion = ({ const [expanded, setExpanded] = React.useState( expandedProp || false ); - const [alignToTop, setAlignToTop] = React.useState(false); + const [isDescriptionMultiline, setIsDescriptionMultiline] = + React.useState(false); const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { const { nativeEvent } = event; - setAlignToTop(nativeEvent.lines.length >= 2); + setIsDescriptionMultiline(nativeEvent.lines.length >= 2); + }; + + const getVerticalPaddingStyle = () => { + if (!description) { + return styles.containerOneLine; + } + + return isDescriptionMultiline + ? styles.containerThreeLine + : styles.containerTwoLine; }; const handlePressAction = (e: GestureResponderEvent) => { @@ -335,11 +346,7 @@ const ListAccordion = ({ }} > @@ -455,6 +462,9 @@ const styles = StyleSheet.create({ containerTwoLine: { paddingVertical: ListTokens.twoLineVerticalPadding, }, + containerThreeLine: { + paddingVertical: ListTokens.threeLineVerticalPadding, + }, row: { flexDirection: 'row', }, diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 8e280f09b9..5b6ab3ee4a 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -167,13 +167,24 @@ const ListItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const [alignToTop, setAlignToTop] = React.useState(false); + const [isDescriptionMultiline, setIsDescriptionMultiline] = + React.useState(false); const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { const { nativeEvent } = event; - setAlignToTop(nativeEvent.lines.length >= 2); + setIsDescriptionMultiline(nativeEvent.lines.length >= 2); + }; + + const getVerticalPaddingStyle = () => { + if (!description) { + return styles.containerOneLine; + } + + return isDescriptionMultiline + ? styles.containerThreeLine + : styles.containerTwoLine; }; const backgroundColor = selected @@ -241,7 +252,7 @@ const ListItem = ({ ref={ref} style={[ styles.container, - description ? styles.containerTwoLine : styles.containerOneLine, + getVerticalPaddingStyle(), { backgroundColor }, style, ]} @@ -254,7 +265,7 @@ const ListItem = ({ {left ? left({ color: descriptionColor, - style: getLeftStyles(alignToTop, description), + style: getLeftStyles(isDescriptionMultiline, description), }) : null} @@ -290,6 +301,9 @@ const styles = StyleSheet.create({ containerTwoLine: { paddingVertical: ListTokens.twoLineVerticalPadding, }, + containerThreeLine: { + paddingVertical: ListTokens.threeLineVerticalPadding, + }, row: { width: '100%', flexDirection: 'row', diff --git a/src/components/List/tokens.ts b/src/components/List/tokens.ts index 7d17f278b0..67ee1210b3 100644 --- a/src/components/List/tokens.ts +++ b/src/components/List/tokens.ts @@ -3,6 +3,7 @@ import type { ColorRole } from '../../theme/types'; const sizes = { oneLineVerticalPadding: 16, twoLineVerticalPadding: 14, + threeLineVerticalPadding: 12, leadingSpace: 16, trailingSpace: 24, } as const; diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index b581430fb1..3c620a1317 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -6,7 +6,7 @@ import { expect, it, jest } from '@jest/globals'; import { userEvent } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { render, screen } from '../../test-utils'; +import { fireEvent, render, screen } from '../../test-utils'; import { red500 } from '../../theme/colors'; import Chip from '../Chip/Chip'; import IconButton from '../IconButton/IconButton'; @@ -177,6 +177,24 @@ it('renders list item with custom content style', async () => { expect(screen.getByTestId('list-item-content')).toHaveStyle(styles.content); }); +it('drops to 12dp padding once the description wraps to a third line', async () => { + await render( + + ); + + expect(screen.getByTestId(testID)).toHaveStyle({ paddingVertical: 14 }); + + await fireEvent(screen.getByText('Item description'), 'textLayout', { + nativeEvent: { lines: [{}, {}] }, + }); + + expect(screen.getByTestId(testID)).toHaveStyle({ paddingVertical: 12 }); +}); + it('renders an unselected list item on surface colors', async () => { await render( Date: Fri, 7 Aug 2026 13:23:41 +0200 Subject: [PATCH 5/5] feat: add typed leading and trailing slots to List.Item --- example/src/Examples/ListItemExample.tsx | 2 +- src/components/List/ListIcon.tsx | 6 +- src/components/List/ListItem.tsx | 76 +++++++++++++++------- src/components/List/ListItemContext.tsx | 10 +++ src/components/__tests__/ListItem.test.tsx | 44 +++++++++++++ 5 files changed, 114 insertions(+), 24 deletions(-) create mode 100644 src/components/List/ListItemContext.tsx diff --git a/example/src/Examples/ListItemExample.tsx b/example/src/Examples/ListItemExample.tsx index c7a8475bf2..277513bc5d 100644 --- a/example/src/Examples/ListItemExample.tsx +++ b/example/src/Examples/ListItemExample.tsx @@ -23,7 +23,7 @@ const SelectableSection = () => { description="Supporting text" selected={index === selected} onPress={() => setSelected(index)} - left={(props) => } + leading={} /> ))} diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx index 0851ed6055..f9357c3d6d 100644 --- a/src/components/List/ListIcon.tsx +++ b/src/components/List/ListIcon.tsx @@ -1,6 +1,8 @@ +import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import type { ColorValue, StyleProp, ViewStyle } from 'react-native'; +import { ListItemContext } from './ListItemContext'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import Icon from '../Icon'; @@ -50,10 +52,12 @@ const ListIcon = ({ theme: themeOverrides, }: Props) => { const theme = useInternalTheme(themeOverrides); + const listItem = React.useContext(ListItemContext); + const color = iconColor ?? listItem?.color; return ( - + ); }; diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 5b6ab3ee4a..a5893eb7b2 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,6 +10,7 @@ import type { ViewStyle, } from 'react-native'; +import { ListItemContext } from './ListItemContext'; import { ListTokens } from './tokens'; import { getLeftStyles, getRightStyles } from './utils'; import type { Style } from './utils'; @@ -45,6 +46,14 @@ export type Props = $RemoveChildren & { * Description text for the list item or callback which returns a React element to display the description. */ description?: Description; + /** + * Element to display in the leading slot. Takes precedence over `left`. + */ + leading?: React.ReactNode; + /** + * Element to display in the trailing slot. Takes precedence over `right`. + */ + trailing?: React.ReactNode; /** * Callback which returns a React element to display on the left side. */ @@ -146,6 +155,8 @@ export type Props = $RemoveChildren & { const ListItem = ({ left, right, + leading, + trailing, title, description, selected, @@ -246,6 +257,35 @@ const ListItem = ({ ? theme.colors[ListTokens.selectedContentColor] : theme.colors[ListTokens.supportingTextColor]; + const accessoryContext = React.useMemo( + () => ({ color: descriptionColor }), + [descriptionColor] + ); + + const renderLeading = () => { + const accessoryStyle = getLeftStyles(isDescriptionMultiline, description); + + if (leading) { + return {leading}; + } + + return left + ? left({ color: descriptionColor, style: accessoryStyle }) + : null; + }; + + const renderTrailing = () => { + const accessoryStyle = getRightStyles(isDescriptionMultiline, description); + + if (trailing) { + return {trailing}; + } + + return right + ? right({ color: descriptionColor, style: accessoryStyle }) + : null; + }; + return ( - - {left - ? left({ - color: descriptionColor, - style: getLeftStyles(isDescriptionMultiline, description), - }) - : null} - - {renderTitle()} + + + {renderLeading()} + + {renderTitle()} - {description - ? renderDescription(descriptionColor, description) - : null} + {description + ? renderDescription(descriptionColor, description) + : null} + + {renderTrailing()} - {right - ? right({ - color: descriptionColor, - style: getRightStyles(isDescriptionMultiline, description), - }) - : null} - + ); }; diff --git a/src/components/List/ListItemContext.tsx b/src/components/List/ListItemContext.tsx new file mode 100644 index 0000000000..f372559a93 --- /dev/null +++ b/src/components/List/ListItemContext.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import type { ColorValue } from 'react-native'; + +export type ListItemContextType = { + color: ColorValue; +}; + +export const ListItemContext = React.createContext( + null +); diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index 3c620a1317..dc1eef5a5a 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -177,6 +177,50 @@ it('renders list item with custom content style', async () => { expect(screen.getByTestId('list-item-content')).toHaveStyle(styles.content); }); +it('colors a leading List.Icon from the list item context', async () => { + await render( + } + testID={testID} + /> + ); + + expect( + screen.getByText('folder', { includeHiddenElements: true }) + ).toHaveStyle({ color: getTheme().colors.onSurfaceVariant }); +}); + +it('renders the trailing slot', async () => { + await render( + Trailing} + testID={testID} + /> + ); + + expect(screen.getByText('Trailing')).toBeOnTheScreen(); +}); + +it('prefers the typed slots over the left and right render props', async () => { + await render( + Leading slot} + trailing={Trailing slot} + left={() => Left render prop} + right={() => Right render prop} + testID={testID} + /> + ); + + expect(screen.getByText('Leading slot')).toBeOnTheScreen(); + expect(screen.getByText('Trailing slot')).toBeOnTheScreen(); + expect(screen.queryByText('Left render prop')).not.toBeOnTheScreen(); + expect(screen.queryByText('Right render prop')).not.toBeOnTheScreen(); +}); + it('drops to 12dp padding once the description wraps to a third line', async () => { await render(