Skip to content

fix: Individually selected expense rows in grouped reports don't have a background color applied to them. #45384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcaaron merged 9 commits into from
Jul 24, 2024
Merged

fix: Individually selected expense rows in grouped reports don't have a background color applied to them. #45384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5862f00
fix: Individually selected expense rows in grouped reports don't have…
Krishna2323 Jul 14, 2024
7cdd253
Merge branch 'Expensify:main' into krishna2323/issue/45190
Krishna2323 Jul 17, 2024
41cde0a
add padding to search list items container.
Krishna2323 Jul 17, 2024
3682821
minor update.
Krishna2323 Jul 17, 2024
510dd09
update spacing.
Krishna2323 Jul 18, 2024
83eedc1
minor update.
Krishna2323 Jul 18, 2024
9b6c4bf
fix: spacing for mobile width.
Krishna2323 Jul 19, 2024
f968365
Merge branch 'main' into krishna2323/issue/45190
Krishna2323 Jul 19, 2024
1f07cb5
minor update.
Krishna2323 Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {memo} from 'react';
import {View} from 'react-native';
import type {StyleProp, ViewStyle} from 'react-native';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import {PressableWithFeedback} from '@components/Pressable';
Expand All @@ -19,6 +20,7 @@ type ExpenseItemHeaderNarrowProps = {
participantFromDisplayName: string;
participantToDisplayName: string;
action?: SearchTransactionAction;
containerStyle?: StyleProp<ViewStyle>;
onButtonPress: () => void;
canSelectMultiple?: boolean;
isSelected?: boolean;
Expand All @@ -35,6 +37,7 @@ function ExpenseItemHeaderNarrow({
onButtonPress,
action,
canSelectMultiple,
containerStyle,
isDisabledCheckbox,
isSelected,
isDisabled,
Expand All @@ -46,7 +49,7 @@ function ExpenseItemHeaderNarrow({
const theme = useTheme();

return (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb4, styles.gap2]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb3, styles.gap2, containerStyle]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.flex1]}>
{canSelectMultiple && (
<PressableWithFeedback
Expand Down
18 changes: 13 additions & 5 deletions src/components/SelectionList/Search/ReportListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,14 @@ function ReportListItem<TItem extends ListItem>({
return;
}

const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, styles.ph3];
const listItemPressableStyle = [
styles.selectionListPressableItemWrapper,
styles.pv1half,
styles.ph0,
Copy link
Copy Markdown
Contributor

@rayane-d rayane-d Nov 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, setting zero horizontal padding here caused the following issue: #50316

styles.overflowHidden,
item.isSelected && styles.activeComponentBG,
isFocused && styles.sidebarLinkActive,
];

const handleOnButtonPress = () => {
onSelectRow(item);
Expand Down Expand Up @@ -144,10 +151,11 @@ function ReportListItem<TItem extends ListItem>({
participantToDisplayName={participantToDisplayName}
action={reportItem.action}
onButtonPress={handleOnButtonPress}
containerStyle={[styles.ph3, styles.pt1half, styles.mb1half]}
/>
)}
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.mnh40]}>
<View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.ph3, styles.pv1half]}>
<View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween, styles.mnh40]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
{canSelectMultiple && (
<Checkbox
Expand Down Expand Up @@ -192,11 +200,11 @@ function ReportListItem<TItem extends ListItem>({
}}
onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
showItemHeaderOnNarrowLayout={false}
containerStyle={styles.mt3}
containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv1half]}
isChildListItem
isDisabled={!!isDisabled}
canSelectMultiple={!!canSelectMultiple}
isButtonSelected={item.isSelected}
isButtonSelected={transaction.isSelected}
shouldShowTransactionCheckbox
/>
))}
Expand Down
12 changes: 12 additions & 0 deletions src/styles/utils/spacing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,10 @@ export default {
marginBottom: 4,
},

mb1half: {
marginBottom: 6,
},

mb2: {
marginBottom: 8,
},
Expand Down Expand Up @@ -401,6 +405,10 @@ export default {
paddingVertical: 4,
},

pv1half: {
paddingVertical: 6,
},

pv2: {
paddingVertical: 8,
},
Expand Down Expand Up @@ -549,6 +557,10 @@ export default {
paddingTop: 4,
},

pt1half: {
paddingTop: 6,
},

pt2: {
paddingTop: 8,
},
Expand Down