Merge pull request #38454 from Krishna2323/krishna2323/issue/37770

fix: Workspace - Error message is left and bottom aligned in WS menus.
Expensify · Mar 26, 2024 · c8c6d9b · c8c6d9b
2 parents 4c9cdfa + e89a1e4
commit c8c6d9b
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -16,6 +16,7 @@ function BaseListItem<TItem extends ListItem>({
     item,
     pressableStyle,
     wrapperStyle,
+    containerStyle,
     selectMultipleStyle,
     isDisabled = false,
     shouldPreventDefaultFocusOnSelectRow = false,
@@ -62,6 +63,7 @@ function BaseListItem<TItem extends ListItem>({
             pendingAction={pendingAction}
             errors={errors}
             errorRowStyles={styles.ph5}
+            style={containerStyle}
         >
             <PressableWithFeedback
                 // eslint-disable-next-line react/jsx-props-no-spreading

diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx
@@ -33,6 +33,7 @@ function TableListItem({
             item={item}
             pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive]]}
             wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
+            containerStyle={styles.mb3}
             selectMultipleStyle={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!item.isDisabled)]}
             isFocused={isFocused}
             isDisabled={isDisabled}

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -44,6 +44,9 @@ type CommonListItemProps<TItem> = {
     /** Styles for the wrapper view */
     wrapperStyle?: StyleProp<ViewStyle>;
 
+    /** Styles for the container view */
+    containerStyle?: StyleProp<ViewStyle>;
+
     /** Styles for the checkbox wrapper view if select multiple option is on */
     selectMultipleStyle?: StyleProp<ViewStyle>;
 

diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
@@ -182,21 +182,22 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r
             }
 
             return (
-                <PressableWithoutFeedback
-                    role={CONST.ROLE.BUTTON}
-                    accessibilityLabel="row"
-                    style={[styles.mh5, styles.mb3]}
-                    disabled={item.disabled}
-                    onPress={item.action}
+                <OfflineWithFeedback
+                    key={`${item.title}_${index}`}
+                    pendingAction={item.pendingAction}
+                    errorRowStyles={styles.ph5}
+                    onClose={item.dismissError}
+                    errors={item.errors}
+                    style={styles.mb3}
                 >
-                    {({hovered}) => (
-                        <OfflineWithFeedback
-                            key={`${item.title}_${index}`}
-                            pendingAction={item.pendingAction}
-                            errorRowStyles={styles.ph5}
-                            onClose={item.dismissError}
-                            errors={item.errors}
-                        >
+                    <PressableWithoutFeedback
+                        role={CONST.ROLE.BUTTON}
+                        accessibilityLabel="row"
+                        style={[styles.mh5]}
+                        disabled={item.disabled}
+                        onPress={item.action}
+                    >
+                        {({hovered}) => (
                             <WorkspacesListRow
                                 title={item.title}
                                 menuItems={threeDotsMenuItems}
@@ -209,9 +210,9 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r
                                 brickRoadIndicator={item.brickRoadIndicator}
                                 shouldDisableThreeDotsMenu={item.disabled}
                             />
-                        </OfflineWithFeedback>
-                    )}
-                </PressableWithoutFeedback>
+                        )}
+                    </PressableWithoutFeedback>
+                </OfflineWithFeedback>
             );
         },
         [isLessThanMediumScreen, styles.mb3, styles.mh5, styles.ph5, styles.hoveredComponentBG, translate],

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4314,7 +4314,6 @@ const styles = (theme: ThemeColors) =>
             paddingHorizontal: 16,
             paddingVertical: 16,
             marginHorizontal: 20,
-            marginBottom: 12,
             backgroundColor: theme.highlightBG,
             borderRadius: 8,
         },