-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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.
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
Chat - New font is cut if last message is from Concierge #22247
Conversation
@rushatgabhane Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
I have read the CLA Document and I hereby sign the CLA |
recheck |
src/components/InvertedFlatList/CellRendererComponent/index.ios.js
Outdated
Show resolved
Hide resolved
@rushatgabhane not sure if you got the update. Do you think we could move on? |
src/components/InvertedFlatList/CellRendererComponent/index.android.js
Outdated
Show resolved
Hide resolved
// eslint-disable-next-line react/jsx-props-no-spreading | ||
{...props} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm curious, what's the alternative way of doing this, and don't we do it here instead of suppressing the lint rule?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure what is an alternative way. React passes bunch of props to the CellRendererComponent
. Source:
https://github.com/facebook/react-native/blob/e22bd7f6a969321607246e64c9b4e96ef9265fb1/packages/virtualized-lists/Lists/VirtualizedList.d.ts#L90-L98
Theoretically, I could specify all of them in prop types and pass them as separate props in the CellRendererComponent
. This is a bad idea:
- We care only about props that we are working with and not some internal FlatList props.
- If props list changes, on the React side and we will have to touch the component again.
I think we are better off not defining props that are irrelevant to us.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That makes sense. Do you know why we have the jsx-props-no-spreading
es lint rule then? I'm wondering if we should remove it, but this isn't a blocker as is not something that we should do in this PR
@rushatgabhane please fill out the reviewer checklist when you get a chance, and thank you! |
Reviewer Checklist
Screenshots/Videos |
@cead22 comments addressed ✅ |
Conflicts |
@cead22 @rushatgabhane rebased and retested ✅ |
hi @rushatgabhane! do you think we can move on with this one? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice and clean work. LGTM!
@petromoldovan you'll need to run |
@rushatgabhane @cead22 thanks for the review! I had to push a minor |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by https://github.com/cead22 in version: 1.3.42-0 🚀
|
🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.3.42-26 🚀
|
cc @cead22 @rushatgabhane
Details
Problem:
When a chat message is marked as unread, the "New" separator component is not overlaying an upper message. It is problematic when the upper message has a background color(message from Concierge).
Solution:
I established a clear ordering of list items in the inverted flat list. The newer list items(in the bottom of the screen) have higher
zIndex
values and can therefore overflow older(upper) elements. I defined my ownCellRendererComponent
that assigns a properzIndex
value to all rendered list items.Fixed Issues
$ #20451
PROPOSAL: #20451 (comment)
Tests
Changes touched only IOS and Android platforms. To test:
Offline tests
The same as regular tests
QA Steps
Changes touched only IOS and Android platforms. To test:
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Web
Mobile Web - Chrome
Mobile Web - Safari
Desktop
iOS
Video:
https://github.com/Expensify/App/assets/15109844/087c4d4c-f5db-4d1f-bbf3-de6488594830
Android
Video:
https://github.com/Expensify/App/assets/15109844/5d7177d7-91fc-45cd-af06-edc2619371ee