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 97730d58e6..4de6711101 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 { 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,14 @@ 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 handlePressAction = (e: GestureResponderEvent) => { @@ -232,10 +252,68 @@ 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 { + descriptionColor, + titleTextColor, + leadingIconColor, + trailingIconColor, + } = getAccordionColors({ theme, selected }); const handlePress = groupContext && id !== undefined @@ -243,14 +321,25 @@ 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 +432,9 @@ const ListAccordion = ({ } return child; - }) - : null} + })} + + ) : null} ); }; @@ -349,34 +443,32 @@ ListAccordion.displayName = 'List.Accordion'; const styles = StyleSheet.create({ container: { - paddingVertical: 8, - paddingRight: 24, - }, - row: { - flexDirection: 'row', - marginVertical: 6, - }, - multiline: { - height: 40, - alignItems: 'center', + paddingVertical: ListTokens.verticalPadding, + paddingRight: ListTokens.trailingSpace, justifyContent: 'center', }, - title: { - fontSize: 16, + containerOneLine: { + minHeight: ListTokens.oneLineContainerHeight, }, - description: { - fontSize: 14, + containerTwoLine: { + minHeight: ListTokens.twoLineContainerHeight, + }, + 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/ListItem.tsx b/src/components/List/ListItem.tsx index a6f0181f02..853ae08b83 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'; @@ -52,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. */ @@ -143,6 +148,7 @@ const ListItem = ({ right, title, description, + selected, onPress, theme: themeOverrides, style, @@ -161,15 +167,23 @@ 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 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 +193,16 @@ const ListItem = ({ selectable: false, ellipsizeMode: descriptionEllipsizeMode, color: descriptionColor, - fontSize: styles.description.fontSize, + fontSize: theme.fonts.bodyMedium.fontSize, }) ) : ( @@ -200,21 +212,21 @@ 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,22 +234,32 @@ const ListItem = ({ ); }; - const descriptionColor = theme.colors.onSurfaceVariant; + const descriptionColor = selected + ? theme.colors[ListTokens.selectedContentColor] + : theme.colors[ListTokens.supportingTextColor]; return ( {left ? left({ - color: descriptionColor, - style: getLeftStyles(alignToTop, description), + color: selected + ? theme.colors[ListTokens.selectedContentColor] + : theme.colors[ListTokens.leadingIconColor], + style: getLeftStyles(isDescriptionMultiline, description), }) : null} {right ? right({ - color: descriptionColor, - style: getRightStyles(alignToTop, description), + color: selected + ? theme.colors[ListTokens.selectedContentColor] + : theme.colors[ListTokens.trailingIconColor], + style: getRightStyles(isDescriptionMultiline, description), }) : null} @@ -265,22 +289,22 @@ ListItem.displayName = 'List.Item'; const styles = StyleSheet.create({ container: { - paddingVertical: 8, - paddingRight: 24, + paddingVertical: ListTokens.verticalPadding, + paddingRight: ListTokens.trailingSpace, + justifyContent: 'center', + }, + containerOneLine: { + minHeight: ListTokens.oneLineContainerHeight, + }, + containerTwoLine: { + minHeight: ListTokens.twoLineContainerHeight, }, 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/tokens.ts b/src/components/List/tokens.ts new file mode 100644 index 0000000000..ef81fc8e22 --- /dev/null +++ b/src/components/List/tokens.ts @@ -0,0 +1,22 @@ +import type { ColorRole } from '../../theme/types'; + +const sizes = { + verticalPadding: 12, + oneLineContainerHeight: 56, + twoLineContainerHeight: 72, + leadingSpace: 16, + trailingSpace: 16, +} as const; + +const colors = { + containerColor: 'surface', + headlineColor: 'onSurface', + supportingTextColor: 'onSurfaceVariant', + leadingIconColor: 'onSurfaceVariant', + trailingIconColor: 'onSurfaceVariant', + expandTrailingIconColor: 'onSurface', + 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..c6f33ddecb 100644 --- a/src/components/List/utils.ts +++ b/src/components/List/utils.ts @@ -1,6 +1,6 @@ -import { StyleSheet } from 'react-native'; import type { StyleProp, ViewStyle } from 'react-native'; +import { ListTokens } from './tokens'; import type { EllipsizeProp, InternalTheme, ThemeProp } from '../../types'; type Description = @@ -26,82 +26,46 @@ export type Style = { alignSelf?: 'flex-start' | 'center'; }; -const stylesV3Left = { - marginRight: 0, - marginLeft: 16, -}; - -const stylesV3Right = { - marginLeft: 16, -}; - -export const getLeftStyles = ( +const getAccessoryStyles = ( alignToTop: boolean, description: Description -) => { - const stylesV3: Style = { - ...stylesV3Left, +): Style => { + const style: Style = { + marginLeft: ListTokens.leadingSpace, + marginRight: 0, alignSelf: alignToTop ? 'flex-start' : 'center', }; - if (!description) { - return { - ...styles.iconMarginLeft, - ...styles.marginVerticalNone, - ...stylesV3, - }; - } - - return { - ...styles.iconMarginLeft, - ...stylesV3, - }; + return description ? style : { ...style, marginVertical: 0 }; }; -export const getRightStyles = ( - alignToTop: boolean, - description: Description -) => { - const stylesV3: Style = { - ...stylesV3Right, - alignSelf: alignToTop ? 'flex-start' : 'center', - }; - - if (!description) { - return { - ...styles.iconMarginRight, - ...styles.marginVerticalNone, - ...stylesV3, - }; - } +export const getLeftStyles = (alignToTop: boolean, description: Description) => + getAccessoryStyles(alignToTop, description); - return { - ...styles.iconMarginRight, - ...stylesV3, - }; -}; - -const styles = StyleSheet.create({ - marginVerticalNone: { marginVertical: 0 }, - iconMarginLeft: { marginLeft: 0, marginRight: 16 }, - iconMarginRight: { marginRight: 0 }, -}); +export const getRightStyles = (alignToTop: boolean, description: Description) => + getAccessoryStyles(alignToTop, description); export const getAccordionColors = ({ theme, - isExpanded, + selected, }: { theme: InternalTheme; - isExpanded?: boolean; + selected?: boolean; }) => { - const titleColor = theme.colors.onSurface; - - const descriptionColor = theme.colors.onSurfaceVariant; - - const titleTextColor = isExpanded ? theme.colors?.primary : titleColor; + const selectedContentColor = theme.colors[ListTokens.selectedContentColor]; return { - descriptionColor, - titleTextColor, + titleTextColor: selected + ? selectedContentColor + : theme.colors[ListTokens.headlineColor], + descriptionColor: selected + ? selectedContentColor + : theme.colors[ListTokens.supportingTextColor], + leadingIconColor: selected + ? selectedContentColor + : theme.colors[ListTokens.leadingIconColor], + trailingIconColor: selected + ? selectedContentColor + : theme.colors[ListTokens.expandTrailingIconColor], }; }; diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index ad1783ec52..0ea5904aa0 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 { fireEvent, 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,117 @@ 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', () => { + it('hits the container heights without measuring the description', async () => { + await render( + + + + ); + + expect(screen.getByTestId('list-accordion')).toHaveStyle({ + minHeight: 56, + paddingVertical: 12, + }); + }); + + it('keeps the two line container height once a description is present', async () => { + await render( + + + + ); + + expect(screen.getByTestId('list-accordion')).toHaveStyle({ + minHeight: 72, + paddingVertical: 12, + }); + + await fireEvent( + screen.getByText('Describes the expandable list item'), + 'textLayout', + { nativeEvent: { lines: [{}, {}] } } + ); + + expect(screen.getByTestId('list-accordion')).toHaveStyle({ + minHeight: 72, + paddingVertical: 12, + }); + }); + + it('uses the expand token for the chevron', async () => { + await render( + + + + ); + expect( - getAccordionColors({ - theme: getTheme(), - isExpanded: true, - }) - ).toMatchObject({ - titleTextColor: getTheme().colors?.primary, + screen.getByText('chevron-down', { includeHiddenElements: true }) + ).toHaveStyle({ + color: getTheme().colors.onSurface, + }); + }); + + it('applies the theme override to title and description typography', async () => { + await render( + + + + ); + + expect(screen.getByText('Accordion item 1')).toHaveStyle({ fontSize: 99 }); + expect(screen.getByText('Describes the expandable list item')).toHaveStyle({ + fontSize: 77, + }); + }); + + 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..522d847e76 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,113 @@ it('renders list item with custom content style', async () => { expect(screen.getByTestId('list-item-content')).toHaveStyle(styles.content); }); + +it('hits the one line container height without measuring the description', async () => { + await render(); + + expect(screen.getByTestId(testID)).toHaveStyle({ + minHeight: 56, + paddingVertical: 12, + }); +}); + +it('hits the two and three line container heights without measuring', async () => { + await render( + + ); + + expect(screen.getByTestId(testID)).toHaveStyle({ + minHeight: 72, + paddingVertical: 12, + }); + + await fireEvent(screen.getByText('Item description'), 'textLayout', { + nativeEvent: { lines: [{}, {}] }, + }); + + expect(screen.getByTestId(testID)).toHaveStyle({ + minHeight: 72, + paddingVertical: 12, + }); +}); + +it('top aligns the accessories once the description wraps', async () => { + await render( + } + testID={testID} + /> + ); + + expect(screen.getByTestId('left-accessory')).toHaveStyle({ + alignSelf: 'center', + }); + + await fireEvent(screen.getByText('Item description'), 'textLayout', { + nativeEvent: { lines: [{}, {}] }, + }); + + expect(screen.getByTestId('left-accessory')).toHaveStyle({ + alignSelf: 'flex-start', + }); +}); + +it('applies the theme override to title and description typography', async () => { + await render( + + ); + + expect(screen.getByText('First Item')).toHaveStyle({ fontSize: 99 }); + expect(screen.getByText('Item description')).toHaveStyle({ fontSize: 77 }); +}); + +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__/Tooltip.test.tsx b/src/components/__tests__/Tooltip.test.tsx index 75b4a18cf7..43904e5bd5 100644 --- a/src/components/__tests__/Tooltip.test.tsx +++ b/src/components/__tests__/Tooltip.test.tsx @@ -163,7 +163,7 @@ describe('Tooltip', () => { it('hides the tooltip when the user stop pressing the component', async () => { const { wrapper: { queryByText, getByText, findByText }, - } = await setup({ enterTouchDelay: 50, leaveTouchDelay: 0 }); + } = await setup({ enterTouchDelay: 50, leaveTouchDelay: 100 }); await userEvent.longPress(getTrigger(getByText)); diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 66fa6d11e8..0f8b8bdb07 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -47,8 +47,12 @@ exports[`renders expanded accordion 1`] = ` }, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, }, undefined, ], @@ -61,7 +65,6 @@ exports[`renders expanded accordion 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -91,21 +94,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 +119,113 @@ exports[`renders expanded accordion 1`] = ` - - chevron-up - + + chevron-down + + @@ -216,49 +233,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 + + @@ -312,8 +342,12 @@ exports[`renders list accordion with children 1`] = ` }, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, }, undefined, ], @@ -326,7 +360,6 @@ exports[`renders list accordion with children 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -403,21 +436,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 +461,53 @@ exports[`renders list accordion with children 1`] = ` - - chevron-down - + + chevron-down + + @@ -519,8 +562,12 @@ exports[`renders list accordion with custom title and description styles 1`] = ` }, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 72, }, undefined, ], @@ -533,7 +580,6 @@ exports[`renders list accordion with custom title and description styles 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -563,23 +609,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 +644,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 +671,53 @@ exports[`renders list accordion with custom title and description styles 1`] = ` - - chevron-down - + + chevron-down + + @@ -719,8 +772,12 @@ exports[`renders list accordion with left items 1`] = ` }, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, }, undefined, ], @@ -733,7 +790,6 @@ exports[`renders list accordion with left items 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -810,21 +866,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 +891,53 @@ exports[`renders list accordion with left items 1`] = ` - - chevron-down - + + chevron-down + + @@ -926,8 +992,12 @@ exports[`renders multiline list accordion 1`] = ` }, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 72, }, undefined, ], @@ -940,7 +1010,6 @@ exports[`renders multiline list accordion 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, }, undefined, ] @@ -970,21 +1039,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 +1072,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 +1097,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..81fdac0b7d 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -36,8 +36,15 @@ exports[`renders list item with custom description 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 72, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -50,7 +57,6 @@ exports[`renders list item with custom description 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -83,21 +89,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, + ], ], ] } @@ -362,8 +369,15 @@ exports[`renders list item with custom title and description styles 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 72, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -376,7 +390,6 @@ exports[`renders list item with custom title and description styles 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -409,23 +422,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 +457,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", + }, + ], ], ] } @@ -507,8 +522,15 @@ exports[`renders list item with left and right items 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 72, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -521,7 +543,6 @@ exports[`renders list item with left and right items 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -557,21 +578,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 +611,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, + ], ], ] } @@ -697,8 +720,15 @@ exports[`renders list item with left item 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -711,7 +741,6 @@ exports[`renders list item with left item 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -791,21 +820,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, + ], ], ] } @@ -853,8 +883,15 @@ exports[`renders list item with right item 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -867,7 +904,6 @@ exports[`renders list item with right item 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -900,21 +936,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, + ], ], ] } @@ -965,8 +1002,15 @@ exports[`renders list item with title and description 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 72, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -979,7 +1023,6 @@ exports[`renders list item with title and description 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1012,21 +1055,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 +1088,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, + ], ], ] } @@ -1106,8 +1151,15 @@ exports[`renders with a description with typeof number 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 72, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1120,7 +1172,6 @@ exports[`renders with a description with typeof number 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1153,23 +1204,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 +1239,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..7d748bd846 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -488,8 +488,15 @@ exports[`renders list section with custom title style 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -502,7 +509,6 @@ exports[`renders list section with custom title style 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -582,21 +588,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, + ], ], ] } @@ -641,8 +648,15 @@ exports[`renders list section with custom title style 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -655,7 +669,6 @@ exports[`renders list section with custom title style 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -735,21 +748,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, + ], ], ] } @@ -1248,8 +1262,15 @@ exports[`renders list section with subheader 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1262,7 +1283,6 @@ exports[`renders list section with subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1342,21 +1362,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, + ], ], ] } @@ -1401,8 +1422,15 @@ exports[`renders list section with subheader 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1415,7 +1443,6 @@ exports[`renders list section with subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -1495,21 +1522,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, + ], ], ] } @@ -1968,8 +1996,15 @@ exports[`renders list section without subheader 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -1982,7 +2017,6 @@ exports[`renders list section without subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -2062,21 +2096,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, + ], ], ] } @@ -2121,8 +2156,15 @@ exports[`renders list section without subheader 1`] = ` false, [ { - "paddingRight": 24, - "paddingVertical": 8, + "justifyContent": "center", + "paddingRight": 16, + "paddingVertical": 12, + }, + { + "minHeight": 56, + }, + { + "backgroundColor": undefined, }, undefined, ], @@ -2135,7 +2177,6 @@ exports[`renders list section without subheader 1`] = ` [ { "flexDirection": "row", - "marginVertical": 6, "width": "100%", }, undefined, @@ -2215,21 +2256,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, + ], ], ] }