Merge pull request #17781 from pubudu-ranasinghe/fix-17181-offline-ed…

…ited-line-through-styling Fix Edited Line Through Alignment
Expensify · May 26, 2023 · b6f5c67 · b6f5c67
2 parents c7390cd + a4f096e
commit b6f5c67
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -15,13 +15,14 @@ const propTypes = {
 
 const EditedRenderer = (props) => {
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style', 'tnode']);
+    const isPendingDelete = Boolean(props.tnode.attributes.deleted !== undefined);
     return (
         <Text
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...defaultRendererProps}
             fontSize={variables.fontSizeSmall}
             color={themeColors.textSupporting}
-            style={[styles.alignItemsBaseline, editedLabelStyles]}
+            style={[editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]}
         >
             {/* Native devices do not support margin between nested text */}
             <Text

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -109,7 +109,7 @@ const ReportActionItemFragment = (props) => {
             // Only render HTML if we have html in the fragment
             if (!differByLineBreaksOnly) {
                 const isPendingDelete = props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && props.network.isOffline;
-                const editedTag = props.fragment.isEdited ? '<edited></edited>' : '';
+                const editedTag = props.fragment.isEdited ? `<edited ${isPendingDelete ? 'deleted' : ''}></edited>` : '';
                 const htmlContent = applyStrikethrough(html + editedTag, isPendingDelete);
 
                 return <RenderHTML html={props.source === 'email' ? `<email-comment>${htmlContent}</email-comment>` : `<comment>${htmlContent}</comment>`} />;
@@ -125,7 +125,7 @@ const ReportActionItemFragment = (props) => {
                         <Text
                             fontSize={variables.fontSizeSmall}
                             color={themeColors.textSupporting}
-                            style={[styles.alignItemsBaseline, editedLabelStyles]}
+                            style={[editedLabelStyles, ...props.style]}
                         >
                             <Text
                                 selectable={false}

diff --git a/src/styles/editedLabelStyles/index.js b/src/styles/editedLabelStyles/index.js
@@ -1,3 +1,4 @@
 import display from '../utilities/display';
+import flex from '../utilities/flex';
 
-export default {...display.dInlineFlex};
+export default {...display.dInlineFlex, ...flex.alignItemsBaseline};