diff --git a/example/src/Examples/ListItemExample.tsx b/example/src/Examples/ListItemExample.tsx index 4d5a69b400..277513bc5d 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)} + leading={} + /> + ))} + + + ); +}; + const ListItemExample = () => { return ( + + diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 97730d58e6..30a917bd13 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -12,11 +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 { getAccordionColors, getLeftStyles } 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'; @@ -46,6 +60,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. */ @@ -190,6 +208,7 @@ const ListAccordion = ({ onLongPress, delayLongPress, expanded: expandedProp, + selected, 'aria-label': ariaLabel, pointerEvents = 'none', titleMaxFontSizeMultiplier, @@ -201,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) => { @@ -232,10 +262,75 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const { descriptionColor, titleTextColor } = getAccordionColors({ - theme, - isExpanded, - }); + 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 + : 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,14 +338,21 @@ const ListAccordion = ({ : handlePressAction; return ( - + {left ? left({ - color: isExpanded ? theme.colors?.primary : descriptionColor, - style: getLeftStyles(alignToTop, description), + color: leadingIconColor, + style: getLeftStyles(isDescriptionMultiline, description), }) : null} {description ? ( ) : null} - + {right ? ( right({ isExpanded: isExpanded, }) ) : ( - + + + )} - {isExpanded - ? React.Children.map(children, (child) => { + {isExpanded ? ( + + {React.Children.map(children, (child) => { if ( left && React.isValidElement(child) && @@ -339,8 +443,9 @@ const ListAccordion = ({ } return child; - }) - : null} + })} + + ) : null} ); }; @@ -349,34 +454,33 @@ ListAccordion.displayName = 'List.Accordion'; const styles = StyleSheet.create({ container: { - paddingVertical: 8, - paddingRight: 24, + paddingRight: ListTokens.trailingSpace, }, - row: { - flexDirection: 'row', - marginVertical: 6, + containerOneLine: { + paddingVertical: ListTokens.oneLineVerticalPadding, }, - multiline: { - height: 40, - alignItems: 'center', - justifyContent: 'center', + containerTwoLine: { + paddingVertical: ListTokens.twoLineVerticalPadding, }, - title: { - fontSize: 16, + containerThreeLine: { + paddingVertical: ListTokens.threeLineVerticalPadding, }, - description: { - fontSize: 14, + row: { + flexDirection: 'row', }, contentItem: { - paddingLeft: 16, + paddingLeft: ListTokens.leadingSpace, }, trailingItem: { - marginVertical: 6, + alignSelf: 'center', paddingLeft: 8, }, child: { paddingLeft: 40, }, + expandedContent: { + overflow: 'hidden', + }, content: { flex: 1, justifyContent: 'center', 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 a6f0181f02..a5893eb7b2 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,6 +10,8 @@ import type { ViewStyle, } from 'react-native'; +import { ListItemContext } from './ListItemContext'; +import { ListTokens } from './tokens'; import { getLeftStyles, getRightStyles } from './utils'; import type { Style } from './utils'; import { useInternalTheme } from '../../core/theming'; @@ -44,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. */ @@ -52,6 +62,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. */ @@ -141,8 +155,11 @@ export type Props = $RemoveChildren & { const ListItem = ({ left, right, + leading, + trailing, title, description, + selected, onPress, theme: themeOverrides, style, @@ -161,15 +178,33 @@ 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 + ? theme.colors[ListTokens.selectedContainerColor] + : undefined; + const titleColor = selected + ? theme.colors[ListTokens.selectedContentColor] + : theme.colors[ListTokens.headlineColor]; + const renderDescription = ( descriptionColor: ColorValue, description?: Description | null @@ -179,18 +214,15 @@ const ListItem = ({ selectable: false, ellipsizeMode: descriptionEllipsizeMode, color: descriptionColor, - fontSize: styles.description.fontSize, + fontSize: theme.fonts.bodyMedium.fontSize, }) ) : ( @@ -200,21 +232,20 @@ const ListItem = ({ }; const renderTitle = () => { - const titleColor = theme.colors.onSurface; - return typeof title === 'function' ? ( title({ selectable: false, ellipsizeMode: titleEllipsizeMode, color: titleColor, - fontSize: styles.title.fontSize, + fontSize: theme.fonts.bodyLarge.fontSize, }) ) : ( {title} @@ -222,41 +253,70 @@ const ListItem = ({ ); }; - const descriptionColor = theme.colors.onSurfaceVariant; + const descriptionColor = selected + ? 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(alignToTop, description), - }) - : null} - - {renderTitle()} + + + {renderLeading()} + + {renderTitle()} - {description - ? renderDescription(descriptionColor, description) - : null} + {description + ? renderDescription(descriptionColor, description) + : null} + + {renderTrailing()} - {right - ? right({ - color: descriptionColor, - style: getRightStyles(alignToTop, description), - }) - : null} - + ); }; @@ -265,22 +325,23 @@ ListItem.displayName = 'List.Item'; const styles = StyleSheet.create({ container: { - paddingVertical: 8, - paddingRight: 24, + paddingRight: ListTokens.trailingSpace, + }, + containerOneLine: { + paddingVertical: ListTokens.oneLineVerticalPadding, + }, + containerTwoLine: { + paddingVertical: ListTokens.twoLineVerticalPadding, + }, + containerThreeLine: { + paddingVertical: ListTokens.threeLineVerticalPadding, }, row: { width: '100%', flexDirection: 'row', - marginVertical: 6, - }, - title: { - fontSize: 16, - }, - description: { - fontSize: 14, }, item: { - paddingLeft: 16, + paddingLeft: ListTokens.leadingSpace, }, content: { flexShrink: 1, 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/List/tokens.ts b/src/components/List/tokens.ts new file mode 100644 index 0000000000..67ee1210b3 --- /dev/null +++ b/src/components/List/tokens.ts @@ -0,0 +1,21 @@ +import type { ColorRole } from '../../theme/types'; + +const sizes = { + oneLineVerticalPadding: 16, + twoLineVerticalPadding: 14, + threeLineVerticalPadding: 12, + leadingSpace: 16, + trailingSpace: 24, +} as const; + +const colors = { + containerColor: 'surface', + headlineColor: 'onSurface', + supportingTextColor: 'onSurfaceVariant', + leadingIconColor: 'onSurfaceVariant', + trailingIconColor: 'onSurfaceVariant', + selectedContainerColor: 'primaryContainer', + selectedContentColor: 'onPrimaryContainer', +} as const satisfies Record; + +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..afbf2c06d8 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,43 @@ 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( + + + + ); + + expect(screen.getByText('Accordion item 1')).toHaveStyle({ + color: getTheme().colors.onSurface, }); }); -}); -describe('getAccordionColors - title text color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getAccordionColors({ - theme: getTheme(), - }) - ).toMatchObject({ - titleTextColor: getTheme().colors.onSurface, + it('keeps the title on onSurface when expanded', async () => { + await render( + + + + ); + + 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('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..dc1eef5a5a 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -5,7 +5,8 @@ import { Text, View } from 'react-native'; import { expect, it, jest } from '@jest/globals'; import { userEvent } from '@testing-library/react-native'; -import { render, screen } from '../../test-utils'; +import { getTheme } from '../../core/theming'; +import { fireEvent, render, screen } from '../../test-utils'; import { red500 } from '../../theme/colors'; import Chip from '../Chip/Chip'; import IconButton from '../IconButton/IconButton'; @@ -175,3 +176,103 @@ 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( + + ); + + 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( + + ); + + 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 66fa6d11e8..0757e3e0e9 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,100 +117,111 @@ exports[`renders expanded accordion 1`] = ` - - chevron-up - + + chevron-down + + @@ -216,49 +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 - + [ + { + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + "letterSpacing": 0.5, + "lineHeight": 24, + }, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], + ], + ] + } + > + List item 1 + + @@ -313,7 +339,9 @@ exports[`renders list accordion with children 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, }, undefined, ], @@ -326,7 +354,6 @@ exports[`renders list accordion with children 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -403,21 +430,22 @@ exports[`renders list accordion with children 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -427,44 +455,53 @@ exports[`renders list accordion with children 1`] = ` - - chevron-down - + + chevron-down + + @@ -520,7 +557,9 @@ exports[`renders list accordion with custom title and description styles 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 14, }, undefined, ], @@ -533,7 +572,6 @@ exports[`renders list accordion with custom title and description styles 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -563,23 +601,24 @@ exports[`renders list accordion with custom title and description styles 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(29, 27, 32, 1)", - }, - { - "color": "#f44336", - }, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + { + "color": "#f44336", + }, + ], ], ] } @@ -597,23 +636,24 @@ exports[`renders list accordion with custom title and description styles 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { + "fontFamily": "System", "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, - { - "color": "rgba(73, 69, 79, 1)", - }, - { - "color": "#f44336", - }, + [ + { + "color": "rgba(73, 69, 79, 1)", + }, + { + "color": "#f44336", + }, + ], ], ] } @@ -623,48 +663,53 @@ exports[`renders list accordion with custom title and description styles 1`] = ` - - chevron-down - + + chevron-down + + @@ -720,7 +765,9 @@ exports[`renders list accordion with left items 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, }, undefined, ], @@ -733,7 +780,6 @@ exports[`renders list accordion with left items 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -810,21 +856,22 @@ exports[`renders list accordion with left items 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -834,44 +881,53 @@ exports[`renders list accordion with left items 1`] = ` - - chevron-down - + + chevron-down + + @@ -927,7 +983,9 @@ exports[`renders multiline list accordion 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 14, }, undefined, ], @@ -940,7 +998,6 @@ exports[`renders multiline list accordion 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -970,21 +1027,22 @@ exports[`renders multiline list 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -1002,21 +1060,22 @@ exports[`renders multiline list accordion 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { + "fontFamily": "System", "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, - { - "color": "rgba(73, 69, 79, 1)", - }, - undefined, + [ + { + "color": "rgba(73, 69, 79, 1)", + }, + undefined, + ], ], ] } @@ -1026,48 +1085,53 @@ exports[`renders multiline list accordion 1`] = ` - - chevron-down - + + chevron-down + + diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index f06b87045f..eeafbb4242 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -37,7 +37,12 @@ exports[`renders list item with custom description 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 14, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -50,7 +55,6 @@ exports[`renders list item with custom description 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -83,21 +87,22 @@ exports[`renders list item with custom description 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -363,7 +368,12 @@ exports[`renders list item with custom title and description styles 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 14, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -376,7 +386,6 @@ exports[`renders list item with custom title and description styles 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -409,23 +418,24 @@ exports[`renders list item with custom title and description styles 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(29, 27, 32, 1)", - }, - { - "fontSize": 20, - }, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + { + "fontSize": 20, + }, + ], ], ] } @@ -443,23 +453,24 @@ exports[`renders list item with custom title and description styles 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { + "fontFamily": "System", "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, - { - "color": "rgba(73, 69, 79, 1)", - }, - { - "color": "#f44336", - }, + [ + { + "color": "rgba(73, 69, 79, 1)", + }, + { + "color": "#f44336", + }, + ], ], ] } @@ -508,7 +519,12 @@ exports[`renders list item with left and right items 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 14, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -521,7 +537,6 @@ exports[`renders list item with left and right items 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -557,21 +572,22 @@ exports[`renders list item with left and right items 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -589,21 +605,22 @@ exports[`renders list item with left and right items 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { + "fontFamily": "System", "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, - { - "color": "rgba(73, 69, 79, 1)", - }, - undefined, + [ + { + "color": "rgba(73, 69, 79, 1)", + }, + undefined, + ], ], ] } @@ -698,7 +715,12 @@ exports[`renders list item with left item 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -711,7 +733,6 @@ exports[`renders list item with left item 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -791,21 +812,22 @@ exports[`renders list item with left item 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -854,7 +876,12 @@ exports[`renders list item with right item 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -867,7 +894,6 @@ exports[`renders list item with right item 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -900,21 +926,22 @@ exports[`renders list item with right item 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -966,7 +993,12 @@ exports[`renders list item with title and description 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 14, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -979,7 +1011,6 @@ exports[`renders list item with title and description 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1012,21 +1043,22 @@ exports[`renders list item with title and description 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -1044,21 +1076,22 @@ exports[`renders list item with title and description 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { + "fontFamily": "System", "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, - { - "color": "rgba(73, 69, 79, 1)", - }, - undefined, + [ + { + "color": "rgba(73, 69, 79, 1)", + }, + undefined, + ], ], ] } @@ -1107,7 +1140,12 @@ exports[`renders with a description with typeof number 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 14, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1120,7 +1158,6 @@ exports[`renders with a description with typeof number 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1153,23 +1190,24 @@ exports[`renders with a description with typeof number 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(29, 27, 32, 1)", - }, - { - "fontSize": 20, - }, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + { + "fontSize": 20, + }, + ], ], ] } @@ -1187,23 +1225,24 @@ exports[`renders with a description with typeof number 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { + "fontFamily": "System", "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, - { - "color": "rgba(73, 69, 79, 1)", - }, - { - "color": "#f44336", - }, + [ + { + "color": "rgba(73, 69, 79, 1)", + }, + { + "color": "#f44336", + }, + ], ], ] } diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index 7e7dcc158c..a8d430edca 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -489,7 +489,12 @@ exports[`renders list section with custom title style 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -502,7 +507,6 @@ exports[`renders list section with custom title style 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -582,21 +586,22 @@ exports[`renders list section with custom title style 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -642,7 +647,12 @@ exports[`renders list section with custom title style 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -655,7 +665,6 @@ exports[`renders list section with custom title style 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -735,21 +744,22 @@ exports[`renders list section with custom title style 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -1249,7 +1259,12 @@ exports[`renders list section with subheader 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1262,7 +1277,6 @@ exports[`renders list section with subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1342,21 +1356,22 @@ exports[`renders list section with subheader 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -1402,7 +1417,12 @@ exports[`renders list section with subheader 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1415,7 +1435,6 @@ exports[`renders list section with subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1495,21 +1514,22 @@ exports[`renders list section with subheader 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -1969,7 +1989,12 @@ exports[`renders list section without subheader 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1982,7 +2007,6 @@ exports[`renders list section without subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -2062,21 +2086,22 @@ exports[`renders list section without subheader 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] } @@ -2122,7 +2147,12 @@ exports[`renders list section without subheader 1`] = ` [ { "paddingRight": 24, - "paddingVertical": 8, + }, + { + "paddingVertical": 16, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -2135,7 +2165,6 @@ exports[`renders list section without subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -2215,21 +2244,22 @@ exports[`renders list section without subheader 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(29, 27, 32, 1)", - }, - undefined, + [ + { + "color": "rgba(29, 27, 32, 1)", + }, + undefined, + ], ], ] }