Merge pull request #38802 from barttom/feat/38772/update-ui-for-compl…

…eted-task
Expensify · Mar 27, 2024 · 4001bf3 · 4001bf3
2 parents 77fe8da + 0000259
commit 4001bf3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -71,8 +71,13 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 contentModel: HTMLContentModel.block,
             }),
             emoji: HTMLElementModel.fromCustomModel({tagName: 'emoji', contentModel: HTMLContentModel.textual}),
+            'completed-task': HTMLElementModel.fromCustomModel({
+                tagName: 'completed-task',
+                mixedUAStyles: {...styles.textSupporting, ...styles.textLineThrough},
+                contentModel: HTMLContentModel.textual,
+            }),
         }),
-        [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting, styles.lh16],
+        [styles.formError, styles.mb0, styles.colorMuted, styles.textLabelSupporting, styles.lh16, styles.textSupporting, styles.textLineThrough],
     );
     /* eslint-enable @typescript-eslint/naming-convention */
 

diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx
@@ -108,7 +108,7 @@ function TaskPreview({taskReport, taskReportID, action, contextMenuAnchor, chatR
                         })}
                         accessibilityLabel={translate('task.task')}
                     />
-                    <RenderHTML html={htmlForTaskPreview} />
+                    <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
                 </View>
                 <Icon
                     src={Expensicons.ArrowRight}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4694,6 +4694,10 @@ const styles = (theme: ThemeColors) =>
             ...headlineFont,
             fontSize: variables.fontSizeXLarge,
         },
+
+        textLineThrough: {
+            textDecorationLine: 'line-through',
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;