Update IOU Preview Card Styles #12762
Conversation
|
Looks like that gray is just one shade too dark (should be gray1, FWIW). That being said, maybe we should handle the row hover case and make the BG darker on hover? This is similar to what we would do for the workspace names in pills in the LHN on hover. Also, looks like we need to handle the border outline for the avatars too. |
|
|
|
Nice, that looks good! |
| {props.translate('iou.viewDetails')} | ||
| {Str.htmlDecode(fragment.text.split(' ')[0])} |
There was a problem hiding this comment.
When I first saw this, I thought this would cause breaking behavior with translations (i.e. not translating). But then I tested it, and it totally works! Do you happen to know why this works? I'm thinking the message must get translated upstream, but I went as far as ReportActionItem and didn't see the call to translate anywhere.
Anyway, now that we don't need this method here, we can also remove the import for withLocalize, the withLocalize props, and just export the component with export default IOUQuote instead of passing it to withLocalize.
Nice catch!
There was a problem hiding this comment.
https://github.com/Expensify/App/blob/main/src/libs/ReportUtils.js#L703-L729
This is where the fragment is coming from! Which brings up a great point- this isn't using translate. I think I can fix that here as well?
There was a problem hiding this comment.
There was a problem hiding this comment.
Commenting this for reference later, I think since these are considered a report action, it doesn't update with localize? I can get it to work on send, but not on page load, refresh, or switching languages- it always reverts to english. For now, I'm going to ignore since the method you pointed out would still work if we switched languages
in en.js iou:
requestedAction: ({amount, comment, who}) => `Requested ${amount} from ${who}${comment && ` for ${comment}`}`,
splitAction: ({amount, comment, who}) => `Split ${amount} with ${who}${comment && ` for ${comment}`}`,
cancelledAction: ({amount, comment}) => `Cancelled the ${amount} request${comment && ` for ${comment}`}`,
declinedAction: ({amount, comment}) => `Declined the ${amount} request${comment && ` for ${comment}`}`,
paidAction: ({amount, comment, who}) => `Paid ${amount} to ${who}${comment && ` for ${comment}`}`,in es.js iou:
requestedAction: ({amount, comment, who}) => `Solicitó ${amount} de ${who}${comment && ` por ${comment}`}`,
splitAction: ({amount, comment, who}) => `Split ${amount} con ${who}${comment && ` por ${comment}`}`,
cancelledAction: ({amount, comment}) => `Canceló la solicitud de ${amount} ${comment && ` por ${comment}`}`,
declinedAction: ({amount, comment}) => `Se rechazó la solicitud de ${amount} ${comment && ` por ${comment}`}`,
paidAction: ({amount, comment, who}) => `Pagué ${amount} a ${who}${comment && ` por ${comment}`}`,in reportUtils getIOUReportActionMessage()
let iouMessage;
switch (type) {
case CONST.IOU.REPORT_ACTION_TYPE.CREATE:
iouMessage = Localize.translateLocal('iou.requestedAction', {amount, who, comment});
break;
case CONST.IOU.REPORT_ACTION_TYPE.SPLIT:
iouMessage = Localize.translateLocal('iou.splitAction', {amount, who});
break;q
case CONST.IOU.REPORT_ACTION_TYPE.CANCEL:
iouMessage = Localize.translateLocal('iou.cancelledAction', {amount, who, comment});
break;
case CONST.IOU.REPORT_ACTION_TYPE.DECLINE:
iouMessage = Localize.translateLocal('iou.declinedAction', {amount, who});
break;
case CONST.IOU.REPORT_ACTION_TYPE.PAY:
iouMessage = Localize.translateLocal('iou.paidAction', {amount, who, comment});
break;
default:
break;
}
|
Hover:
|
|
Nice, I think that will work great! |
grgia
changed the title
melvin-bot
bot
requested review from
MariaHCD and
parasharrajat
and removed request for
a team
|
@parasharrajat @MariaHCD One of you needs to 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] |
|
@shawnborton taking this one to the finish line! |
| <Text style={[styles.chatItemMessage]}> | ||
| {Str.htmlDecode(fragment.text.substring(fragment.text.indexOf(' ')))} | ||
| </Text> | ||
| </Text> |
| </Text> | ||
| {props.shouldShowViewDetailsLink && ( | ||
| <View key={`iouQuote-${props.action.reportActionID}-${index}`} style={[styles.textInputAndIconContainer, styles.alignItemsStart, styles.justifyContentBetween]}> | ||
| <Text> |
| secondAvatarStyle={[styles.secondAvatarInline, {borderColor: themeColors.cardBG}, | ||
| props.isFocused | ||
| ? {borderColor: themeColors.border} | ||
| : undefined]} |
There was a problem hiding this comment.
No inline styles. We can move these to styles.js
A clean syntax for conditional styles will be
[
props.isFocused && {borderColor: themeColors.border}
]
| @@ -65,6 +65,8 @@ const propTypes = { | |||
| hasOutstandingIOU: PropTypes.bool, | |||
| }), | |||
|
|
|||
| isFocused: PropTypes.bool, | |||
| containerStyles={[styles.cursorPointer, | ||
| props.isFocused | ||
| ? styles.iouPreviewBoxHover | ||
| : undefined]} |
There was a problem hiding this comment.
| containerStyles={[styles.cursorPointer, | |
| props.isFocused | |
| ? styles.iouPreviewBoxHover | |
| : undefined]} | |
| containerStyles={[ | |
| styles.cursorPointer, | |
| props.isHovered && styles.iouPreviewBoxHover | |
| ]} |
There was a problem hiding this comment.
I had to keep the original ternary (it's used in a few other files) because I kept getting console errors as react wouldn't accept the false boolean as a style, even if in an array or object
|
What should be the interactive element here? Previously, it was I think it should be full message now and the card. Only Arrow does not fit with our other components. Take menu items for example. They have right arrow but the whole elment is clickable. |
|
I addressed most of these suggestions, and I agree that we should follow interactive patterns with the arrow. I'll wait for @shawnborton to confirm before I fix the IOUQuote file. (arrow, message, or entire row) |
|
Thanks. Testing... |
Screenshots🔲 iOS / native
🔲 iOS / Safari
🔲 MacOS / Desktop
🔲 MacOS / Chrome
🔲 Android / Chrome
🔲 Android / native
|
There was a problem hiding this comment.
Reviewer Checklist
- I have verified the author checklist is complete (all boxes are checked off).
- I verified the correct issue is linked in the
### Fixed Issuessection above - I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the
Testssection - I verified the steps for Staging and/or Production testing are in the
QA stepssection - I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- I verified the steps for local testing are in the
- I checked that screenshots or videos are included for tests on all platforms
- I included screenshots or videos for tests on all platforms
- I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
- If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
- I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
toggleReportand notonIconClick). - I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all
src/languages/*files - I verified any copy / text that was added to the app is correct English and approved by marketing by adding the
Waiting for Copylabel for a copy review on the original GH to get the correct copy. - I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in
STYLE.md) were followed
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
- If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
- I verified that this PR follows the guidelines as stated in the Review Guidelines
- I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like
Avatar, I verified the components usingAvatarhave been tested & I retested again) - I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
- I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
- If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a
/** comment above it */ - The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to
thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor) - Any internal methods bound to
thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick) - All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
- If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e.
StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
- If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like
Avataris modified, I verified thatAvataris working as expected in all cases) - If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
- I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.
cc: @Luke9389
🎀 👀 🎀 C+ reviewed
|
|
src/styles/styles.js
Outdated
| @@ -1657,7 +1657,7 @@ const styles = { | |||
| right: -25, | |||
| borderWidth: 3, | |||
| borderRadius: 18, | |||
| borderColor: themeColors.componentBG, | |||
| borderColor: themeColors.cardBG, | |||
There was a problem hiding this comment.
How is this change related to this PR? IMO, we should pay attention to what variables we use for which style prop.
for example, here we should use a border-type variable because we are setting border. i.e. themeColors.cardBorder etc.
This will be helpful to manage the theme. Using the wrong variable can create tight coupling between components and thus more error-prone.
There was a problem hiding this comment.
We want to avoid adding keys to the theme file in most situations. But in this case, I agree!
| paddingTop: 6, | ||
| paddingTop: 12, | ||
| paddingRight: 16, | ||
| paddingBottom: 6, | ||
| paddingBottom: 12, |
There was a problem hiding this comment.
@shawnborton Can you please confirm the medium button vertical padding?
There was a problem hiding this comment.
I think this should be good. We could test quickly by having a letter in the button that has an descender, like "Again" so we can make sure that the bottom part of the g isn't cut off.
|
Looks good to me too. Luke is out today so feel free to merge @parasharrajat @MariaHCD |
|
I can't merge this. cc: @MariaHCD |
|
Thanks, all! I'm giving this a final review now. |
|
@parasharrajat Re-ran the reviewer checklist check but it's still failing. Could you verify you've used the latest one? https://raw.githubusercontent.com/Expensify/App/main/contributingGuides/REVIEWER_CHECKLIST.md |
|
I updated it thrice. Worked this time 😅 |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
The production deploy comment failed for this PR, but this was deployed to production on v1.2.32-2 on Nov 28. |
Details
Updating the IOU Preview Styles
Fixed Issues
$ #12258
$ #12958
Tests
Offline tests
Set to offline, card looks good + highlight still worksQA Steps
To test in Dark Mode. Change the export line in
default.jstoexport default darkTheme;PR Author Checklist
I linked the correct issue in the
### Fixed Issuessection aboveI wrote clear testing steps that cover the changes made in this PR
TestssectionOffline stepssectionQA stepssectionI included screenshots or videos for tests on all platforms
I ran the tests on all platforms & verified they passed on:
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I followed proper code patterns (see Reviewing the code)
toggleReportand notonIconClick)src/languages/*filesWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedIf a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I followed the guidelines as stated in the Review Guidelines
I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like
Avatar, I verified the components usingAvatarare working as expected)I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)If a new CSS style is added I verified that:
StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like
Avataris modified, I verified thatAvataris working as expected in all cases)If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.
PR Reviewer Checklist
The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick).src/languages/*filesWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarhave been tested & I retested again)/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)Screenshots
Web
Mobile Web - Chrome
Mobile Web - Safari
Desktop
iOS
Android