fix: correct list accordion layout (#3856)

Author: lukewalczak

src/components/List/ListAccordion.tsx

@@ -2,9 +2,11 @@ import * as React from 'react';
 import {
   GestureResponderEvent,
   I18nManager,
+  NativeSyntheticEvent,
   StyleProp,
   StyleSheet,
   TextStyle,
+  TextLayoutEventData,
   View,
   ViewProps,
   ViewStyle,
@@ -16,7 +18,8 @@ import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 import { ListAccordionGroupContext } from './ListAccordionGroup';
-import { getAccordionColors } from './utils';
+import type { Style } from './utils';
+import { getAccordionColors, getLeftStyles } from './utils';
 
 export type Props = {
   /**
@@ -30,7 +33,7 @@ export type Props = {
   /**
    * Callback which returns a React element to display on the left side.
    */
-  left?: (props: { color: string }) => React.ReactNode;
+  left?: (props: { color: string; style: Style }) => React.ReactNode;
   /**
    * Callback which returns a React element to display on the right side.
    */
@@ -169,6 +172,17 @@ const ListAccordion = ({
   const [expanded, setExpanded] = React.useState<boolean>(
     expandedProp || false
   );
+  const [alignToTop, setAlignToTop] = React.useState(false);
+
+  const onDescriptionTextLayout = (
+    event: NativeSyntheticEvent<TextLayoutEventData>
+  ) => {
+    if (!theme.isV3) {
+      return;
+    }
+    const { nativeEvent } = event;
+    setAlignToTop(nativeEvent.lines.length >= 2);
+  };
 
   const handlePressAction = (e: GestureResponderEvent) => {
     onPress?.(e);
@@ -206,7 +220,7 @@ const ListAccordion = ({
     <View>
       <View style={{ backgroundColor: theme?.colors?.background }}>
         <TouchableRipple
-          style={[styles.container, style]}
+          style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
           onPress={handlePress}
           onLongPress={onLongPress}
           delayLongPress={delayLongPress}
@@ -218,13 +232,19 @@ const ListAccordion = ({
           theme={theme}
           borderless
         >
-          <View style={styles.row} pointerEvents={pointerEvents}>
+          <View
+            style={theme.isV3 ? styles.rowV3 : styles.row}
+            pointerEvents={pointerEvents}
+          >
             {left
               ? left({
                   color: isExpanded ? theme.colors?.primary : descriptionColor,
+                  style: getLeftStyles(alignToTop, description, theme.isV3),
                 })
               : null}
-            <View style={[styles.item, styles.content]}>
+            <View
+              style={[theme.isV3 ? styles.itemV3 : styles.item, styles.content]}
+            >
               <Text
                 selectable={false}
                 numberOfLines={titleNumberOfLines}
@@ -249,6 +269,7 @@ const ListAccordion = ({
                     },
                     descriptionStyle,
                   ]}
+                  onTextLayout={onDescriptionTextLayout}
                 >
                   {description}
                 </Text>
@@ -283,7 +304,10 @@ const ListAccordion = ({
               !child.props.right
             ) {
               return React.cloneElement(child as React.ReactElement<any>, {
-                style: [styles.child, child.props.style],
+                style: [
+                  theme.isV3 ? styles.childV3 : styles.child,
+                  child.props.style,
+                ],
                 theme,
               });
             }
@@ -301,10 +325,18 @@ const styles = StyleSheet.create({
   container: {
     padding: 8,
   },
+  containerV3: {
+    paddingVertical: 8,
+    paddingRight: 24,
+  },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+  rowV3: {
+    flexDirection: 'row',
+    marginVertical: 6,
+  },
   multiline: {
     height: 40,
     alignItems: 'center',
@@ -317,11 +349,18 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   item: {
-    margin: 8,
+    marginVertical: 6,
+    paddingLeft: 8,
+  },
+  itemV3: {
+    paddingLeft: 16,
   },
   child: {
     paddingLeft: 64,
   },
+  childV3: {
+    paddingLeft: 40,
+  },
   content: {
     flex: 1,
     justifyContent: 'center',

src/components/List/ListItem.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  FlexAlignType,
   GestureResponderEvent,
   NativeSyntheticEvent,
   StyleProp,
@@ -17,7 +16,7 @@ import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
-import { getLeftStyles, getRightStyles } from './utils';
+import { Style, getLeftStyles, getRightStyles } from './utils';
 
 type Title =
   | React.ReactNode
@@ -37,13 +36,6 @@ type Description =
       fontSize: number;
     }) => React.ReactNode);
 
-interface Style {
-  marginLeft?: number;
-  marginRight?: number;
-  marginVertical?: number;
-  alignSelf?: FlexAlignType;
-}
-
 export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Title text for the list item.

src/components/List/utils.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { FlexAlignType, StyleSheet } from 'react-native';
 
 import color from 'color';
 import type { EllipsizeProp, InternalTheme } from 'src/types';
@@ -12,6 +12,13 @@ type Description =
       fontSize: number;
     }) => React.ReactNode);
 
+export type Style = {
+  marginLeft?: number;
+  marginRight?: number;
+  marginVertical?: number;
+  alignSelf?: FlexAlignType;
+};
+
 export const getLeftStyles = (
   alignToTop: boolean,
   description: Description,